Vanilla Breeze

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 s, m, l, xl, auto xl Minimum block size: 50 / 70 / 80vh, xl = 100dvh, auto = none. One-off: style="--layout-min: 65vh".
data-layout-padding none, s, m, l, xl m Padding on all sides.
data-layout-gap none, 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl none Gap between the non-centered elements, on the shared size scale.
data-layout-centered (boolean) — Center children and text horizontally.
data-layout-principal (on any child) (boolean) — The vertically centered principal element. A sole child auto-centers without it.
data-layout-cover-top (on any child) (boolean) — Pin to the top (a <header> child is pinned automatically).
data-layout-cover-bottom (on any child) (boolean) — Pin to the bottom (a <footer> child is pinned automatically).

Basic Usage

The cover layout vertically centers its principal element while header and footer stay at their respective edges.

Height Variants

The data-layout-min attribute controls the minimum height of the cover.

Padding Variants

The data-layout-padding attribute controls internal spacing.

Usage Examples

Hero Section

Login Page

Error Page (404)

With Custom Top/Bottom Elements

Related
↑