Story Header

Component

About

A customer-story page header that shows the company name, sector and headline claim alongside a row of key figures, with the lead figure set in a larger display size.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Story Header to your project and fits it to your theme.

Code

How Story Header is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import StoryHeader from "@/components/ui/story-header";

export default function StoryHeaderDemo() {
  return (
    <div
      className="w-full px-6 py-16"
      style={{ background: "var(--surface-base)", color: "var(--ink-primary)" }}
    >
      <div className="mx-auto max-w-[1180px]">
        <StoryHeader
          customer="Northmoor"
          sector="Logistics, Rotterdam"
          claim="One handover pack, read the same way in four languages"
          facts={[
            {
              value: "40 min",
              label: "to produce a handover that took a shift",
              period: "Q1 2026, against 9 hours in 2025",
            },
            {
              value: "14",
              label: "sites on the same pack",
              period: "since January 2026, from one site in 2025",
            },
            {
              value: "0",
              label: "reworked after a language check",
              period: "Q1 2026, 182 packs",
            },
          ]}
        />
      </div>
    </div>
  );
}