Hero, minimal · Klarhimmel UI

Install

npx shadcn add @klarhimmel/hero-minimal

Usage

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <HeroMinimal props={{
          "eyebrow": "Northlight Studio",
          "title": "We design calm software for busy teams",
          "description": "A small studio working with product teams on the parts people use every day.",
          "primary": {
            "label": "See our work",
            "href": "#work"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

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

Also called

hero/minimal

Category: The first screen: what it is, who it is for, what to do next.

Notes

When to use it

A text-only opener with a headline, a sentence and one action, for pages where words carry the message. If you have an image or a second action to offer, take `hero-centered` or `hero-split`.

Writing for it

- Here the title allows 160 characters, longer than other heroes, which makes room for a full statement of position instead of a slogan. - There is only one link field, primary. Make its label a verb phrase about what happens next, such as Book a call. - The description holds 300 characters, and with no image it is what keeps the page from feeling empty, so name a concrete detail.

Watch out for

The primary button disappears when its label is empty, and there is no secondary action to fall back on, so a cleared label leaves a hero with no way forward.

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <HeroMinimal props={{
          "eyebrow": "Northlight Studio",
          "title": "We design calm software for busy teams",
          "description": "A small studio working with product teams on the parts people use every day.",
          "primary": {
            "label": "See our work",
            "href": "#work"
          }
        }} />
      </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`	`'Northlight Studio'`	Text, up to 60 characters.
`title`	`string`	`'We design calm software for busy te…'`	Text, up to 160 characters.
`description`	`string`	`'A small studio working with product…'`	Text, up to 300 characters.
`primary`	`Link`	`{…}`	See the type.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.