32 lines
1.6 KiB
Markdown
32 lines
1.6 KiB
Markdown
## 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
|
||
|
||
```html
|
||
<section class="marquee">
|
||
<h1 class="display-xxl">A statement.</h1>
|
||
</section>
|
||
<hr class="rule-thick" />
|
||
<section class="below-fold">…</section>
|
||
```
|
||
|
||
---
|