docs / patterns / case-study-hero

CaseStudyHero

the opener at the top of a case study: a two-tone headline keyed to the study's own color, with the eyebrow, tagline, meta and media all optional slots around it.

intensity · structuresrsc · server

provenance

shaped from personal-website

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

the top of a case study page, one per pageMockupShowcase, an img or a video in the media slotnever two on one page. it is the opener, not a section headerno status colors in accentColor. it keys the study, never a meaning

a11y

headingLevel keeps the document outline correct · the link renders once, never per breakpoint · external links get rel="noopener noreferrer" and a screen-reader new-tab hintjest-axe
live demo · try it out

Case study

Acme University · 2026

Visit site (opens in a new tab)

Students could not see
their whole degree.

Four registries, one planner. Reconciling the systems nobody wanted to own.

Role
Design engineer
Timeline
6 weeks
Surface
Web, extension
Users
2,400
ReactTailwindBase UI
customize
headingLevelpick by outline, not size
accentColorkeyed to the study, not a meaning
linkexternal site pill
metadefinition-list facts
tagschip row slot
usagecopy
import { CaseStudyHero } from "@usva-ui/react/patterns/case-study-hero";
import { Chip } from "@usva-ui/react/primitives/chip";

<CaseStudyHero
  eyebrow="Case study"
  kicker="Acme University · 2026"
  headingLevel="h2"
  headline="Students could not see"
  headlineAccent="their whole degree."
  tagline="Four registries, one planner. Reconciling the systems nobody wanted to own."
  link={{ href: "https://example.com", label: "Visit site", external: true }}
  meta={[{ label: "Role", value: "Design engineer" }]}>
>
  <>
    <Chip>React</Chip>
    <Chip>Tailwind</Chip>
  </>
</CaseStudyHero>

props

proptypedefaultnotes
headlineReactNode—the display headline. the only required prop.
headlineAccentReactNode—second line of the headline, carrying the accent color. omitted entirely when absent.
accentColorstring"var(--color-accent-alt)"any CSS color. categorical, not semantic: it keys to the study, never to a meaning.
headingLevel"h1" | "h2" | "h3""h1"pick by document outline, not by size.
eyebrowReactNode—mono uppercase kicker, e.g. "Case study".
kickerReactNode—secondary mono line, e.g. the client and year.
taglineReactNode—lede under the headline.
link{ href, label, external? }—rendered exactly once. external adds target, the rel guard, and a screen-reader hint.
meta{ label, value }[]—a definition list of facts. the grid is omitted when empty.
tagsReactNode—arbitrary slot. pass Chips, spans, or nothing.
childrenReactNode—the media well. a MockupShowcase, an img, a video, or an iframe.

get it

bun add @usva-ui/reactcopy
usagecopy
import { CaseStudyHero } from "@usva-ui/react/patterns/case-study-hero";
import { MockupShowcase } from "@usva-ui/react/patterns/mockup-showcase";
import { Chip } from "@usva-ui/react/primitives/chip";

<CaseStudyHero
  eyebrow="Case study"
  headline="Students could not see"
  headlineAccent="their whole degree."
  accentColor="#52c989"
  meta={[{ label: "Role", value: "Design engineer" }]}
>
  <MockupShowcase>{/* media */}</MockupShowcase>
</CaseStudyHero>