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-border-border-default vt-bg-surface-card">
  <div class="vt-max-w-5xl vt-mx-auto vt-px-6 vt-py-10">
    <div class="vt-grid vt-grid-cols-2 vt-sm:grid-cols-4 vt-gap-8">
      <!-- Brand -->
      <div class="vt-col-span-2 vt-sm:col-span-1">
        <h4 class="vt-text-base vt-font-bold vt-mb-2">Brand</h4>
        <p class="vt-text-sm vt-text-foreground-muted vt-leading-relaxed">Building beautiful interfaces with utility-first CSS.</p>
      </div>
      <!-- Product -->
      <div>
        <h4 class="vt-text-sm vt-font-semibold vt-mb-3">Product</h4>
        <ul class="vt-space-y-2">
          <li><a href="#" class="vt-footer-link">Features</a></li>
          <li><a href="#" class="vt-footer-link">Pricing</a></li>
          <li><a href="#" class="vt-footer-link">Changelog</a></li>
          <li><a href="#" class="vt-footer-link">Docs</a></li>
        </ul>
      </div>
      <!-- Company -->
      <div>
        <h4 class="vt-text-sm vt-font-semibold vt-mb-3">Company</h4>
        <ul class="vt-space-y-2">
          <li><a href="#" class="vt-footer-link">About</a></li>
          <li><a href="#" class="vt-footer-link">Blog</a></li>
          <li><a href="#" class="vt-footer-link">Careers</a></li>
          <li><a href="#" class="vt-footer-link">Contact</a></li>
        </ul>
      </div>
      <!-- Legal -->
      <div>
        <h4 class="vt-text-sm vt-font-semibold vt-mb-3">Legal</h4>
        <ul class="vt-space-y-2">
          <li><a href="#" class="vt-footer-link">Privacy</a></li>
          <li><a href="#" class="vt-footer-link">Terms</a></li>
          <li><a href="#" class="vt-footer-link">Cookies</a></li>
        </ul>
      </div>
    </div>
    <div class="vt-mt-10 vt-pt-6 vt-border-t vt-border-border-default vt-flex vt-flex-col vt-sm:flex-row vt-items-center vt-justify-between vt-gap-4">
      <p class="vt-text-xs vt-text-foreground-muted">© 2026 Brand. All rights reserved.</p>
      <div class="vt-flex vt-items-center vt-gap-3">
        <a href="#" class="vt-footer-link vt-text-foreground-muted"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="vt-w-4 vt-h-4">
            <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 4 5 4 5 4c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 11c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
            <path d="M9 18c-4.51 2-5-2-7-2"></path>
          </svg></a>
        <a href="#" class="vt-footer-link vt-text-foreground-muted"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="vt-w-4 vt-h-4">
            <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
          </svg></a>
        <a href="#" class="vt-footer-link vt-text-foreground-muted"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="vt-w-4 vt-h-4">
            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
            <rect width="4" height="12" x="2" y="9"></rect>
            <circle cx="4" cy="4" r="2"></circle>
          </svg></a>
      </div>
    </div>
  </div>
</footer>

Simple Centered

Minimal centered footer with copyright.

html

<footer class="vt-border-t vt-border-border-default vt-bg-surface-card vt-py-8 vt-text-center">
  <p class="vt-text-sm vt-text-foreground-secondary vt-mb-3">Brand</p>
  <nav class="vt-flex vt-items-center vt-justify-center vt-gap-6 vt-mb-4">
    <a href="#" class="vt-footer-link">About</a>
    <a href="#" class="vt-footer-link">Features</a>
    <a href="#" class="vt-footer-link">Pricing</a>
    <a href="#" class="vt-footer-link">Contact</a>
  </nav>
  <p class="vt-text-xs vt-text-foreground-muted">© 2026 Brand. All rights reserved.</p>
</footer>

Footer with email subscribe form and social links.

html

