Cover
Fills at least the viewport's height and centers one child vertically, with optional content pinned above and below it.
Example
View Code
<header class="cover" data-gap="lg">
<nav aria-label="Site"><a href="#">Yeti</a></nav>
<h1 data-center>A heading centered in the viewport</h1>
<p>Pinned to the bottom.</p>
</header>
When to use it
A cover is the hero section, the sign-in screen, the "coming soon" page: one thing centered in the height of the viewport, with a navigation bar above it or a footnote below it when you want them.
How it works
The cover is a flex column with a minimum block size of --yeti-cover-height, 100dvh by default so it tracks the browser chrome on phones. The child marked data-center gets automatic block margins, which take up all the free space equally above and below it; anything else sits at its natural size at the top or bottom. The gap keeps the centered child from touching its neighbours when the content is taller than the viewport.
Why this name
The block covers the viewport. Foundation 6 had no primitive for this; people combined a full-height utility with vertical alignment classes on the grid.
Attributes
| Attribute | Type | Values | Default | Description |
|---|---|---|---|---|
data-gap |
enum | none, xs, sm, md, lg, xl, 2xl, 3xl, xs-sm, xs-md, xs-lg, xs-xl, xs-2xl, xs-3xl, sm-md, sm-lg, sm-xl, sm-2xl, sm-3xl, md-lg, md-xl, md-2xl, md-3xl, lg-xl, lg-2xl, lg-3xl, xl-2xl, xl-3xl, 2xl-3xl |
md |
Minimum space between the centered child and whatever sits above or below it. |
Markers
Attributes that descendants carry, not the root.
| Attribute | Type | Values | On | Description |
|---|---|---|---|---|
data-center |
boolean | > * |
Centers the child in the space the others leave; exactly one child carries it. |
Children
> *: at least 1. A header, the centered child, a footer: any of them optional except the centered one.> [data-center]: exactly 1. Exactly one child carries data-center and is centered in the remaining space.
Tokens
| Token | Description |
|---|---|
--yeti-cover-height |
The minimum block size. Set it to auto for a cover no taller than its content. |
--yeti-space-md |
The default gap. |
Internal tokens (may change between minor versions)
- `--_yeti-gap`Accessibility
- Purely visual. Keep the page's h1 inside the cover when the cover is the hero.
Browser support
- Used without guards: flexbox gap, dvh units
- Behind
@supports: nothing
JavaScript
None. This component is CSS only.
Available since 7.0.0.