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.

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.