ShowcaseHero

Large stacked hero heading with eyebrow, optional accent line, subtitle, and stat row. Showcase tier typography (between app and marketing scale).

Preview

Usage

import { ShowcaseHero, ShowcaseStat } from '@ramtt/ui'

<ShowcaseHero
  eyebrow="Ramtt · Hue register"
  lines={['All 20 hues.', '7 stops each.', '160 colors.']}
  accentLine={2}
  subtitle="The complete color register — every hue, every stop, surface-aware and token-driven."
>
  <div className="flex gap-10">
    <ShowcaseStat label="Total colors" value="147" />
    <ShowcaseStat label="Active hues" value="14" />
  </div>
</ShowcaseHero>

Props

Prop	Type	Default	Description
eyebrow	`string`	—	Pre-label above heading
lines*	`string[]`	—	Heading lines (one per visual line)
accentLine	`number`	—	Index of line to render in accent color
subtitle	`string`	—	Subtitle paragraph
children	`ReactNode`	—	Content below subtitle (e.g. ShowcaseStat row)