The cover is generally used for centering content on a page. Use it for landing hero sections, empty states, and error page where the center content should be vertically centered, and the edged content should be pinned to the top and bottom.
Examples
<header class="docs-box">Top</header>
<div class="cover-center docs-box">Centered</div>
<footer class="docs-box">Bottom</footer>
Quirk worth knowing: the default --cover-min-height fills the
viewport. That's right for landing heroes and empty-state pages that should fill the screen.
It's wrong for an in-page section, where the cover would stretch far beyond the surrounding
content. If you're using .cover inside an article, set
--cover-min-height to an explicit size (e.g. 20rem) up front.
There's no way to "let it size to the content"; the point of cover is to have a minimum.
Reference
Source: src/css/composition.css
Applies to
.cover
Tokens
| Token | Default | Description |
|---|---|---|
--cover-min-height | 100vh | Minimum height for the cover container |
--cover-padding | var(--space-md) | Inner padding for the cover container |