LargeTitle
iOS-style oversized headline block — small uppercase mono eyebrow above a 30px headline, with an optional trailing slot (avatar, icon button) on the right. Place at the top of a scrolling mobile screen.
For the scroll-revealing iOS pattern (the LargeTitle scrolls under a sticky
header), pair this with <Topbar density="touch" /> above it and hide the
Topbar title via IntersectionObserver until the LargeTitle scrolls out of
view. The DOM order is Topbar → LargeTitle → list/grid.
Default#
A morning greeting with a date eyebrow and avatar in the trailing slot.
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| title * | ReactNode | — | Headline text. |
| titleAs | enum | h1 | Heading level for the title. Default `'h1'` — this component is intended as a screen-level header. Lower to `h2`/`h3` for nested usage. |
| eyebrow | ReactNode | — | Optional eyebrow label rendered above the title. Small, uppercase, mono. |
| trailing | ReactNode | — | Optional right-aligned slot (avatar, settings button, etc.). |