Cover

The cover layout helper creates a container with a minimum height to hold vertically centered content, ideal for "above the fold" hero blocks and sections needing visual prominence. It uses the classes l-cover for the container and principal for the content to be centered.

CSS custom properties

--cover-min-height: Override the default minimum height, which is set to 30vh.
--cover-padding: Override the default padding, which is set to 1.25rem.
--cover-min-space: Override the minimum spacing between child items, which is set to 1.25rem.

Cover with horizontal centering using a utility class

Here is the principal content

Cover with a nested center layout for horizontal centering

Here is the principal content

Cover with optional header and footer content

"Header" content, e.g. a close button

The principal content

"Footer" content

Considerations

By adding a class to "Header" and/or "Footer" we could then use align-self: flex-end; to shift them to the far edge of cover.