docs / patterns / section-label
SectionLabel
a heading row that names a region: a mono index, a title, an accent hairline, and a trailing aside. add a description and it becomes a full section header.
intensity · structuresrsc · server
provenance
shaped from personal-websitelayer
core / patternsintensity
structures · organizes a region, stays out of the contentcomposition
at the top of every major page region, index counting upaside carries the region's one metadata fact, like a countnot a page title. it labels a section, PageHeader opens the pagenever stack two without content between thema11y
the title is a realh2 heading · the hairline is aria-hiddenjest-axelabel row
01
Selected work
6 projects02
Writing
Now
2026section header
03
About
est. 2024with a description the label grows into a section header. the row keeps its rhythm and the lede stays muted below it.
props
| prop | type | default | notes |
|---|---|---|---|
| index | string | — | mono, glowing accent index before the title (e.g. 01). |
| title | ReactNode | — | the section title, rendered as an h2. |
| aside | ReactNode | — | trailing content after the hairline (e.g. a count). |
| description | ReactNode | — | a lede below the row. turns the label into a section header. |
| tone | "accent" | "accent-alt" | "accent" | the index color. accent glows, accent-alt does not. |
get it
bun add @usva-ui/reactusage
import { SectionLabel } from "@usva-ui/react/patterns/section-label";
<SectionLabel index="01" title="Projects" aside="6 total" />