Footer

Add class="footer" to the page footer. Everything inside is plain HTML. The element that holds the nav elements becomes the column grid, and its first child is the brand when it is not a nav. The element right after the grid is the bottom row, for the copyright and credits.

Mobile and desktop

The footer measures its own width, not the screen. Columns sit side by side while they fit and wrap to new rows when they don't. Below 48rem the brand gets a row of its own, links get more room to tap and the bottom row stacks. The example above is narrower than 48rem, so it shows the phone layout. Resize the window to see both layouts in this site's own footer.

On phones with a home indicator, the bottom padding grows to keep the content clear of it.

Simple footer

Without a nav, the footer is a plain band for a line or two of text.

Sticky

.sticky keeps the footer at the bottom of the window when the page is shorter than the screen. On longer pages it sits after the content as usual. The footer must be a direct child of body, which becomes a flex column. In a flex column the margins of the other children no longer collapse, so check the spacing of your page sections.

<footer class="footer sticky">...</footer>

Colors

A color class fills the band. Text, headings and links switch to the band's text color.

Variables