A responsive footer arrangement for navigation groups and supporting content. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
footer,footer--center,footer-title
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<footer class="footer">
<nav aria-label="Company"><h2 class="footer-title">Company</h2><a href="/about">About</a></nav>
<nav aria-label="Help"><h2 class="footer-title">Help</h2><a href="/docs">Docs</a></nav>
</footer>Variants and composition
footer–center centers the band and its groups. Horizontal versus stacked group layout can also be chosen with ordinary utilities.
Behavior and accessibility
Use semantic footer and named navigation where applicable. The preset lays out groups but does not choose the site’s links or color system.
Reference
See the interactive Storybook specimen. Continue to Frame or return to the Official preset overview.