Hero Section
Hero patterns using layout-cover for vertical centering. Responsive without media queries.
Overview
Hero sections are prominent page areas that introduce content with a headline, supporting text, and call-to-action buttons. This snippet uses <layout-cover> for vertical centering, <layout-center> for horizontal alignment, and semantic <nav> with <ul> for CTA button groups.
Key features:
- Vertical centering with
layout-cover - Configurable minimum height
- Semantic
<nav>for CTA links —data-layout="cluster"on the<ul> - Centered and split layout variants
- Optional background image support
- Responsive without media queries
Basic Hero
A centered hero with headline, lead text, and action buttons.
Basic centered hero
<section class="hero"> <layout-cover data-layout-min="60vh" data-layout-padding="xl"> <layout-center data-layout-max="normal"> <layout-stack data-layout-gap="l" class="hero-content"> <h1>Build Beautiful Interfaces</h1> <p class="lead"> A lightweight CSS framework built on modern standards. No JavaScript required for core functionality. </p> <nav> <ul data-layout="cluster" data-layout-justify="center" data-layout-gap="m"> <li><a href="/get-started/" class="button">Get Started</a></li> <li><a href="/docs/" class="button secondary">Documentation</a></li> </ul> </nav> </layout-stack> </layout-center> </layout-cover></section>Split Layout Hero
A hero with text on one side and an image on the other, using layout-sidebar.
Split layout hero
<section class="hero"> <layout-cover data-layout-min="50vh" data-layout-padding="xl"> <layout-sidebar data-layout-gap="2xl" data-layout-sidebar-width="wide" data-layout-content-min="50"> <layout-stack data-layout-gap="l"> <layout-badge data-variant="info">New Release</layout-badge> <h1>Feature Announcement</h1> <p> Detailed description of the feature or product. Highlight key benefits and unique selling points. </p> <nav> <ul data-layout="cluster" data-layout-gap="m"> <li><a href="/learn-more/" class="button">Learn More</a></li> <li><a href="/demo/" class="button ghost">Watch Demo</a></li> </ul> </nav> </layout-stack> <img src="/images/feature.png" alt="Feature illustration" width="600" height="400" loading="eager"> </layout-sidebar> </layout-cover></section>Background Image Hero
Add a background image with CSS custom property and overlay.
Hero with background image
<section class="hero hero-with-bg"> <layout-cover data-layout-min="70vh" data-layout-padding="xl"> <layout-center data-layout-max="normal"> <layout-stack data-layout-gap="l" class="hero-content"> <h1>Your Headline Here</h1> <p class="lead">Supporting text that explains the value proposition.</p> <nav> <ul data-layout="cluster" data-layout-justify="center" data-layout-gap="m"> <li><a href="/cta/" class="button large">Call to Action</a></li> </ul> </nav> </layout-stack> </layout-center> </layout-cover></section>Required CSS
Add these styles to support background images with overlay:
Hero background styles
.hero { background: var(--color-surface-raised);} .hero-content { text-align: center;} .hero .lead { font-size: var(--font-size-xl); color: var(--color-text-muted);} /* Hero with background image */.hero-with-bg { background-image: url('/images/hero-bg.jpg'); background-size: cover; background-position: center; position: relative;} .hero-with-bg::before { content: ""; position: absolute; inset: 0; background: var(--color-overlay-strong);} .hero-with-bg > * { position: relative; color: var(--color-white);}Layout Configuration
The <layout-cover> element accepts these data attributes:
| Attribute | Values | Description |
|---|---|---|
data-layout-min |
CSS length (e.g., 50vh, 400px) |
Minimum height of the cover area. |
data-layout-padding |
xs s m l xl 2xl |
Vertical padding inside the cover. |
Usage Notes
- Centering: Use
layout-centerto constrain content width and center horizontally - Text alignment: Use a
.hero-contentclass withtext-align: center;for centered content - CTAs: Wrap action links in
<nav><ul data-layout="cluster">— these are navigation, so use semantic list markup withdata-layouton the<ul> - Images: Use
loading="eager"for hero images since they're above the fold - Responsive: Split layouts automatically stack on narrow viewports
Related
Layout Cover
Cover layout element documentation
Layout Center
Center layout element documentation
Layout Sidebar
Sidebar layout element documentation