Footer

organisms

Public site footer — multi-column: Brand + tagline, Browse links, Help links, Social icons, Newsletter signup, Legal. Mobile: accordion columns.

ARIA Role: contentinfo

Demo

Demo for Footer (organisms)

Public site footer — multi-column: Brand + tagline, Browse links, Help links, Social icons, Newsletter signup, Legal. Mobile: accordion columns.

Props

Prop	Type	Required	Default	Description
`brand`	`Brand`	Yes	`—`
`columns`	`FooterColumn[]`	Yes	`—`	2-5 columns
`legalLinks`	`FooterLink[]`	Yes	`—`
`copyright`	`string`	Yes	`—`

TypeScript Interface

interface FooterProps {
  brand: { name: string; tagline: string };
  columns: { title: string; links: { label: string; href: string }[] }[];
  social: { platform: 'twitter' | 'instagram' | 'facebook' | 'tiktok' | 'youtube'; href: string }[];
  newsletter?: { onSubmit: (email: string) => Promise<void>; placeholder: string; ctaLabel: string };
  legalLinks: { label: string; href: string }[];
  copyright: string;
}

Assertions (NASA Rule 5)

[type]columns bounded 2-5 (NASA Rule 2)(NASA Rule 2 + 5)
[aria]<footer role='contentinfo'>; each column has <nav aria-label='{title}'>(WCAG 1.3.1)

Usage

Import

import { Footer } from '@epasslive/design-system'

Basic

<Footer />

With Variants

<Footer variant="primary" size="md" />