LandingFooter [pattern] v1.0.0

4–6 column responsive footer grid using grid-template-columns: 2fr repeat(4, 1fr) on xl — brand col gets double width — with link group styling, social icons row (flex gap-4 mt-4, aria-label required), newsletter form, and bottom bar (border-t, flex-col sm:flex-row copyright + legal links).

Label

Landing Page Footer Pattern

Problem

AI footers use a single-row list of links or a 2-column layout that wastes space and lacks brand presence. Real landing footers establish company credibility through structured multi-column link groups with social proof.

Solution

Use a multi-column grid with brand/logo col getting 2fr width on xl. Include social icon row with aria-labels, optional newsletter form, and a bottom bar with copyright + legal links separated by border-t.

Structure

    <!--
    [brand/logo col]  [Product]  [Company]  [Resources]  [Legal]
    [social icons row]                       [newsletter subscribe form]
    ————————————————————————————————————————————————————————————
    [© 2026 CompanyName. All rights reserved.]    [privacy · terms · cookies]
    -->
    <footer class="bg-background border-t pt-16 md:pt-24 pb-8">
      <div class="max-w-6xl mx-auto px-4 sm:px-6">

        <!-- Main grid -->
        <div class="footer-grid">

          <!-- Brand column (2fr on xl) -->
          <div>
            <a href="/" class="font-bold text-lg">Brand</a>
            <p class="text-sm text-muted-foreground mt-3 max-w-xs">
              Short brand description or tagline.
            </p>
            <!-- Social icons row: flex gap-4 mt-4 -->
            <div class="flex gap-4 mt-4">
              <!-- Use simple-icons or inline SVG, 20–24px, currentColor -->
              <!-- MUST: aria-label="Follow us on X" on each link -->
              <!-- NEVER: text labels on social icons -->
              <a href="https://twitter.com/..." aria-label="Follow us on X" class="text-muted-foreground hover:text-foreground transition-colors">
                <svg class="w-5 h-5" ...></svg>
              </a>
              <a href="https://github.com/..." aria-label="Follow us on GitHub" class="text-muted-foreground hover:text-foreground transition-colors">
                <svg class="w-5 h-5" ...></svg>
              </a>
              <a href="https://linkedin.com/..." aria-label="Follow us on LinkedIn" class="text-muted-foreground hover:text-foreground transition-colors">
                <svg class="w-5 h-5" ...></svg>
              </a>
            </div>
          </div>

          <!-- Link group columns -->
          <div>
            <!-- footer-heading: text-sm font-semibold mb-4 -->
            <h3 class="footer-heading">Product</h3>
            <ul class="space-y-2">
              <!-- footer-link: text-sm text-muted-foreground opacity-70, hover opacity-100 -->
              <li><a href="/features" class="footer-link">Features</a></li>
              <li><a href="/pricing" class="footer-link">Pricing</a></li>
              <li><a href="/changelog" class="footer-link">Changelog</a></li>
            </ul>
          </div>

          <div>
            <h3 class="footer-heading">Company</h3>
            <ul class="space-y-2">
              <li><a href="/about" class="footer-link">About</a></li>
              <li><a href="/blog" class="footer-link">Blog</a></li>
              <li><a href="/careers" class="footer-link">Careers</a></li>
            </ul>
          </div>

          <div>
            <h3 class="footer-heading">Resources</h3>
            <ul class="space-y-2">
              <li><a href="/docs" class="footer-link">Documentation</a></li>
              <li><a href="/support" class="footer-link">Support</a></li>
              <li><a href="/status" class="footer-link">Status</a></li>
            </ul>
          </div>

          <!-- Newsletter form — spans remaining column, bottom-right of grid -->
          <div>
            <h3 class="footer-heading">Stay updated</h3>
            <form class="flex gap-2 mt-4">
              <Input
                type="email"
                placeholder="Enter your email"
                class="max-w-xs"
                aria-label="Email for newsletter"
              />
              <Button type="submit" variant="default">Subscribe</Button>
            </form>
            <!-- After submit: show inline success message, clear input -->
          </div>

        </div>

        <!-- Bottom bar: border-t mt-8 pt-6 -->
        <!-- flex-col sm:flex-row for mobile stacking -->
        <div class="border-t mt-8 pt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p class="text-xs text-muted-foreground">
            © 2026 CompanyName. All rights reserved.
          </p>
          <!-- Legal links: text-xs text-muted-foreground, gap-4 separator -->
          <div class="flex gap-4">
            <a href="/privacy" class="text-xs text-muted-foreground hover:text-foreground">Privacy</a>
            <a href="/terms" class="text-xs text-muted-foreground hover:text-foreground">Terms</a>
            <a href="/cookies" class="text-xs text-muted-foreground hover:text-foreground">Cookies</a>
          </div>
        </div>

      </div>
    </footer>
  

