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 auto, 50vh, 75vh, 100vh, 100dvh 100vh Minimum height of the cover
data-layout-padding none, s, m, l, xl m Internal padding
data-layout-gap s, m, l - Gap between non-centered elements
data-layout-centered boolean - Centers content horizontally and adds text-align center
data-layout-nospace boolean - Removes all padding

Child Attributes

Attribute Description
data-layout-principal Marks the element to be vertically centered
data-layout-cover-top Pins element to the top (alternative to <header>)
data-layout-cover-bottom Pins element to the bottom (alternative to <footer>)

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
↑