cover
Fill the viewport; center the principal element; pin the rest to the edges.
Example
pinned top
the explicit principal element
pinned bottom ↓
Basic usage
<m-cover>
<nav>…</nav>
<h1>Page title</h1>
<p data-principal>Big campaign message</p>
<p>scroll ↓</p>
</m-cover>API
Fills the viewport and centers one principal child while pinning surrounding content to the edges.
Attributes
| Name | Type/Values | Default | Description |
|---|---|---|---|
gap | none · 2xs · xs · sm · md · lg · xl · 2xl | md | Sets the space between children. |
pad | none · sm · md · lg · xl | md | Sets padding on every side. |
Content/markup contract
| Name | Type/Values | Default | Description |
|---|---|---|---|
| Principal child | h1 or a child with boolean data-principal | h1 | The principal element is vertically centered. An explicit data-principal child wins over the h1; children before it pin to the top and children after it pin to the bottom. |
Styling
| Name | Type/Values | Default | Description |
|---|---|---|---|
--min-height | CSS length | 100svh | Overrides the cover's minimum height. |