v1.0.0

Footer

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

Multi-column

Classic footer with link columns and branding.

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

Simple Centered

Minimal centered footer with copyright.

html 
<footer class="vt-border-t vt-py-6 vt-text-center">
  <p class="vt-text-sm vt-text-mains-quaternary">&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="vt-border-t vt-py-8">
  <div class="vt-flex vt-items-center vt-justify-between vt-px-6">
    <span>Brand</span>
    <nav class="vt-flex vt-gap-4">
      <a class="vt-footer-link">Terms</a>
      <a class="vt-footer-link">Privacy</a>
    </nav>
    <div class="vt-flex vt-gap-3">
      <!-- social icons -->
    </div>
  </div>
</footer>

Compact Bar

Single-line footer bar with minimal content.

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

API Reference

All CSS classes available for the Footer component.

Class Type Description
vt-border-t Border Top border to separate footer from content
vt-border-border-default Border Default border color for separators
vt-bg-surfaces-surface Color Surface background for the footer area
vt-grid vt-grid-cols-2 vt-sm:grid-cols-4 Layout Responsive grid for multi-column link sections
vt-text-mains-secondary Color Secondary text color for footer links
vt-hover:text-mains-primary Interactive Primary text on hover for links
vt-text-mains-quaternary Color Muted text for copyright and social icons
vt-text-error-primary Color Red accent for heart icon in compact bar
vt-btn vt-btn-primary Component Primary button for newsletter subscribe
vt-space-y-2 Spacing Vertical spacing between link list items
vt-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