Hero
Hero section patterns for landing pages and marketing sites. Centered text, split layouts, background images, forms, and video backgrounds.
Overview
Hero sections are the first thing visitors see on a landing page. These patterns use <layout-cover> for vertical centering and <layout-center> for horizontal alignment, creating responsive layouts without media queries.
Key features:
- Vertical centering with
layout-cover - Configurable minimum height via
data-layout-min - Multiple layout variants (centered, split, full-width)
- Background image and video support
- Embedded form integration
- Responsive without media queries
Centered Text
The simplest hero pattern: centered headline, lead text, and call-to-action buttons. Perfect for product launches and announcements.
Centered hero with CTA buttons
<section class="hero"> <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>Ship faster with less code</h1> <p class="lead"> Vanilla Breeze is a lightweight CSS framework built on modern standards. Semantic HTML, custom elements, and design tokens. No build step required. </p> <nav> <ul data-layout="cluster" data-layout-justify="center" data-layout-gap="m"> <li><a href="/get-started/" class="button large">Get Started</a></li> <li><a href="/docs/" class="button large secondary">Documentation</a></li> </ul> </nav> </layout-stack> </layout-center> </layout-cover></section>Split with Image
Text on one side, image on the other. Uses layout-sidebar for a flexible two-column layout that stacks on narrow viewports.
Split layout with image
<section class="hero"> <layout-cover data-layout-min="60vh" data-layout-padding="xl"> <layout-center data-layout-max="wide"> <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="success">Now Available</layout-badge> <h1>Build interfaces that scale</h1> <p> Start with semantic HTML and enhance with custom elements. Our layout primitives handle the complexity so you can focus on content. </p> <nav> <ul data-layout="cluster" data-layout-gap="m"> <li><a href="/get-started/" class="button">Start Building</a></li> <li><a href="/examples/" class="button ghost">View Examples</a></li> </ul> </nav> </layout-stack> <figure class="hero-image"> <img src="/images/hero-illustration.png" alt="Application interface mockup" width="600" height="450" loading="eager" /> </figure> </layout-sidebar> </layout-center> </layout-cover></section>With Background Image
Full-width background image with a dark overlay for text readability. The overlay uses --color-overlay-strong from design tokens.
Hero with background image
<section class="hero hero-with-bg"> <layout-cover data-layout-min="80vh" data-layout-padding="xl"> <layout-center data-layout-max="normal"> <layout-stack data-layout-gap="l" class="hero-content"> <h1>Experience the difference</h1> <p class="lead"> Immerse yourself in a new way of building for the web. Modern standards, timeless simplicity. </p> <nav> <ul data-layout="cluster" data-layout-justify="center" data-layout-gap="m"> <li><a href="/demo/" class="button large">Watch Demo</a></li> <li><a href="/pricing/" class="button large ghost">View Pricing</a></li> </ul> </nav> </layout-stack> </layout-center> </layout-cover></section>Required CSS
Add these styles to support background images with overlay:
Background image styles
.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);}With Form
Hero with an embedded newsletter signup or registration form. Uses layout-sidebar to place content and form side by side.
Hero with signup form
<section class="hero"> <layout-cover data-layout-min="60vh" data-layout-padding="xl"> <layout-center data-layout-max="wide"> <layout-sidebar data-layout-gap="2xl" data-layout-sidebar-width="wide" data-layout-content-min="50"> <layout-stack data-layout-gap="l"> <h1>Stay in the loop</h1> <p class="lead"> Get the latest updates on new features, best practices, and community highlights delivered to your inbox. </p> <ul data-layout="cluster" data-layout-gap="s" class="checkmark-list"> <li><icon-wc name="check" size="sm"></icon-wc> Weekly digest</li> <li><icon-wc name="check" size="sm"></icon-wc> No spam</li> <li><icon-wc name="check" size="sm"></icon-wc> Unsubscribe anytime</li> </ul> </layout-stack> <layout-card data-variant="outlined"> <form action="/subscribe" method="POST" data-layout="stack" data-layout-gap="m"> <h2>Subscribe to our newsletter</h2> <form-field> <label for="name">Name</label> <input type="text" id="name" name="name" required autocomplete="name" placeholder="Your name" /> </form-field> <form-field> <label for="email">Email</label> <input type="email" id="email" name="email" required autocomplete="email" placeholder="you@example.com" /> </form-field> <button type="submit" class="full-width">Subscribe</button> <p class="text-sm text-muted"> By subscribing, you agree to our <a href="/privacy/">Privacy Policy</a>. </p> </form> </layout-card> </layout-sidebar> </layout-center> </layout-cover></section>With Video
Hero with video background or an embedded video player. The video background version uses an overlay for text readability.
Hero with video background
<section class="hero hero-video-bg"> <video autoplay muted loop playsinline poster="/images/video-poster.jpg"> <source src="/videos/hero-bg.mp4" type="video/mp4" /> </video> <layout-cover data-layout-min="80vh" data-layout-padding="xl"> <layout-center data-layout-max="normal"> <layout-stack data-layout-gap="l" class="hero-content"> <h1>See it in action</h1> <p class="lead"> Watch how teams are building faster with modern CSS. No frameworks, no complexity, just clean code. </p> <nav> <ul data-layout="cluster" data-layout-justify="center" data-layout-gap="m"> <li><a href="/demo/" class="button large">Play Full Video</a></li> <li><a href="/get-started/" class="button large ghost">Get Started</a></li> </ul> </nav> </layout-stack> </layout-center> </layout-cover></section>Required CSS
Add these styles for the video background effect:
Video background styles
.hero-video-bg { position: relative; overflow: hidden;} .hero-video-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;} .hero-video-bg::before { content: ""; position: absolute; inset: 0; background: var(--color-overlay-strong); z-index: 1;} .hero-video-bg > *:not(video) { position: relative; z-index: 2; color: var(--color-white);}Layout Configuration
Common data attributes for hero sections:
| Element | Attribute | Values | Description |
|---|---|---|---|
layout-cover |
data-layout-min |
CSS length (e.g., 50vh, 400px) |
Minimum height of the hero section. |
layout-cover |
data-layout-padding |
xs s m l xl 2xl |
Vertical padding inside the cover. |
layout-center |
data-layout-max |
narrow normal wide prose |
Maximum content width. |
layout-sidebar |
data-layout-sidebar-width |
narrow default wide |
Width of the sidebar column. |
layout-cluster |
data-layout-justify |
start center end between |
Horizontal alignment of buttons. |
Usage Notes
- Height: Use
vhunits for viewport-relative heights.70vhto80vhworks well for primary heroes. - Content width: Use
normalfor centered text to maintain comfortable line lengths. - Buttons: Use
data-layout="cluster"withdata-layout-justify="center"for centered layouts, or default alignment for split layouts. - Images: Use
loading="eager"for hero images since they're above the fold. - Overlays: Use
--color-overlay-strongfor dark overlays that ensure text readability. - Videos: Always include
posterattribute and usemutedwithautoplayfor background videos. - Accessibility: Ensure sufficient color contrast with overlays and use semantic headings.
Related
Layout Cover
Cover layout element documentation
Layout Center
Center layout element documentation
Layout Sidebar
Sidebar layout element documentation
Call to Action
CTA section patterns