Case study, story · Klarhimmel UI

Install

npx shadcn add @klarhimmel/case-study-story

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import CaseStudyStory from '@/components/klarhimmel/blocks/case-study-story';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <CaseStudyStory props={{
          "eyebrow": "Customer story",
          "client": "Villa Lindeborg",
          "title": "From a paper diary to a full house in the shoulder season",
          "media": {
            "src": "",
            "alt": "The villa seen from the garden gate"
          },
          "chapters": [
            {
              "label": "Challenge",
              "title": "Empty weeks between holidays",
              "text": "Villa Lindeborg was booked solid in July and half empty in May and September. The owners kept bookings in a paper diary and could not see gaps until it was too late to fill them."
            },
            {
              "label": "Approach",
              "title": "One calendar, three short offers",
              "text": "They moved the diary into Northlight in an afternoon, then published a mid-week offer and a long-stay rate for the quiet weeks. Nothing else changed."
            },
            {
              "label": "Result",
              "title": "Shoulder season filled",
              "text": "By the second autumn the quiet weeks were 80% booked, mostly by returning guests who found the offers by email. The diary is now a decoration."
            }
          ],
          "link": {
            "label": "Read the full story",
            "href": "/customers/villa-lindeborg"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/case-study-story';

Also called

case-study/story

Category: One customer story: the problem, the work, the result.

Notes

When to use it

A narrative case study with a wide photo and two to four chapters side by side, such as Challenge, Approach and Result. Words come first here; use `case-study-metrics` if numbers should lead.

Writing for it

- Each chapter has a 30 character label, an 80 character title and 420 characters of text. Use the labels for the plot beats and the titles to state each one in a line. - The picture is cropped very wide, at 21 to 9, so pick a landscape photo with the subject in the middle band. - The client name (60 characters) is a small line over the title, and the title (140 characters) should be the outcome in plain words.

Watch out for

Three chapters become three columns and four chapters become four columns only on very wide containers, otherwise two. Chapter texts of 420 characters in four columns get tall and narrow, so keep them shorter there.

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 CaseStudyStory from '@/components/klarhimmel/blocks/case-study-story';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <CaseStudyStory props={{
          "eyebrow": "Customer story",
          "client": "Villa Lindeborg",
          "title": "From a paper diary to a full house in the shoulder season",
          "media": {
            "src": "",
            "alt": "The villa seen from the garden gate"
          },
          "chapters": [
            {
              "label": "Challenge",
              "title": "Empty weeks between holidays",
              "text": "Villa Lindeborg was booked solid in July and half empty in May and September. The owners kept bookings in a paper diary and could not see gaps until it was too late to fill them."
            },
            {
              "label": "Approach",
              "title": "One calendar, three short offers",
              "text": "They moved the diary into Northlight in an afternoon, then published a mid-week offer and a long-stay rate for the quiet weeks. Nothing else changed."
            },
            {
              "label": "Result",
              "title": "Shoulder season filled",
              "text": "By the second autumn the quiet weeks were 80% booked, mostly by returning guests who found the offers by email. The diary is now a decoration."
            }
          ],
          "link": {
            "label": "Read the full story",
            "href": "/customers/villa-lindeborg"
          }
        }} />
      </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`	`'Customer story'`	Text, up to 60 characters.
`client`	`string`	`'Villa Lindeborg'`	Text, up to 60 characters.
`title`	`string`	`'From a paper diary to a full house …'`	Text, up to 140 characters.
`media`	`Media`	`{…}`	See the type.
`chapters`	`{ label, title, text }[]`	`3 items`	List of 2 to 4. Each item: label, title, text.
`link`	`Link`	`{…}`	See the type.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.