Footer

Example

<footer class="omni-footer">
  <p>© 2025 Company Name. All rights reserved.</p>
</footer>

Alignment

Use data-align to control text alignment:

Start (default)

Center

End

<footer class="omni-footer" data-align="center">
  <p>© 2025 Company. All rights reserved.</p>
</footer>

Sizes

Use data-size to adjust padding and font size:

Compact

Default

Large

<footer class="omni-footer" data-size="compact">...</footer>
<footer class="omni-footer">...</footer>
<footer class="omni-footer" data-size="large">...</footer>

Variants

Use data-variant to adjust background and border styling:

Default

Dark

Transparent

<footer class="omni-footer" data-variant="dark">...</footer>
<footer class="omni-footer" data-variant="transparent">...</footer>

With Links

Use omni-footer-link class for proper link styling:

<footer class="omni-footer" data-align="center">
  <p>
    <a href="#" class="omni-footer-link">Privacy Policy</a> ·
    <a href="#" class="omni-footer-link">Terms of Service</a> ·
    <a href="#" class="omni-footer-link">Contact</a>
  </p>
  <p>© 2025 Company Name. All rights reserved.</p>
</footer>

Multi-column Layout

Combine footer with grid or flexbox for complex layouts:

<footer class="omni-footer">
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem;">
    <div>
      <h3>Product</h3>
      <nav>
        <a href="#" class="omni-footer-link">Features</a>
        <a href="#" class="omni-footer-link">Pricing</a>
      </nav>
    </div>
    <!-- More columns... -->
  </div>
  <div style="text-align: center; padding-top: 1.5rem; border-top: 1px solid var(--omni-color-border);">
    <p>© 2025 Company Name. All rights reserved.</p>
  </div>
</footer>

Positioning

Use data-position for sticky or fixed positioning:

Sticky

Sticks to bottom when scrolling:

<footer class="omni-footer" data-position="sticky">
  <p>© 2025 Company Name</p>
</footer>

Fixed

Always fixed to bottom of viewport:

<footer class="omni-footer" data-position="fixed">
  <p>© 2025 Company Name</p>
</footer>

Container Width

Use data-container to control maximum width:

Full Width (default)

Contained

<footer class="omni-footer" data-container="contained">
  <p>Contained width footer</p>
</footer>

API Reference

Footer Component

Footer Link

Accessibility

• Use semantic <footer> element for proper document structure
• Links have clear focus indicators and keyboard navigation support
• Color contrast meets WCAG AA standards for text and links
• Logical properties ensure proper RTL language support
• Respects prefers-reduced-motion for link transitions
• Works without JavaScript - pure CSS implementation
• When using sticky/fixed positioning, ensure footer doesn't obscure interactive content

Best Practices

• Keep footer content concise and relevant
• Use consistent alignment across your application
• Include copyright, legal links, and contact information
• Consider using multi-column layout for larger footers
• Test sticky/fixed footers on mobile devices to ensure they don't obscure content
• Group related links using semantic HTML (nav, headings)
• Use data-container="contained" to match your page layout width

Components Used

Other OmniUI components demonstrated on this page:

Related