Footer, with a call to action

Install

npx shadcn add @klarhimmel/footer-cta

Usage

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <FooterCta props={{
          "brand": "Northlight",
          "ctaTitle": "Ready to take your first booking?",
          "ctaText": "Free for 30 days. No card, and your calendar stays where it is.",
          "cta": {
            "label": "Start free",
            "href": "#start"
          },
          "secondary": {
            "label": "Talk to us",
            "href": "#contact"
          },
          "columns": [
            {
              "title": "Product",
              "links": [
                {
                  "label": "Booking page",
                  "href": "#product"
                },
                {
                  "label": "Calendar",
                  "href": "#calendar"
                },
                {
                  "label": "Pricing",
                  "href": "#pricing"
                }
              ]
            },
            {
              "title": "Company",
              "links": [
                {
                  "label": "About",
                  "href": "#about"
                },
                {
                  "label": "Journal",
                  "href": "#journal"
                },
                {
                  "label": "Careers",
                  "href": "#careers"
                }
              ]
            },
            {
              "title": "Help",
              "links": [
                {
                  "label": "Guides",
                  "href": "#guides"
                },
                {
                  "label": "Status",
                  "href": "#status"
                },
                {
                  "label": "Contact",
                  "href": "#contact"
                }
              ]
            }
          ],
          "legal": "© 2026 Northlight AB",
          "legalLinks": [
            {
              "label": "Privacy",
              "href": "#privacy"
            },
            {
              "label": "Terms",
              "href": "#terms"
            }
          ]
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

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

Also called

footer/cta

About: A footer that opens with one last ask: a large headline, a sentence and two buttons on a tinted panel, then the brand, two to four link columns and the legal row. Saves a separate call-to-action section on short pages.
Category: The end of every page: links, legal, an optional sign-up.

Notes

When to use it

A footer that opens with a tinted panel holding a headline, a sentence and two buttons, then brand, link columns and legal row. It saves a separate call-to-action section on short pages; on long pages `cta-band` plus `footer-columns` reads cleaner.

Writing for it

- The ctaTitle is required and holds 100 characters. Make it the single next step, such as booking a demo, not a general slogan. - Both buttons are links: cta is primary and secondary is the quieter one. Give the secondary a different, lower-commitment action. - Use two to four columns, each with a required title and up to six links. The brand name has its own required field of up to 40 characters.

Watch out for

Columns must be at least two, otherwise validation fails, and every column needs a title. The ctaText line is hidden when empty. The headline is an h2, so a page that also ends with `cta-band` will show two final asks.

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <FooterCta props={{
          "brand": "Northlight",
          "ctaTitle": "Ready to take your first booking?",
          "ctaText": "Free for 30 days. No card, and your calendar stays where it is.",
          "cta": {
            "label": "Start free",
            "href": "#start"
          },
          "secondary": {
            "label": "Talk to us",
            "href": "#contact"
          },
          "columns": [
            {
              "title": "Product",
              "links": [
                {
                  "label": "Booking page",
                  "href": "#product"
                },
                {
                  "label": "Calendar",
                  "href": "#calendar"
                }
              ]
            },
            {
              "title": "Company",
              "links": [
                {
                  "label": "About",
                  "href": "#about"
                },
                {
                  "label": "Journal",
                  "href": "#journal"
                }
              ]
            }
          ],
          "legal": "© 2026 Northlight AB",
          "legalLinks": [
            {
              "label": "Privacy",
              "href": "#privacy"
            },
            {
              "label": "Terms",
              "href": "#terms"
            }
          ]
        }} />
      </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
`brand`	`string`	`'Northlight'`	Text, up to 40 characters.
`mark`	`{ paths, viewBox, src }`	`-`	Fields: paths (optional), viewBox (optional), src (optional). Optional; empty is not rendered.
`ctaTitle`	`string`	`'Ready to take your first booking?'`	Text, up to 100 characters.
`ctaText`	`string`	`'Free for 30 days. No card, and your…'`	Text, up to 200 characters.
`cta`	`Link`	`{…}`	See the type.
`secondary`	`Link`	`{…}`	See the type.
`columns`	`{ title, links }[]`	`3 items`	List of 2 to 4. Each item: title, links.
`legal`	`string`	`'© 2026 Northlight AB'`	Text, up to 120 characters.
`legalLinks`	`Link[]`	`2 items`	List of up to 4.