Hero

Layout Variants

Size Variants

Background Treatment

Hero Properties

CSS Custom Properties

Design Token Mappings

Configure your typography scale with the Font Scale Generator. Preview gradient backgrounds in the Gradient Generator. Verify text contrast with the Contrast Checker.

Hero States

Hero is primarily a static presentational component, but it has important viewport-driven and content-driven states:

Responsive Typography

Hero typography should use fluid sizing with clamp() to scale smoothly between viewport sizes:

.hero__title {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
}
.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1.5;
}

This eliminates the need for breakpoint-specific font-size media queries. Configure your fluid type scale with the Font Scale Generator.

Background Image Loading

Always provide a background-color fallback that closely matches the dominant color of the hero image. This prevents a jarring white-to-image flash:

.hero {
  background-color: #1a1a2e; /* dominant image color */
  background-image: url('hero.webp');
  background-size: cover;
  background-position: center;
}

Accessibility Requirements

Hero sections present significant accessibility challenges due to their reliance on visual impact, background imagery, and often low contrast ratios between text and backgrounds.

WCAG Success Criteria:

• 1.4.3 Contrast (Minimum) (Level AA): All text in the hero must achieve at least 4.5:1 contrast for normal text and 3:1 for large text (≥ 18pt or 14pt bold) against its background. For text over images, this means testing against the worst-case area of the image where text appears — not just the average color. Use a semi-transparent overlay or scrim gradient to guarantee contrast. Verify with the Contrast Checker.
• 1.4.6 Contrast (Enhanced) (Level AAA): For enhanced accessibility, aim for 7:1 (normal text) and 4.5:1 (large text). Hero titles (typically ≥ 24px bold) qualify as large text and need 3:1 minimum, 4.5:1 enhanced.
• 1.4.11 Non-text Contrast (Level AA): CTA buttons and interactive elements within the hero must maintain 3:1 contrast against their background.
• 1.1.1 Non-text Content (Level A): Background images that convey information (not purely decorative) must have text alternatives. If the background image is decorative (which is typical for heroes), it should be applied via CSS background-image (which is inherently hidden from AT) rather than <img>.
• 1.4.10 Reflow (Level AA): Hero content must reflow to a single column at 320px width without horizontal scrolling. Split heroes must stack. Full-viewport heroes should transition to auto-height on mobile.
• 2.3.1 Three Flashes or Below Threshold (Level A): Video backgrounds must not contain sequences that flash more than three times per second. This can trigger seizures. Review video content or use a static poster image fallback.
• 1.4.12 Text Spacing (Level AA): Hero text must remain readable when users apply custom text spacing (line-height 1.5×, letter-spacing 0.12em, word-spacing 0.16em, paragraph spacing 2×). Avoid fixed-height containers that clip text when spacing increases.
• 2.2.2 Pause, Stop, Hide (Level A): If the hero has an auto-playing video or animated content, provide controls to pause or stop it. For prefers-reduced-motion: reduce, pause animations automatically.

Text-over-Image Strategies:

The recommended approach is a gradient scrim: a CSS gradient overlay that transitions from near-opaque behind the text to transparent toward the image focal point. This provides reliable contrast while preserving image visibility.

Usage Guidelines

Do:

• Use fluid typography with clamp() for responsive hero titles — configure with the Font Scale Generator
• Always provide a background-color fallback that approximates the hero image's dominant color
• Test text contrast against the worst-case background area, not the average — use the Contrast Checker
• Use a scrim gradient overlay for text-over-image heroes to ensure consistent contrast
• Keep hero messaging concise: one headline, one supporting line, one primary CTA
• Provide prefers-reduced-motion handling for video/animated heroes
• Use loading="eager" and fetchpriority="high" for hero images — they are the LCP element
• Include a single clear call-to-action. If you must have two, make one primary and one secondary (ghost/outline)

Don't:

• Place critical content below a full-viewport hero on mobile — users may not realize they can scroll
• Use auto-playing video with sound — always mute autoplay videos
• Use text directly over busy images without an overlay — this virtually guarantees contrast failures
• Create heroes taller than the viewport on mobile — content below becomes invisible
• Use hero carousels/sliders — they have poor engagement rates and significant accessibility issues (see Carousel)
• Rely on background images for conveying essential information — they're invisible to screen readers and may not load

Performance Considerations:

Hero Copy Hierarchy:

Design System Implementations

Hero sections are typically application-level compositions rather than standardized design system primitives. Most design systems provide the building blocks (typography, spacing, buttons, layout) and leave hero composition to the application layer. However, some systems include hero-specific components:

Bootstrap provides the Jumbotron (deprecated in v5) which was a simple padded container with a larger heading. In Bootstrap 5, the recommended approach is composing a hero from utility classes: py-5 text-center bg-body-tertiary with responsive grid columns. Bootstrap's Examples page includes several hero templates (centered, split, image background) as copy-paste starting points.

Material Design 3 does not include a "Hero" component. MUI's approach is to compose heroes from <Box>, <Container>, <Typography>, <Stack>, and <Button>. The Material Design spec does not define a hero section pattern, as it is more of a marketing/editorial pattern than an application UI pattern.

Chakra UI does not provide a Hero component. Chakra's documentation includes hero examples built from <Container>, <Heading>, <Text>, <Stack>, and <Button>. The philosophy is that heroes are too variable in layout and content to standardize into a single component.

Tailwind UI (the commercial component library for Tailwind CSS) provides numerous hero section templates in their "Marketing > Hero Sections" category. These include: simple centered, split with image, split with screenshot, angled background, with app screenshot, with phone mockup, and dark variants. Tailwind UI represents the most comprehensive hero pattern library available, though it is template-based rather than component-based.

Ant Design does not provide a hero component. Landing page patterns are available in Ant Design Pro and Ant Design Landing (a separate page builder tool) which includes hero section templates with animated text and scroll-triggered effects.

Shadcn/ui does not include a hero component but provides all building blocks. Community-contributed hero patterns are available through the Shadcn registry and typically combine the Card, Button, and typography primitives with Tailwind utilities.

The consensus across design systems is that heroes are composed, not componentized. The building blocks that matter most for heroes are: Stack for content layout, Grid for split layouts, typography components for display headings, and Button for CTAs.