Footer
The end of a page: small muted type, link columns and a hairline above. No fill of its own.
Examples
Anatomy
footer.footer | Generous block padding, a 1px hairline on the top edge, small muted text. |
> .container.grid | Optional: the columns. .grid with a smaller --min gives one column per group. |
h6 | Column heading, with a little space below. |
ul > li > a | Unstyled list; links inherit the muted colour and brighten on hover. |
Accessibility
- Use a
<footer>that is a direct child of<body>(or of the page wrapper), so it maps to thecontentinfolandmark. - Wrap each link column in
<nav aria-label="…">when it is navigation, so the landmarks are told apart. - Footer links are muted until hover; they keep the global focus ring, so keyboard users still see where they are.