Css

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }
    @media (min-width: 768px) {
      .footer-grid { grid-template-columns: repeat(4, 1fr); }
    }
    @media (min-width: 1280px) {
      .footer-grid { grid-template-columns: 2fr repeat(4, 1fr); }
      /* brand col gets double width on xl */
    }

    .footer-heading {
      font-size: 0.875rem;   /* text-sm */
      font-weight: 600;
      margin-bottom: 1rem;
      color: var(--foreground);
    }

    .footer-link {
      font-size: 0.875rem;
      color: var(--muted-foreground);
      opacity: 0.7;
      transition: opacity 150ms;
      display: block;
      margin-bottom: 0.5rem;
    }
    .footer-link:hover { opacity: 1; }
  

Behavior

• MUST: aria-label='Follow us on X' on each social icon link — icon shape alone is not accessible.
• NEVER: text labels on social icons — the icon at 20–24px is sufficient at this size.
• Brand col gets 2fr width on xl (1280px+) — gives logo/description room to breathe.
• Newsletter form: after submit, show inline success message in same location, clear input value.
• Bottom bar: use flex-col sm:flex-row so copyright and legal stack on mobile.
• Footer top padding: pt-16 md:pt-24 — matches section spacing rhythm.
• Social icon color: text-muted-foreground with hover:text-foreground — not accent color.

LandingFooter [pattern] v1.0.0

4–6 column responsive footer grid using grid-template-columns: 2fr repeat(4, 1fr) on xl — brand col gets double width — with link group styling, social icons row (flex gap-4 mt-4, aria-label required), newsletter form, and bottom bar (border-t, flex-col sm:flex-row copyright + legal links).

Label

Landing Page Footer Pattern

Problem

AI footers use a single-row list of links or a 2-column layout that wastes space and lacks brand presence. Real landing footers establish company credibility through structured multi-column link groups with social proof.

Solution

Use a multi-column grid with brand/logo col getting 2fr width on xl. Include social icon row with aria-labels, optional newsletter form, and a bottom bar with copyright + legal links separated by border-t.

Structure

    <!--
    [brand/logo col]  [Product]  [Company]  [Resources]  [Legal]
    [social icons row]                       [newsletter subscribe form]
    ————————————————————————————————————————————————————————————
    [© 2026 CompanyName. All rights reserved.]    [privacy · terms · cookies]
    -->
    <footer class="bg-background border-t pt-16 md:pt-24 pb-8">
      <div class="max-w-6xl mx-auto px-4 sm:px-6">

        <!-- Main grid -->
        <div class="footer-grid">

          <!-- Brand column (2fr on xl) -->
          <div>
            <a href="/" class="font-bold text-lg">Brand</a>
            <p class="text-sm text-muted-foreground mt-3 max-w-xs">
              Short brand description or tagline.
            </p>
            <!-- Social icons row: flex gap-4 mt-4 -->
            <div class="flex gap-4 mt-4">
              <!-- Use simple-icons or inline SVG, 20–24px, currentColor -->
              <!-- MUST: aria-label="Follow us on X" on each link -->
              <!-- NEVER: text labels on social icons -->
              <a href="https://twitter.com/..." aria-label="Follow us on X" class="text-muted-foreground hover:text-foreground transition-colors">
                <svg class="w-5 h-5" ...></svg>
              </a>
              <a href="https://github.com/..." aria-label="Follow us on GitHub" class="text-muted-foreground hover:text-foreground transition-colors">
                <svg class="w-5 h-5" ...></svg>
              </a>
              <a href="https://linkedin.com/..." aria-label="Follow us on LinkedIn" class="text-muted-foreground hover:text-foreground transition-colors">
                <svg class="w-5 h-5" ...></svg>
              </a>
            </div>
          </div>

          <!-- Link group columns -->
          <div>
            <!-- footer-heading: text-sm font-semibold mb-4 -->
            <h3 class="footer-heading">Product</h3>
            <ul class="space-y-2">
              <!-- footer-link: text-sm text-muted-foreground opacity-70, hover opacity-100 -->
              <li><a href="/features" class="footer-link">Features</a></li>
              <li><a href="/pricing" class="footer-link">Pricing</a></li>
              <li><a href="/changelog" class="footer-link">Changelog</a></li>
            </ul>
          </div>

          <div>
            <h3 class="footer-heading">Company</h3>
            <ul class="space-y-2">
              <li><a href="/about" class="footer-link">About</a></li>
              <li><a href="/blog" class="footer-link">Blog</a></li>
              <li><a href="/careers" class="footer-link">Careers</a></li>
            </ul>
          </div>

          <div>
            <h3 class="footer-heading">Resources</h3>
            <ul class="space-y-2">
              <li><a href="/docs" class="footer-link">Documentation</a></li>
              <li><a href="/support" class="footer-link">Support</a></li>
              <li><a href="/status" class="footer-link">Status</a></li>
            </ul>
          </div>

          <!-- Newsletter form — spans remaining column, bottom-right of grid -->
          <div>
            <h3 class="footer-heading">Stay updated</h3>
            <form class="flex gap-2 mt-4">
              <Input
                type="email"
                placeholder="Enter your email"
                class="max-w-xs"
                aria-label="Email for newsletter"
              />
              <Button type="submit" variant="default">Subscribe</Button>
            </form>
            <!-- After submit: show inline success message, clear input -->
          </div>

        </div>

        <!-- Bottom bar: border-t mt-8 pt-6 -->
        <!-- flex-col sm:flex-row for mobile stacking -->
        <div class="border-t mt-8 pt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p class="text-xs text-muted-foreground">
            © 2026 CompanyName. All rights reserved.
          </p>
          <!-- Legal links: text-xs text-muted-foreground, gap-4 separator -->
          <div class="flex gap-4">
            <a href="/privacy" class="text-xs text-muted-foreground hover:text-foreground">Privacy</a>
            <a href="/terms" class="text-xs text-muted-foreground hover:text-foreground">Terms</a>
            <a href="/cookies" class="text-xs text-muted-foreground hover:text-foreground">Cookies</a>
          </div>
        </div>

      </div>
    </footer>
  

