Hero

Description

.bp-hero provides a full-bleed page hero with a CSS-only entrance animation using @starting-style. No JavaScript needed for the animation. Supports three layout variants: centered, left-aligned, and with-image.

Usage

Centered (default)

Design System

Build beautiful interfaces faster

Token-driven CSS components that work everywhere.

Get started View tokens

<style>
.demo-hero--centered { --hero-min-height: 18rem; }
</style>
<section class="bp-hero bp-hero--center demo-hero--centered">
<div class="bp-hero__inner">
  <span class="bp-hero__eyebrow">Design System</span>
  <h1 class="bp-hero__headline">Build beautiful interfaces faster</h1>
  <p class="bp-hero__subheading">Token-driven CSS components that work everywhere.</p>
  <div class="bp-hero__actions">
    <a href="/components/button/" class="bp-btn">Get started</a>
    <a href="/tokens/tokens/" class="bp-btn bp-btn--ghost">View tokens</a>
  </div>
</div>
</section>

Left-aligned

Open Source

CSS that works for you

No framework lock-in. Drop in CSS, get a design system.

Read the docs

<style>
.demo-hero--left { --hero-min-height: 14rem; }
</style>
<section class="bp-hero bp-hero--left demo-hero--left">
<div class="bp-hero__inner">
  <span class="bp-hero__eyebrow">Open Source</span>
  <h2 class="bp-hero__headline">CSS that works for you</h2>
  <p class="bp-hero__subheading">No framework lock-in. Drop in CSS, get a design system.</p>
  <div class="bp-hero__actions">
    <a href="#" class="bp-btn">Read the docs</a>
  </div>
</div>
</section>

Public API

Variable	Default	Description
--hero-bg	var(--bp-color-bg)	Background color or gradient
--hero-min-height	80dvh	Minimum section height
--hero-align	center	Content alignment: center, left, right

Variants

Class	Description
bp-hero--center	Centered headline and actions (default)
bp-hero--left	Left-aligned text
bp-hero--with-image	Two-column grid: text + image

Customization example

Gradient background

Custom gradient hero

Override via --hero-bg on the section.

<style>
.demo-hero--gradient {
  --hero-min-height: 12rem;
  --hero-bg: linear-gradient(135deg, var(--bp-color-text), var(--bp-primary));
}
.demo-hero--gradient .bp-hero__headline,
.demo-hero--gradient .bp-hero__subheading { color: var(--bp-color-text-inverse); }
</style>
<section class="bp-hero bp-hero--center demo-hero--gradient">
<div class="bp-hero__inner">
  <h2 class="bp-hero__headline">Custom gradient hero</h2>
  <p class="bp-hero__subheading">Override via --hero-bg on the section.</p>
</div>
</section>

✓ No axe violations tested 2026-05-11

WCAG criteria covered:

• 1.3.1 Info & Relationships
• 1.4.3 Contrast (Min)
• 2.1.1 Keyboard
• 4.1.2 Name Role Value

Accessibility

• Use <h1> for the headline when the hero is the page’s primary heading. Use <h2> or lower only if an <h1> exists elsewhere on the page (e.g. in a skip-nav or invisible title). The demos use <h2> to avoid conflicting with Starlight’s own <h1>.
• The entrance animation respects prefers-reduced-motion via the global reset rule.

Browser APIs

API	Availability	Used for	Without it	Polyfill
@starting-style	✓ Newly available Baseline 2024	CSS-only entrance animation on page load	No entrance animation, fully functional	None needed
Container Queries	✓ Widely available Baseline 2023	Layout shifts at small container widths	Static single-column layout always	None needed
cqi units	✓ Widely available Baseline 2023	Fluid headline and subheading font-size	Fixed font-size from tokens	None needed
dvh units	✓ Widely available Baseline 2023	min-height: 80dvh accounts for mobile browser chrome	Falls back to vh via cascade	None needed

Internals

• --_bg, --_min-height, --_align — component-private, do not set directly.