Cover
The cover layout 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 centred.
Cover with horizontal centering using a utility class
Open this Cover layout with horizontally centred content via a utility class in a new tab
HTML:
<div class="l-cover">
<h1 class="principal txt-venus u-center">Here is the principal content</h1>
</div>Cover with a nested center layout for horizontal centering
Open this Cover layout with horizontally centred content via the center layout in a new tab
HTML:
<div class="l-cover">
<div class="l-center principal">
<h1 class="txt-venus">Here is the principal content</h1>
</div>
</div>Cover with optional header and footer content
The following example shows how we might change the default alignment of the 'header':
Open this Cover layout with 'header' and 'footer' content in a new tab
HTML:
<style>
.highlight__header {
align-self: flex-end;
}
</style>
<div class="l-cover highlight">
<p class="highlight__header">"Header" content, e.g. a close button</p>
<h1 class="principal txt-venus u-center">The principal content</h1>
<p>"Footer" content</p>
</div>