Call to action, minimal · Klarhimmel UI

Install

npx shadcn add @klarhimmel/cta-minimal

Usage

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <CtaMinimal props={{
          "eyebrow": "",
          "title": "Ready to see the calendar?",
          "link": {
            "label": "Start free",
            "href": "/signup"
          },
          "hint": "Thirty days, no card."
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

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

Also called

cta/minimal

About: Type only: an oversized headline between two hairlines and one arrow link, nothing else. For a quiet end of page, or between long sections. Empty hint hides the small line.
Category: One clear next step near the end of a page.

Notes

When to use it

Type only: an oversized headline between two heavy rules and one arrow link, for a quiet end of page or a break between long sections. If you need two buttons or a reassurance line, use `cta-card`.

Writing for it

- The title holds 100 characters and is set at display size on wide screens, so a dozen words is already a lot. Write it as a statement, like a closing line. - The link label is a text link with an arrow, not a button. 'Start a project' reads better than 'Click here' because it is the only action on the block. - The hint (100) is the small line under the link. Use it for a practical detail such as when you reply.

Watch out for

An empty hint hides the small line, and an empty link label removes the link outside the editor, which leaves a headline with no way forward. The title is optional in the schema, so a cleared one leaves only the rules.

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <CtaMinimal props={{
          "eyebrow": "",
          "title": "Ready to see the calendar?",
          "link": {
            "label": "Start free",
            "href": "/signup"
          },
          "hint": "Thirty days, no card."
        }} />
      </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`	`''`	Text, up to 60 characters.
`title`	`string`	`'Ready to see the calendar?'`	Text, up to 100 characters.
`link`	`Link`	`{…}`	See the type.
`hint`	`string`	`'Thirty days, no card.'`	Text, up to 100 characters.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.