Marketing hero band
Masthead spans the full page width on landing pages (Scrawl home, Lggr marketing, Lyriq intro). Previews use 90% width and 90vh on layout doc pages so split layouts, ruled-paper backgrounds, and large type read at real scale.
atelier — typical home hero
Default stacked hero with product copy.
Ship your next release
Lyrics, stems, and artwork in one workspace.
On a landing page (hero + body)
Hero sits above the fold; content scrolls beneath at the same viewport width.
Ship your next release
Lyrics, stems, and artwork in one workspace.
Everything below the fold scrolls normally.
Masthead is full viewport width on marketing pages — not constrained to the dashboard main column.
Split layout with media
layout="split" (or pass media) — copy left, illustration right at sm+.
Ship your next release
Lyrics, stems, and artwork in one workspace.
Product preview / illustration slot
Badges + multiple actions (Lggr home)
Centered (catalog / docs intro)
Component catalog
Copy-friendly UI with per-product themes.
Size sm — compact band (settings / release notes)
Still full width — only vertical padding and type scale shrink.
Settings
Account preferences and security.
Description only (no actions)
Release notes
Version 2.4 — sidebar chrome, fade dividers, and masthead variants.
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| size | Optional | "sm" | "md" | "lg" | md | Vertical padding and type scale. |
| align | Optional | "start" | "center" | start | Text and CTA alignment. |
| layout | Optional | "stacked" | "split" | — | Defaults to split when media is set. |
| title / titleAccent | Optional | ReactNode | — | Headline + product-specific accent line. |
| description | Optional | ReactNode | — | Lead paragraph. |
| badges | Optional | ReactNode | — | Chip row below description. |
| actions | Optional | ReactNode | — | Button / Link CTAs. |
| media | Optional | ReactNode | — | Illustration in split layout. |