1.6 KiB
03 · Marquee Hero
The hero IS the page above the fold. A single bold statement or visual fills the viewport. No subhead, no CTA in fold. Below the fold the page becomes something else (a list, a grid, prose).
- Heading: display fills the fold — 8–14 vw type, hugging the viewport edges.
- Body: below-fold becomes a list of work or a single content block; the hero doesn't continue.
- Divider: a thick rule between hero and below-fold, OR a hard colour change.
- Button: none in fold; first CTA arrives below.
- Image: none in fold (typography is the visual), OR a single full-bleed photograph as the fold background.
- Reveal: the fold is static; below-fold may sweep in horizontally.
Reach for it when the brand or person is the message — designer/director portfolios, indie products with a single declarative voice, any "this is who we are" page.
Avoid for products whose value requires explanation in seconds. Marquee makes the user scroll before they understand.
Reference: 14islands.com, destroytoday.com, many design studio homepages.
Sample opening lines (imitate the specificity, not the wording):
"Type, set with care." — Hallmark Specimen — refusal of the verb, treats type as material "A studio for what's next." — italic editorial display, names the practice without explaining it "Design like print: warm, off-register, intentional." — Hallmark Riso — declarative, three modifiers, full stop
<section class="marquee">
<h1 class="display-xxl">A statement.</h1>
</section>
<hr class="rule-thick" />
<section class="below-fold">…</section>