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.