layout-cover
Full-height container with vertically centered principal element. Perfect for hero sections, landing pages, and full-viewport layouts.
Attributes
| Attribute |
Values |
Default |
Description |
data-layout-min |
auto, 50vh, 75vh, 100vh, 100dvh |
100vh |
Minimum height of the cover |
data-layout-padding |
none, s, m, l, xl |
m |
Internal padding |
data-layout-gap |
s, m, l |
- |
Gap between non-centered elements |
data-layout-centered |
boolean |
- |
Centers content horizontally and adds text-align center |
data-layout-nospace |
boolean |
- |
Removes all padding |
Child Attributes
| Attribute |
Description |
data-layout-principal |
Marks the element to be vertically centered |
data-layout-cover-top |
Pins element to the top (alternative to <header>) |
data-layout-cover-bottom |
Pins element to the bottom (alternative to <footer>) |
Basic Usage
The cover layout vertically centers its principal element while header and footer stay at their respective edges.
Principal Content
This content is vertically centered using data-layout-principal
Code
<layout-cover data-layout-min="100vh" data-layout-padding="m" data-layout-centered>
<header>Header content</header>
<div data-layout-principal>
<h1>Principal Content</h1>
<p>This is vertically centered</p>
</div>
<footer>Footer content</footer>
</layout-cover>
Height Variants
The data-layout-min attribute controls the minimum height of the cover.
data-layout-min="auto"
Fits content
data-layout-min="50vh"
Half viewport
data-layout-min="75vh"
Three-quarter viewport
Code
<layout-cover data-layout-min="auto">...</layout-cover>
<layout-cover data-layout-min="50vh">...</layout-cover>
<layout-cover data-layout-min="75vh">...</layout-cover>
<layout-cover data-layout-min="100vh">...</layout-cover>
<layout-cover data-layout-min="100dvh">...</layout-cover>
Padding Variants
The data-layout-padding attribute controls internal spacing.
padding="none"
padding="s"
padding="l"
padding="xl"
Usage Examples
Hero Section
Welcome to Our Platform
Build amazing experiences with our comprehensive suite of tools and components.
<layout-cover data-layout-min="100vh" data-layout-padding="xl" data-layout-centered>
<header>
<layout-cluster data-layout-gap="m" data-layout-justify="between">
<strong>Brand</strong>
<nav>...</nav>
</layout-cluster>
</header>
<div data-layout-principal>
<layout-stack data-layout-gap="l" data-layout-align="center">
<h1>Welcome to Our Platform</h1>
<p>Build amazing experiences with our tools.</p>
<layout-cluster data-layout-gap="m">
<button type="button">Get Started</button>
<button type="button" class="secondary">Learn More</button>
</layout-cluster>
</layout-stack>
</div>
<footer>
<small>Scroll down to explore</small>
</footer>
</layout-cover>
Login Page
<layout-cover data-layout-min="100vh" data-layout-padding="l" data-layout-centered>
<header>
<strong>Brand Logo</strong>
</header>
<div data-layout-principal>
<layout-card style="max-inline-size: 22rem;">
<layout-stack data-layout-gap="m">
<h2>Sign In</h2>
<form>...</form>
</layout-stack>
</layout-card>
</div>
<footer>
<small>Don't have an account? <a href="#">Sign up</a></small>
</footer>
</layout-cover>
Error Page (404)
404
Page Not Found
The page you're looking for doesn't exist.
With Custom Top/Bottom Elements
Product Details
Main content centered vertically.
Step 2 of 4
<layout-cover data-layout-min="100vh" data-layout-padding="m" data-layout-gap="m">
<nav class="breadcrumb" data-layout-cover-top aria-label="Breadcrumb">
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><span aria-current="page">Item</span></li>
</ol>
</nav>
<div data-layout-principal>
<layout-stack data-layout-gap="s">
<strong>Product Details</strong>
<p>Main content centered vertically.</p>
</layout-stack>
</div>
<div data-layout-cover-bottom>
<layout-cluster data-layout-gap="s" data-layout-justify="between">
<span>Step 2 of 4</span>
<layout-cluster data-layout-gap="s">
<button type="button" class="secondary">Back</button>
<button type="button">Next</button>
</layout-cluster>
</layout-cluster>
</div>
</layout-cover>
CSS Implementation
layout-cover {
display: flex;
flex-direction: column;
min-block-size: var(--_min-height, 100vh);
padding: var(--_padding, var(--size-m));
}
/* Minimum height variants */
layout-cover[data-layout-min="50vh"] { --_min-height: 50vh; }
layout-cover[data-layout-min="75vh"] { --_min-height: 75vh; }
layout-cover[data-layout-min="100vh"] { --_min-height: 100vh; }
layout-cover[data-layout-min="100dvh"] { --_min-height: 100dvh; }
layout-cover[data-layout-min="auto"] { --_min-height: auto; }
/* Padding variants */
layout-cover[data-layout-padding="none"] { --_padding: 0; }
layout-cover[data-layout-padding="s"] { --_padding: var(--size-s); }
layout-cover[data-layout-padding="m"] { --_padding: var(--size-m); }
layout-cover[data-layout-padding="l"] { --_padding: var(--size-l); }
layout-cover[data-layout-padding="xl"] { --_padding: var(--size-xl); }
/* Gap variants */
layout-cover[data-layout-gap="s"] { gap: var(--size-s); }
layout-cover[data-layout-gap="m"] { gap: var(--size-m); }
layout-cover[data-layout-gap="l"] { gap: var(--size-l); }
/* The principal (centered) element */
layout-cover > [data-layout-principal] {
margin-block: auto;
}
/* Header element (top-aligned) */
layout-cover > header,
layout-cover > [data-layout-cover-top] {
margin-block-end: auto;
}
/* Footer element (bottom-aligned) */
layout-cover > footer,
layout-cover > [data-layout-cover-bottom] {
margin-block-start: auto;
}
/* Center text content */
layout-cover[data-layout-centered] {
align-items: center;
text-align: center;
}