Passer au contenu principal

FooterStub

Implemented

Ticket-stub footer (HV2 / R7, ADR-060): dark brand surface with a plain top edge, link columns, one optional 88x117 stamp and the newsletter slot (D11 / O6, no form). The tear-off edge device was retired on 2026-10-27 (ADR-067 §3) — the top edge is a straight line and the surface is solid. The slot renders the inert disabled field by default; with a ctaLabel it renders a trigger button that dispatches the 'ep:newsletter-open' DOM event (ADR-069 / D17). Link rule: href renders an anchor, disabled renders inert aria-disabled text, omitted renders nothing — the footer never ships a dead link. In 2026 (ADR-077) the footer gains additive persona slots — a personaBand chip nav, social SocialIconButtons, app-store pills and the legal bottom bar — each opt-in and byte-identical to the legacy layout when omitted.

Categoryorganisms
Sourcecomponents/organisms/FooterStub/FooterStub.tsx

Catalog fallback

Live MDX preview not available for FooterStub. Showing component catalog metadata instead.

Props

Preview

FooterStub

Prop
Type
Required
Default
Description
columns
FooterStubColumn[]
Required
—

Link blocks — { title, links: FooterStubLink[] }. Each block is a labelled nav with a ul.

signoff
{ brand: string; legal?: string; year: number }
Required
—

Brand line, optional legal line and the copyright year.

personaBand
{ heading: string; links: FooterStubLink[] }
Optional
—

Persona chip band (ADR-077 Decision #3) rendered above the columns: labelled nav of rounded chip links. FooterLink semantics — disabled rows stay inert, external rows open a new tab.

social
FooterStubSocialLink[]
Optional
—

Social profiles in the right rail, above the newsletter block — one SocialIconButton (44px tap floor, required accessible label) per { href, label, icon }.

socialHeading
string
Optional
—

Accessible label of the social list (aria-label on the ul).

appLinks
{ heading?: string; links: FooterStubAppLink[] }
Optional
—

App-store pills under the newsletter block (ADR-077 Decision #6 — token-styled text pills; official badge SVGs are a Phase-2 swap behind the same slot). Absolute http(s) hrefs open a new tab.

legalLinks
FooterStubLink[]
Optional
—

Bottom legal bar (ADR-077 Decision #2): border-top bar after the grid with the signoff.legal line, a © line and the legal links — the only surface where legal links may live. Omit to keep the legacy layout untouched.

tagline
signoff.tagline — string
Optional
—

Optional tagline under the brand wordmark (text-ep-sm muted), before the legal paragraph. Absent → nothing renders.

stamp
{ src: string; alt: string } | null
Optional
—

Optional 3:4 stamp (88x117), e.g. the active hero cover.

newsletter
FooterStubNewsletter
Optional
—

Newsletter slot (label, placeholder, submitLabel + optional ctaLabel / disabled). Without ctaLabel (or with disabled) it renders the inert disabled field with no form; with ctaLabel it renders a trigger button that dispatches the 'ep:newsletter-open' DOM event.

className
string
Optional
—

Additional CSS classes on the footer.

Quick use:<FooterStub />

Accessibility

ARIA rolecontentinfo

ARIA

1 rule

WCAG 1.3.1 / 4.1.2

contentinfo landmark; columns are labelled navs; disabled destinations are aria-disabled text with no href

behavior

2 rules

D11 / O6

Newsletter renders no <form> (nothing can be submitted)

ADR-069 / D17

Newsletter slot with ctaLabel (and no disabled) renders a trigger button that dispatches the 'ep:newsletter-open' DOM event — no callback props cross the server/client boundary

Design System v4.1.0 | ePassLive