docs / patterns / section-heading

SectionHeading

the opener that carries a section: a mono uppercase eyebrow over a large, fluid title.

intensity · structuresrsc · server

provenance

shaped from personal-website

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

opens a page section, one per sectionthe eyebrow names the beat: the problem, outcome, approachnot a card title. inside Card use CardHeadernever picked by size. as follows the document outline

a11y

a real heading element, h2 by default · the eyebrow is a plain paragraph, so the accessible name is the title alonejest-axe
live demo · try it out

The problem

Students could not see their whole degree.

Outcome

One planner, four systems reconciled.

No eyebrow, just the heading.

props

proptypedefaultnotes
eyebrowReactNode—mono uppercase kicker above the title. omitted entirely when absent.
titleReactNode—the display title.
as"h1" | "h2" | "h3""h2"the heading element. the type scale never changes with it.
tone"accent" | "accent-alt""accent-alt"colors the eyebrow.

get it

bun add @usva-ui/reactcopy
usagecopy
import { SectionHeading } from "@usva-ui/react/patterns/section-heading";

<SectionHeading
  eyebrow="The problem"
  title="Students could not see their whole degree."
/>