Footer

🧭 When to Use a Footer

Use a Footer when:

• You want to provide secondary navigation, legal info, or brand context

• You’re adding support links, newsletter signups, or CTAs

• You need to maintain consistency across marketing, dashboard, or documentation pages

Avoid large footers on minimal screens (e.g., login) — use a Terms Bar or compact layout instead.

🧩 Footer Structure

The Footer is composed of modular subcomponents that can be rearranged or styled to fit your needs:

📦 Footer Columns

Footer Columns contain:

• Footer Header – A title or section label (e.g., "Product", "Company")

• Footer Links – A vertical stack of related links beneath the header

These are combined into Footer Columns — multiple columns stack side-by-side in desktop views, and collapse to vertical stacks on mobile.

📄 Terms Bar

The Terms Bar is a compact strip that appears beneath or beside the footer content, containing:

• Legal links (e.g., Terms, Privacy)

• Language selector

• Copyright

• Region or locale switchers

Terms Bars use small text and low visual hierarchy, and should always be accessible on mobile.

🧩 Footer Items

Footer Items are the combined unit of:

• One or more Footer Columns

• One Terms Bar

This grouping creates a structured layout that can be styled or combined with other layers like newsletter forms or logos.

🖼 Footer Assets

Assets such as:

• Logos

• Social media icons

• Payment badges

• App store links

…are placed alongside Footer Items to create complete branded footers.

🧱 Footer (Composite Component)

The full Footer is made of:

• Footer Items (Columns + Terms)

• Footer Assets

• Optional call-to-action section or newsletter sign-up

Everything is arranged using layout tokens and responsive logic for mobile-friendly collapsing.

🎨 Footer Types

Different layouts are available depending on purpose:

• Newsletter – Includes email capture, brief headline, and standard links beneath

• Plain – Just Footer Items and Terms Bar (no CTA or input field)

• CTA Horizontal – Adds a call-to-action row above the footer, side-by-side with a button or link

• CTA Stack – Stacked call-to-action with title, description, and button, followed by the standard footer

These variants can be toggled in Figma and adapted depending on screen width or brand needs.

♿ Accessibility Considerations

From a design perspective:

• Keep all text legible (minimum font size + contrast)

• Don’t rely on icon-only links — use labels or tooltips where needed

• Collapse content on mobile to avoid clutter

From a code perspective (if implemented):

• Use semantic <footer> element

• Group related links in <nav role="navigation">

• Use aria-label for each group or section heading

• Ensure focus order flows top-down, left to right

✅ Best Practices

• Limit columns to 3–5 max for readability

• Use a CTA or newsletter variant only when action is truly valuable

• Keep links scannable — avoid long link text

• Collapse multiple footer rows on mobile for a clean, vertical stack

• Use divider lines or background color to clearly separate the footer from page content

•