Call to action, split · Klarhimmel UI

Install

npx shadcn add @klarhimmel/cta-split

Usage

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <CtaSplit props={{
          "title": "See your week at a glance",
          "description": "Start with a free workspace. Bring your team in when the plan feels right.",
          "primary": {
            "label": "Get started",
            "href": "#start"
          },
          "secondary": {
            "label": "Book a demo",
            "href": "#demo"
          },
          "media": {
            "src": "",
            "alt": "The weekly plan in Northlight"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

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

Also called

cta/split

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

Notes

When to use it

A bordered panel with copy and buttons on one half and an image on the other, to close a page with a picture. For a full-width photo with an overlay, use `cta-media`; for no image at all, `cta-band`.

Writing for it

- Title holds 120 and description 240, but the text half is only half the width, so keep the title to one or two lines. - The secondary button is drawn in the quieter secondary style. Use it for a lower-commitment step such as 'See examples'. - The image fills the full height of its half at 4 to 3 on narrow screens, so pick a subject that survives cropping to a tall frame.

Watch out for

On narrow containers the image moves above the text, which changes the reading order from what you see on a wide preview. All text fields are optional, so check that a cleared title does not leave an image with two unlabelled buttons.

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <CtaSplit props={{
          "title": "See your week at a glance",
          "description": "Start with a free workspace. Bring your team in when the plan feels right.",
          "primary": {
            "label": "Get started",
            "href": "#start"
          },
          "secondary": {
            "label": "Book a demo",
            "href": "#demo"
          },
          "media": {
            "src": "",
            "alt": "The weekly plan in Northlight"
          }
        }} />
      </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`	`'See your week at a glance'`	Text, up to 120 characters.
`description`	`string`	`'Start with a free workspace. Bring …'`	Text, up to 240 characters.
`primary`	`Link`	`{…}`	See the type.
`secondary`	`Link`	`{…}`	See the type.
`media`	`Media`	`{…}`	See the type.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.