Layout / cover

cover

Tier 0

Fill the viewport; center the principal element; pin the rest to the edges.

pinned top

the principal element

pinned bottom ↓

<m-cover>
  <nav>…</nav>
  <h1>Big headline</h1>
  <p>scroll ↓</p>
</m-cover>

Attributes

gap; pad: none · sm · md · lg · xl. Height defaults to 100svh; override with --min-height. The principal element is the h1 by default — mark any child with class="principal" instead (it wins over the h1).