Feature section
A marketing section: a SectionHeader, any content under it, then its media: a framed screenshot, a figure or a HairlineGrid. The media goes below the text, or beside it from 64rem on either side.
Examples
Platform
A research platform that keeps the evidence.
Four steps, each one checkable.
Maps a field
Gathers a field's papers through their citations and records what each claims, with the passage it comes from.
Judges a direction
Tests a direction for novelty, feasibility and fit, each judgment a separate step with its evidence on file.
Plans submissions
Places committed work at venues whose deadlines it can meet, with a fallback if a paper is rejected.
Keeps the record
Logs every decision with the evidence it rested on and who made it, so it can be checked later.
Compass
Judges a direction before you commit to it.
Novelty, feasibility and fit at real venues, each with the passage it rests on.
Props
FeatureSection
A marketing section: the `[ 01 ]` index and overline, a heading and a one-line lede, then its media, a screenshot or a figure or a grid, below the text or beside it.
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | |
align? | "center" | "start" | — | |
index? | number | — | The section's place on the page, shown as the `[ 01 ]` chip. |
overline? | ReactNode | — | A short label above the heading, set as an overline. |
lede? | ReactNode | — | One line under the heading that says what the section shows. |
actions? | ReactNode | — | Links that lead on from the section: ButtonLinks or a text link. |
id | string | — | The section's id, for links to it; its heading's id is derived from it. |
media? | ReactNode | — | A framed screenshot, a figure, or a HairlineGrid of features. |
mediaPlacement? | "end" | "start" | "below" | "below" | below: the media under the text, the column's full width. end or start: the media beside the text from 64rem, on that side. |
children? | ReactNode | — | Content under the header, such as a list, before the media. |
ruled? | boolean | true | A rule along the section's top. Off for the first section under a hero that has none. |
flushEnd? | boolean | false | Set the media on the section's bottom rule: for a bled HairlineGrid or a cropped screenshot. |
Accessibility
- A section named by its heading, whose id is the section's id with -title.
- The text comes first in reading order whichever side the media is drawn on.
- A figure beside the text is decorative unless it carries data: mark it aria-hidden.