StoryHeader

Marketing · src/components/StoryHeader/StoryHeader.tsx

The top of a customer story: who it is about, the claim, and the figures behind it.

The FIRST fact takes the display cut and nothing else does. That is one line per surface, set once, and at 52px it clears the face's 42px floor with room. The figures 0 4 6 8 9 are among the glyphs the cut opens, so the number the story is about carries the mark - the rest stay in Pretendard.

A real dl, so each figure keeps its label structurally rather than by proximity.

Import

import { StoryHeader } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
customer	React.ReactNode
sector	React.ReactNode
logo	React.ReactNode
claim	React.ReactNode	The story's claim, as the page's h1.
facts	StoryFact[]	The lead fact first - it takes the display cut.
className	string

Exported types

StoryFact