Section · Heroes

Solution detail hero

Focused solution introduction with a unique operational visual.

Component gallery

The section at every supported size.

Frames one department-level problem, its business outcome, and a credible preview of the workflow without repeating later modules.

Desktop1440 × 760
Live component specimen
Tablet900 × 680
Live component specimen
Mobile390 × 720
Live component specimen

Build recipe

Anatomy and content rules

Anatomy

  1. Section label
  2. Two-line heading
  3. Two-line supporting copy
  4. Primary action
  5. Unique operational visual

Content checklist

  • Heading and subtitle max two lines
  • Do not repeat the hero visual later
  • Use only sourced metrics

Composition guidance

Place it with compatible sections.

Works beside

Secondary navigationWorkflow feature sequence

Live usage

/case-studies

Source reference

app/components/SolutionDetailPage.tsxapp/components/SolutionHeroVisual.tsxapp/content/solutions.ts