footer
Footer content for its nearest sectioning ancestor. Contains information about the author, copyright, related links, or metadata about the section.
Usage
Use the <footer> element for:
- Site-wide footer with navigation, copyright, and contact info
- Article footer with author info, tags, and share links
- Section footer with related content or actions
- Card footer with actions or metadata
A page can have multiple footer elements: one for the document and additional ones within articles, sections, or other sectioning content.
Examples
Default
Basic footer without additional styling.
Default footer
<footer> <p>Copyright 2024 Acme Corp. All rights reserved.</p></footer>.site
Full-width site footer with raised background.
Site footer
<footer class="site"> <nav aria-label="Footer navigation"> <ul class="inline"> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Terms</a></li> </ul> </nav> <p><small>Copyright 2024 Vanilla Breeze. All rights reserved.</small></p></footer>.article
Article footer with border and muted text.
Article footer
<article> <h3>Article Title</h3> <p>Article content goes here...</p> <footer class="article"> <p>Written by Jane Doe on <time datetime="2024-01-15">January 15, 2024</time></p> <p>Tags: HTML, CSS, Web Development</p> </footer></article>.card
Card footer with border and raised background.
Card footer
<layout-card> <header class="card"> <h3>Card Title</h3> </header> <p>Card content with some description text.</p> <footer class="card"> <button type="button">Action</button> </footer></layout-card>.minimal
Simple centered footer with small text.
Minimal footer
<footer class="minimal"> <p>Made with care by the Vanilla Breeze team</p></footer>.columns
Multi-column footer layout for site footers.
Column footer
<footer class="columns"> <section> <h4>Product</h4> <ul class="unstyled"> <li><a href="#">Features</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Changelog</a></li> </ul> </section> <section> <h4>Company</h4> <ul class="unstyled"> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Careers</a></li> </ul> </section> <section> <h4>Resources</h4> <ul class="unstyled"> <li><a href="#">Documentation</a></li> <li><a href="#">API Reference</a></li> <li><a href="#">Community</a></li> </ul> </section> <section> <h4>Legal</h4> <ul class="unstyled"> <li><a href="#">Privacy</a></li> <li><a href="#">Terms</a></li> <li><a href="#">Cookie Policy</a></li> </ul> </section></footer>Variants
| Class | Description |
|---|---|
.site |
Full-width with generous padding and raised background |
.article |
Top border with muted, smaller text for article metadata |
.card |
Top border with raised background for card actions |
.minimal |
Centered, small, muted text for simple footers |
.columns |
Auto-fit grid layout for multi-column site footers |
.sticky |
Sticks to bottom with background and top border |
Accessibility
- The document's main footer becomes a contentinfo landmark (only when not nested)
- Include skip links to bypass footer navigation when appropriate
- Use
<nav>witharia-label="Footer navigation"for footer nav sections - Ensure sufficient color contrast for muted footer text
- Footer links should be keyboard accessible and have visible focus states