Css

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }
    @media (min-width: 768px) {
      .footer-grid { grid-template-columns: repeat(4, 1fr); }
    }
    @media (min-width: 1280px) {
      .footer-grid { grid-template-columns: 2fr repeat(4, 1fr); }
      /* brand col gets double width on xl */
    }

    .footer-heading {
      font-size: 0.875rem;   /* text-sm */
      font-weight: 600;
      margin-bottom: 1rem;
      color: var(--foreground);
    }

    .footer-link {
      font-size: 0.875rem;
      color: var(--muted-foreground);
      opacity: 0.7;
      transition: opacity 150ms;
      display: block;
      margin-bottom: 0.5rem;
    }
    .footer-link:hover { opacity: 1; }
  

Behavior

• MUST: aria-label='Follow us on X' on each social icon link — icon shape alone is not accessible.
• NEVER: text labels on social icons — the icon at 20–24px is sufficient at this size.
• Brand col gets 2fr width on xl (1280px+) — gives logo/description room to breathe.
• Newsletter form: after submit, show inline success message in same location, clear input value.
• Bottom bar: use flex-col sm:flex-row so copyright and legal stack on mobile.
• Footer top padding: pt-16 md:pt-24 — matches section spacing rhythm.
• Social icon color: text-muted-foreground with hover:text-foreground — not accent color.

Sources

Label

Landing Page Footer Pattern

Problem

AI footers use a single-row list of links or a 2-column layout that wastes space and lacks brand presence. Real landing footers establish company credibility through structured multi-column link groups with social proof.

Solution

Use a multi-column grid with brand/logo col getting 2fr width on xl. Include social icon row with aria-labels, optional newsletter form, and a bottom bar with copyright + legal links separated by border-t.

