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.

 <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="/vanilla-breeze/get-started/" class="button">Get Started</a></li> <li><a href="/vanilla-breeze/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.

 <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="/vanilla-breeze/learn-more/" class="button">Learn More</a></li> <li><a href="/vanilla-breeze/demo/" class="button ghost">Watch Demo</a></li> </ul> </nav> </layout-stack> <img src="/vanilla-breeze/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.

 <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="/vanilla-breeze/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: 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-center to constrain content width and center horizontally
  • Text alignment: Use a .hero-content class with text-align: center; for centered content
  • CTAs: Wrap action links in <nav><ul data-layout="cluster"> — these are navigation, so use semantic list markup with data-layout on 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