Footer | CAAT Design System — Component Contract

Live Demo

1. Summary

Component name	Footer
AEM resource type	`caat/components/footer`
Tier	Composite (organism) — composes Social/Share Links + Button
Purpose	The standard site footer: secondary navigation, newsletter signup, language toggle, social links, legal, and back-to-top. Appears on every page.
Regions	Newsletter + back-to-top · 4 link columns · brand / legal / language / social · copyright
Status	New
Replaces	`.caat-full-footer-demo` (was buried in Navigation, copy-pasted into the template — caused drift)

Composed of

A composite — it composes existing components rather than re-implementing them (see docs/design-system-recommendations.md §F).

Constituent	Role	Status
Social / Share Links → Icon Button	LinkedIn / YouTube links	✓ composed
Button	Newsletter “Subscribe”	✓ composed
Form field	Newsletter email (Bootstrap `.form-control` + AODA border)	✓

2. Design Tokens

Token	Role
`--caat-beige`	Footer background (warm light surface)
`--caat-color-text` / `--caat-color-text-heading` / `--caat-color-text-muted`	Links / headings / copyright
`--caat-color-border`	Section dividers (top band, bottom row)
`--caat-space-1 … --caat-space-8`	All spacing (scale-based, no ad-hoc rem)
`--caat-font-size-2xs`, `--caat-letter-spacing-label`	Column headings

3. Authoring Fields

Field	Type	Required	Notes
Columns	Multifield	Yes	Per column: heading + link list (each becomes a labelled `<nav>`)
Newsletter	Group	No	Title, blurb, form action; toggle on/off
Legal links	Multifield	Yes	Site map, Privacy, Terms, Accessibility
Languages	Multifield	No	EN / FR with hreflang
Social	Reference	No	Social/Share Links instance
Copyright	Text	Yes	Year auto-injected

4. Validation Rules

Rule	Condition	Error message
Column heading required	A column has links but no heading	"Each footer column needs a heading (it labels the navigation region)."
Newsletter email	Submitted value not an email	"Enter a valid email address."
Single contentinfo	More than one footer landmark per page	"Only one footer (contentinfo) is allowed per page."

5. Content Guidance

Group links by audience/task (Quick links, Pension solutions, Your pension, Contact). 4–6 links per column.
Keep the newsletter blurb to one line; set expectations on frequency.
Legal links are mandatory for AODA/privacy: Accessibility, Privacy, Terms, Site map.
Provide the EN/FR toggle on every page; mark the current language aria-current.

6. Semantic HTML

<footer class="caat-footer" role="contentinfo">
  <div class="container">
    <div class="caat-footer__top">…newsletter… <a class="caat-footer__backtotop" href="#main">Back to top</a></div>

    <div class="caat-footer__grid">
      <nav class="caat-footer__col" aria-labelledby="ft-quick">
        <h2 class="caat-footer__heading" id="ft-quick">Quick links</h2>
        <ul class="caat-footer__list">…</ul>
      </nav>
      …
    </div>

    <div class="caat-footer__bottom">…logo · legal nav · lang + social…</div>
    <p class="caat-footer__copyright">…</p>
  </div>
</footer>

7. CSS Contract

Selector	Purpose
`.caat-footer`	Full-bleed container (beige surface) with an inner `.container`
`.caat-footer__top` / `__newsletter` / `__backtotop`	Top band
`.caat-footer__grid` / `__col` / `__heading` / `__list`	Link-navigation columns
`.caat-footer__bottom` / `__logo` / `__legal` / `__meta` / `__lang` / `__social`	Bottom row
`.caat-footer__copyright`	Copyright line

8. Accessibility

Requirement	Implementation
Landmark	One `<footer role="contentinfo">` per page.
Navigation regions	Each link column is a `<nav aria-labelledby>` named by its `<h2>` — real heading structure, not `<p>`.
Language toggle	Current language carries `aria-current="true"`; the other has `hreflang`.
External links	Social links: `rel="noopener"` + “(opens in a new tab)”.
Newsletter	Email input has a label (visually hidden); the field meets the 3:1 border (AODA).
Back to top	A real link to `#main` (the skip-link target) — keyboard reachable.

9. SEO

Footer links aid crawl/discovery — keep them real, descriptive anchors.
Language links use hreflang; social profile links may use rel="me".

10. Analytics

Analytics are captured through the shared data-analytics-component attribute on the component root (emitted automatically) and reported to the central data layer. Event names and payloads follow the organisation's standard analytics schema — defined centrally with the analytics team, not invented per component — so no bespoke tracking is specified here.

11. AEM Implementation Notes

Resource type: caat/components/footer — a single shared footer included by the page template (not copy-pasted).
Columns, legal, languages and newsletter are authorable; social delegates to the Social/Share Links component.
Copyright year injected server-side.

12. Dialog Model (cq:dialog)

Simplified model — shows field intent and Granite UI resource types, not the literal cq:dialog node tree (e.g. select options are authored as child items nodes).

{
  "columns":    { "sling:resourceType": "…/form/multifield", "field": { "heading": "…", "links": "…" } },
  "newsletter": { "title": "…", "text": "…", "action": "…", "enabled": "true" },
  "legal":      { "sling:resourceType": "…/form/multifield" },
  "languages":  { "sling:resourceType": "…/form/multifield", "field": { "label": "…", "href": "…", "hreflang": "…" } },
  "copyright":  { "sling:resourceType": "…/form/textfield" }
}

13. QA Checklist

#	Check	Pass?
1	One `role="contentinfo"` footer; columns are labelled `<nav>` with `<h2>` headings
2	Social links render via Icon Button (circle, brand) — not bare glyphs
3	Newsletter field labelled; submit is a Button; field border ≥ 3:1
4	EN/FR toggle marks current with aria-current
5	Back-to-top moves focus to main content
6	Responsive: 4 → 2 → 1 columns; no decorative “squares” on headings

14. Definition of Done

Standalone component; Navigation + template both consume it (no copy-paste drift).
Composes Social/Share Links + Button; no re-implemented controls.
Real heading + landmark structure; AODA verified.
Spacing token-driven; the decorative lime squares removed.
QA checklist signed off.