Hero
The top of a marketing page: a status pill or an overline, the heading, a lede and the calls to action, left-aligned in the framed column. A framed screenshot sits below the copy, or a figure runs beside it off the page's edge, as the home page's topology plot does.
Examples
The formal foundations of AI reasoning.
An independent AI research lab that studies reasoning through computational complexity, verification and large-scale evaluation of language models.
Platform
A research platform that keeps the evidence.
Serre maps a field, judges a direction and plans the submissions, with every judgment tied to the passage it rests on.
Research
Where reasoning should succeed, and where it should fail.
Three standing programmes, held to one standard of evidence.
Props
Hero
The top of a marketing page: an optional status pill and overline, the heading, a lede and the calls to action, left-aligned in the framed column, with a screenshot below or a figure beside.
| Prop | Type | Default | Description |
|---|---|---|---|
level? | 2 | 1 | 1 | The heading's level: 1 on a page, 2 when the hero is shown inside another page. |
pill? | ReactNode | — | A StatusPill above the heading, saying where something stands. |
overline? | ReactNode | — | A short label above the heading, set as an overline. |
title | ReactNode | — | |
face? | "sans" | "serif" | "sans" | The heading's face: the sans at 600, or the serif at 400 for an editorial page. |
lede? | ReactNode | — | One or two sentences under the heading. |
actions? | ReactNode | — | The calls to action: ButtonLinks, at most one of them accent, and a text link. |
media? | ReactNode | — | The hero's image: a framed screenshot or a figure. |
mediaPlacement? | "below" | "beside" | "below" | below: under the copy, full width, sitting on the hero's bottom edge. beside: to the right of the copy from 64rem, running off the hero's end and bottom. |
Accessibility
- Its heading is level 1 by default, the page's one h1; pass level 2 where the hero is shown inside another page.
- Everything renders on the server: the copy, the actions and a figure's still all show before any script runs.
- The layout follows the hero's own width (a container query), and a figure beside the copy becomes a band below it when the hero is narrower than 64rem.
- A figure is decorative unless it carries data: mark it aria-hidden, as the plots are (art-direction.md §7).