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.
.site
Full-width site footer with raised background.
.article
Article footer with border and muted text.
Article Title
Article content goes here...
.card
Card footer with border and raised background.
Card Title
Card content with some description text.
.minimal
Simple centered footer with small text.
.columns
Multi-column footer layout for site footers.
.sticky
Sticky footer that remains at the bottom of the viewport.
Scroll down to see the sticky 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