Footer

Page footer with links, branding, social icons, and copyright.

Multi-column

Classic footer with link columns and branding.

html 
<footer class="uc-border-t uc-bg-neutrals-surface">
  <div class="uc-max-w-6xl uc-mx-auto uc-px-6 uc-py-12">
    <div class="uc-grid uc-grid-cols-4 uc-gap-8">
      <div>
        <h4 class="uc-font-bold">Brand</h4>
        <p class="uc-text-sm uc-text-fg-disabled">Description</p>
      </div>
      <div>
        <h4 class="uc-text-sm uc-font-semibold">Product</h4>
        <a>Features</a>
        <a>Pricing</a>
      </div>
    </div>
  </div>
</footer>

Simple Centered

Minimal centered footer with copyright.

html 
<footer class="uc-border-t uc-py-6 uc-text-center">
  <p class="uc-text-sm uc-text-fg-disabled">&copy; 2026 Company. All rights reserved.</p>
</footer>

With Newsletter

Footer with email subscribe form and social links.

html

Stay in the loop

Get updates about new components and features.

Links

Legal

© 2026 Brand. All rights reserved.

<footer class="uc-border-t uc-py-8">
  <div class="uc-flex uc-items-center uc-justify-between uc-px-6">
    <span>Brand</span>
    <nav class="uc-flex uc-gap-4">
      <a>Terms</a>
      <a>Privacy</a>
    </nav>
    <div class="uc-flex uc-gap-3">
      <!-- social icons -->
    </div>
  </div>
</footer>

Compact Bar

Single-line footer bar with minimal content.

html 
<footer class="uc-border-t uc-py-6 uc-text-center">
  <p class="uc-text-sm uc-text-fg-disabled">&copy; 2026 Company. All rights reserved.</p>
</footer>

API Reference

All CSS classes available for the Footer component.

Class Type Description
uc-border-t Border Top border to separate footer from content
uc-border-border-default Border Default border color for separators
uc-bg-neutrals-surface Color Surface background for the footer area
uc-grid uc-grid-cols-2 uc-sm:grid-cols-4 Layout Responsive grid for multi-column link sections
uc-text-fg-secondary Color Secondary text color for footer links
uc-hover:text-fg-primary Interactive Primary text on hover for links
uc-text-fg-disabled Color Muted text for copyright and social icons
uc-text-accents-red Color Red accent for heart icon in compact bar
uc-btn uc-btn-primary Component Primary button for newsletter subscribe
uc-space-y-2 Spacing Vertical spacing between link list items
uc-transition-colors Animation Smooth color transition on hover

Accessibility

Keyboard and screen reader support.

Feature Details
Landmark Use footer element for the page footer — creates contentinfo landmark
Navigation Footer nav sections should use nav with aria-label, e.g. "Footer navigation"
Links All links should have descriptive text and be keyboard accessible
Social Social media icon links need aria-label describing the platform