Structure

    <!--
    [brand/logo col]  [Product]  [Company]  [Resources]  [Legal]
    [social icons row]                       [newsletter subscribe form]
    ————————————————————————————————————————————————————————————
    [© 2026 CompanyName. All rights reserved.]    [privacy · terms · cookies]
    -->
    <footer class="bg-background border-t pt-16 md:pt-24 pb-8">
      <div class="max-w-6xl mx-auto px-4 sm:px-6">

        <!-- Main grid -->
        <div class="footer-grid">

          <!-- Brand column (2fr on xl) -->
          <div>
            <a href="/" class="font-bold text-lg">Brand</a>
            <p class="text-sm text-muted-foreground mt-3 max-w-xs">
              Short brand description or tagline.
            </p>
            <!-- Social icons row: flex gap-4 mt-4 -->
            <div class="flex gap-4 mt-4">
              <!-- Use simple-icons or inline SVG, 20–24px, currentColor -->
              <!-- MUST: aria-label="Follow us on X" on each link -->
              <!-- NEVER: text labels on social icons -->
              <a href="https://twitter.com/..." aria-label="Follow us on X" class="text-muted-foreground hover:text-foreground transition-colors">
                <svg class="w-5 h-5" ...></svg>
              </a>
              <a href="https://github.com/..." aria-label="Follow us on GitHub" class="text-muted-foreground hover:text-foreground transition-colors">
                <svg class="w-5 h-5" ...></svg>
              </a>
              <a href="https://linkedin.com/..." aria-label="Follow us on LinkedIn" class="text-muted-foreground hover:text-foreground transition-colors">
                <svg class="w-5 h-5" ...></svg>
              </a>
            </div>
          </div>

          <!-- Link group columns -->
          <div>
            <!-- footer-heading: text-sm font-semibold mb-4 -->
            <h3 class="footer-heading">Product</h3>
            <ul class="space-y-2">
              <!-- footer-link: text-sm text-muted-foreground opacity-70, hover opacity-100 -->
              <li><a href="/features" class="footer-link">Features</a></li>
              <li><a href="/pricing" class="footer-link">Pricing</a></li>
              <li><a href="/changelog" class="footer-link">Changelog</a></li>
            </ul>
          </div>

          <div>
            <h3 class="footer-heading">Company</h3>
            <ul class="space-y-2">
              <li><a href="/about" class="footer-link">About</a></li>
              <li><a href="/blog" class="footer-link">Blog</a></li>
              <li><a href="/careers" class="footer-link">Careers</a></li>
            </ul>
          </div>

          <div>
            <h3 class="footer-heading">Resources</h3>
            <ul class="space-y-2">
              <li><a href="/docs" class="footer-link">Documentation</a></li>
              <li><a href="/support" class="footer-link">Support</a></li>
              <li><a href="/status" class="footer-link">Status</a></li>
            </ul>
          </div>

          <!-- Newsletter form — spans remaining column, bottom-right of grid -->
          <div>
            <h3 class="footer-heading">Stay updated</h3>
            <form class="flex gap-2 mt-4">
              <Input
                type="email"
                placeholder="Enter your email"
                class="max-w-xs"
                aria-label="Email for newsletter"
              />
              <Button type="submit" variant="default">Subscribe</Button>
            </form>
            <!-- After submit: show inline success message, clear input -->
          </div>

        </div>

        <!-- Bottom bar: border-t mt-8 pt-6 -->
        <!-- flex-col sm:flex-row for mobile stacking -->
        <div class="border-t mt-8 pt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p class="text-xs text-muted-foreground">
            © 2026 CompanyName. All rights reserved.
          </p>
          <!-- Legal links: text-xs text-muted-foreground, gap-4 separator -->
          <div class="flex gap-4">
            <a href="/privacy" class="text-xs text-muted-foreground hover:text-foreground">Privacy</a>
            <a href="/terms" class="text-xs text-muted-foreground hover:text-foreground">Terms</a>
            <a href="/cookies" class="text-xs text-muted-foreground hover:text-foreground">Cookies</a>
          </div>
        </div>

      </div>
    </footer>
  

Css

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }
    @media (min-width: 768px) {
      .footer-grid { grid-template-columns: repeat(4, 1fr); }
    }
    @media (min-width: 1280px) {
      .footer-grid { grid-template-columns: 2fr repeat(4, 1fr); }
      /* brand col gets double width on xl */
    }

    .footer-heading {
      font-size: 0.875rem;   /* text-sm */
      font-weight: 600;
      margin-bottom: 1rem;
      color: var(--foreground);
    }

    .footer-link {
      font-size: 0.875rem;
      color: var(--muted-foreground);
      opacity: 0.7;
      transition: opacity 150ms;
      display: block;
      margin-bottom: 0.5rem;
    }
    .footer-link:hover { opacity: 1; }
  

Behavior

• MUST: aria-label='Follow us on X' on each social icon link — icon shape alone is not accessible.
• NEVER: text labels on social icons — the icon at 20–24px is sufficient at this size.
• Brand col gets 2fr width on xl (1280px+) — gives logo/description room to breathe.
• Newsletter form: after submit, show inline success message in same location, clear input value.
• Bottom bar: use flex-col sm:flex-row so copyright and legal stack on mobile.
• Footer top padding: pt-16 md:pt-24 — matches section spacing rhythm.
• Social icon color: text-muted-foreground with hover:text-foreground — not accent color.