<footer class="vt-border-t vt-border-border-default vt-bg-surface-card">
  <div class="vt-max-w-5xl vt-mx-auto vt-px-6 vt-py-10">
    <div class="vt-flex vt-flex-col vt-sm:flex-row vt-items-start vt-justify-between vt-gap-8">
      <div class="vt-max-w-xs">
        <h4 class="vt-text-base vt-font-bold vt-mb-2">Stay in the loop</h4>
        <p class="vt-text-sm vt-text-foreground-muted vt-mb-4" id="footer-3-1">Get updates about new components and features.</p>
        <div class="vt-flex vt-gap-2">
          <input type="email" placeholder="you@example.com" class="vt-input vt-h-10 vt-flex-1" aria-label="you@example.com" aria-describedby="footer-3-1">
          <button class="vt-btn vt-btn-primary vt-h-10 vt-px-4 vt-text-sm">Subscribe</button>
        </div>
      </div>
      <div class="vt-flex vt-gap-12">
        <div>
          <h4 class="vt-text-sm vt-font-semibold vt-mb-3">Links</h4>
          <ul class="vt-space-y-2">
            <li><a href="#" class="vt-footer-link">Docs</a></li>
            <li><a href="#" class="vt-footer-link">Blog</a></li>
            <li><a href="#" class="vt-footer-link">Support</a></li>
          </ul>
        </div>
        <div>
          <h4 class="vt-text-sm vt-font-semibold vt-mb-3">Legal</h4>
          <ul class="vt-space-y-2">
            <li><a href="#" class="vt-footer-link">Privacy</a></li>
            <li><a href="#" class="vt-footer-link">Terms</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="vt-mt-8 vt-pt-6 vt-border-t vt-border-border-default vt-flex vt-items-center vt-justify-between">
      <p class="vt-text-xs vt-text-foreground-muted">© 2026 Brand. All rights reserved.</p>
      <div class="vt-flex vt-items-center vt-gap-3">
        <a href="#" class="vt-footer-link vt-text-foreground-muted"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="vt-w-4 vt-h-4">
            <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 4 5 4 5 4c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 11c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
            <path d="M9 18c-4.51 2-5-2-7-2"></path>
          </svg></a>
        <a href="#" class="vt-footer-link vt-text-foreground-muted"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="vt-w-4 vt-h-4">
            <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
          </svg></a>
      </div>
    </div>
  </div>
</footer>

Compact Bar

Single-line footer bar with minimal content.

html

<footer class="vt-border-t vt-border-border-default vt-bg-surface-card vt-h-14 vt-flex vt-items-center vt-px-6">
  <div class="vt-flex vt-items-center vt-justify-between vt-w-full">
    <p class="vt-text-xs vt-text-foreground-muted">© 2026 Brand</p>
    <nav class="vt-flex vt-items-center vt-gap-4">
      <a href="#" class="vt-text-xs vt-footer-link vt-text-foreground-muted">Terms</a>
      <a href="#" class="vt-text-xs vt-footer-link vt-text-foreground-muted">Privacy</a>
      <a href="#" class="vt-text-xs vt-footer-link vt-text-foreground-muted">Cookies</a>
    </nav>
    <div class="vt-flex vt-items-center vt-gap-1 vt-text-xs vt-text-foreground-muted">
      Made with <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-heart vt-w-3 vt-h-3 vt-text-error-fill vt-mx-0.5">
        <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path>
      </svg>
    </div>
  </div>
</footer>

Guidelines

Anchor the page with grouped navigation, legal links, and branding — keep it scannable.

Product

Company

Group footer links under clear section headings.

Don't

Don't pile every link into one flat, unlabeled row.

Use a simple centered footer when there are only a few links.

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-surface-card`	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-foreground-secondary`	Color	Secondary text color for footer links
`vt-hover:text-foreground-primary`	Interactive	Primary text on hover for links
`vt-text-foreground-muted`	Color	Muted text for copyright and social icons
`vt-text-error-fill`	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

Footer

Multi-column

Simple Centered

With Newsletter

Compact Bar

Guidelines

Product

Company

API Reference

Accessibility