Call to action, band · Klarhimmel UI

Install

npx shadcn add @klarhimmel/cta-band

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import CtaBand from '@/components/klarhimmel/blocks/cta-band';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <CtaBand props={{
          "title": "Ready to bring calm to your week?",
          "description": "Start free in a minute. Invite your team when you are ready.",
          "primary": {
            "label": "Get started",
            "href": "#start"
          },
          "secondary": {
            "label": "Talk to us",
            "href": "#contact"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/cta-band';

Also called

cta/banner

Category: One clear next step near the end of a page.

Notes

When to use it

A dark, contrasting panel with a short headline and up to two buttons, placed at the end of a page. For a version with an image use `cta-split`; for a quieter, type-only ending use `cta-minimal`.

Writing for it

- The title holds 120 characters but sits in a panel beside the buttons, so around 50 reads best, as one action-led sentence. - The description allows 240 characters; use it for the reassurance the button cannot give, such as what happens after the click. - Primary is drawn as the accent button and secondary as a ghost button. Make the secondary a softer alternative like 'Talk to us', not the same action reworded.

Watch out for

Every text field and both links are optional and nothing is required, so a band with its fields cleared leaves an empty dark panel on the page. The panel sets its own inverse tone, so do not place it directly against a dark footer.

Pairs well with

Usage

The block in a page, with its default content (long lists shortened). Every prop is in the table below.

section.tsx

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import CtaBand from '@/components/klarhimmel/blocks/cta-band';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <CtaBand props={{
          "title": "Ready to bring calm to your week?",
          "description": "Start free in a minute. Invite your team when you are ready.",
          "primary": {
            "label": "Get started",
            "href": "#start"
          },
          "secondary": {
            "label": "Talk to us",
            "href": "#contact"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Props

The type, default and text limit of every prop. On a real page, over-limit text is kept and checkSections flags it (Installation, Check a page before you ship); this live preview shows the default until it fits. The panel above edits all props.

Prop	Type	Default	Description
`title`	`string`	`'Ready to bring calm to your week?'`	Text, up to 120 characters.
`description`	`string`	`'Start free in a minute. Invite your…'`	Text, up to 240 characters.
`primary`	`Link`	`{…}`	See the type.
`secondary`	`Link`	`{…}`	See the type.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.