Layout: Cover

The cover layout uses Flexbox to vertically centre content, by having a column Flexbox context and a minimum height set. It also allows the addition of header and/or footer content to accompany the principal piece of content, without having to adapt the CSS.

The following examples illustrate how the cover layout works:

• The principal item of content to be centered within the cover needs to have the class .principal applied to it. This gives it auto top and bottom margins.
• In the first example, the utility class .u-center is added to horizontally center the principal item.
• In the second example, a nested center layout provides the horizontal centering.
• The final example illustrates the addition of optional header and footer content.