Footer

Implemented

Public site footer — multi-column: Brand + tagline, navigation columns (FooterColumn molecules), social icon buttons, optional newsletter column, legal strip. Responsive CSS grid (grid-cols-1 → sm:grid-cols-2 → lg:custom with --footer-cols custom property).

Categoryorganisms

Sourcecomponents/organisms/Footer/Footer.tsx

AI HintUse for the public site footer — compose FooterColumn molecules for navigation, SocialIconButton atoms for social links. The newsletter column is optional. Legal strip anchors carry the 44px tap floor (min-h-[var(--ep-tap-min)]).

D-HOME-P5n 2026-08-11: padding updated from px-4 to px-6 sm:px-8 lg:px-10 to match homepage spacing and prevent content from touching screen edges on mobile.

Footer

Storefront organism (Family 7 — Tier 1)

Public storefront footer with brand, navigation columns, social icons, newsletter, and legal strip. Uses CSS Grid with --footer-cols custom property for responsive column balance (DS-CORR-09-27).

Usage

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

<Footer
  brand={{ name: 'ePassLive', tagline: 'Tickets that work as hard as your event.' }}
  columns={[
    { title: 'Browse', links: [{ label: 'Events', href: '/events' }] },
    { title: 'Help', links: [{ label: 'FAQ', href: '/faq' }] },
  ]}
  social={[
    { platform: 'instagram', href: 'https://instagram.com/epasslive', ariaLabel: 'ePassLive on Instagram' },
  ]}
  legalLinks={[{ label: 'Privacy', href: '/privacy' }]}
  copyright="© 2026 ePassLive"
  newsletter={{ onSubmit: (email) => console.log(email), placeholder: '[email protected]', ctaLabel: 'Subscribe' }}
/>

D-HOME-P5n changelog (2026-08-11)

Padding: px-4 → px-6 sm:px-8 lg:px-10 (mobile 24px, tablet 32px, desktop 40px)
Matches homepage spacing for consistency
Prevents content from touching screen edges on mobile

Accessibility

Semantic <footer role="contentinfo"> with aria-label. Navigation columns are <nav> with aria-label per column. Social icons are SocialIconButton atoms with explicit aria-label. Newsletter input is named solely by its localized sr-only <label htmlFor> (whose text is the placeholder prop — no overriding aria-label on the input) and meets the 44px tap floor via min-h-[var(--ep-tap-min)] (WCAG 2.5.5). The column heading is localizable via newsletter.title (EN fallback "Newsletter").

Props

Prop

Type

Default

Description

brand*

{ name: string; tagline: string }

—

Brand name and tagline displayed in the left column.

columns*

FooterColumnData[]

—

Navigation columns. Each has a title and links array.

social*

FooterSocial[]

—

Social media links (twitter, instagram, facebook, tiktok, youtube).

legalLinks*

FooterLink[]

—

Legal links (privacy, terms, etc.) shown in the bottom strip.

copyright*

string

—

newsletter

FooterNewsletter

—

Optional newsletter signup form — inline column. Shape: { onSubmit?: (email: string) => void; title?: string; placeholder: string; ctaLabel: string; ariaLabel?: string }. onSubmit is optional and sync — the storefront omits it (visual-only there today); title localizes the column heading (default "Newsletter"). Extraction target: the planned Newsletter molecule (see its docs page).

ariaLabel

string

Site footer

Accessible label for the <footer> element.

className

string

—

Additional CSS classes.

id

string

—

Custom id for the <footer>.

Props

Prop

Type

Required

Default

Description

brand

Brand

Required

—

No description.

columns

FooterColumn[]

Required

—

2-5 columns

legalLinks

FooterLink[]

Required

—

No description.

copyright

string

Required

—

No description.

social

FooterSocial[]

Required

—

Synced from source — no interface JSDoc yet; document on `Footer.tsx`.

newsletter

FooterNewsletter

Optional

—

Synced from source — no interface JSDoc yet; document on `Footer.tsx`.

ariaLabel

string

Optional

'Site footer'

Synced from source — no interface JSDoc yet; document on `Footer.tsx`.

className

string

Optional

—

Additional CSS classes appended to the <footer> element.

id

string

Optional

auto-generated

Custom id for the <footer> element. Defaults to `footer-<useId()>`.

Quick use:<Footer />

Accessibility

ARIA rolecontentinfo

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<Footer brand={{ name: "ePassLive", tagline: "Tickets that work" }} columns={[{ title: "Browse", links: [{ label: "Events", href: "/events" }] }]} social={[{ platform: "instagram", href: "https://instagram.com/epasslive", ariaLabel: "ePassLive on Instagram" }]} legalLinks={[{ label: "Privacy", href: "/privacy" }]} copyright="© 2026 ePassLive" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources