Call to action, card · Klarhimmel UI

Install

npx shadcn add @klarhimmel/cta-card

Usage

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <CtaCard props={{
          "eyebrow": "Ready when you are",
          "title": "Open your first booking page today",
          "description": "Free for 30 days. Bring your rooms and rates, and we will have you live before lunch.",
          "primary": {
            "label": "Start free",
            "href": "/signup"
          },
          "secondary": {
            "label": "Talk to a person",
            "href": "/contact"
          },
          "points": [
            "No card needed",
            "Cancel any time",
            "Swedish support"
          ],
          "note": "Used by 2,400 small hotels and B&Bs."
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

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

Also called

cta/card

About: A contained, rounded card with a centred headline, two actions and a row of short reassurances (no card needed, cancel any time). Sits inside the page column instead of spanning it.
Category: One clear next step near the end of a page.

Notes

When to use it

A contained rounded card with a centred headline, two buttons and a row of short reassurances, sitting inside the page column. Use `cta-band` when you want full contrast and no reassurance row.

Writing for it

- The points are short check items of up to 80 characters, at most four, and they work best as objections answered: 'No card needed', 'Cancel any time'. - The note (120) is small print under the points. Use it for a fact such as a refund window, not a second slogan. - Eyebrow (60) and description (300) are optional; the title (120) alone can carry a card whose buttons say the rest.

Watch out for

The points row and the note vanish when empty, and an empty primary or secondary label removes that button, so a card with no label on either link is just text. The card is capped at the narrow column width.

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 CtaCard from '@/components/klarhimmel/blocks/cta-card';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <CtaCard props={{
          "eyebrow": "Ready when you are",
          "title": "Open your first booking page today",
          "description": "Free for 30 days. Bring your rooms and rates, and we will have you live before lunch.",
          "primary": {
            "label": "Start free",
            "href": "/signup"
          },
          "secondary": {
            "label": "Talk to a person",
            "href": "/contact"
          },
          "points": [
            "No card needed",
            "Cancel any time",
            "Swedish support"
          ],
          "note": "Used by 2,400 small hotels and B&Bs."
        }} />
      </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
`eyebrow`	`string`	`'Ready when you are'`	Text, up to 60 characters.
`title`	`string`	`'Open your first booking page today'`	Text, up to 120 characters.
`description`	`string`	`'Free for 30 days. Bring your rooms …'`	Text, up to 300 characters.
`primary`	`Link`	`{…}`	See the type.
`secondary`	`Link`	`{…}`	See the type.
`points`	`string[]`	`3 items`	List of up to 4.
`note`	`string`	`'Used by 2,400 small hotels and B&Bs.'`	Text, up to 120 characters.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.