Footer

Footer — the site’s dark card at the bottom of every page: surface/inverse at radius/16, padding space/64, three columns at space/40 — Menu (ten links), Terms over Subscription (three links; the heading, three social marks, the email field with its Subscribe button), and the certification badges filling the rest, centred.

Beta · Shells and patterns · packages/css/src/components/footer.css

.pui-footer · __column (--stack) · __heading __link __links __badges; the marks are .pui-socials --on-dark and the email field .pui-input-group --on-dark (requests 33, 40 — __socials __pill __subscribe are deprecated). Web only.

Footer — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

• Menu heading, Menu links 1–10, Terms heading, Subscription heading; Has subscription, Has badges; the email field’s placeholder and label are the Input group instance’s own
• Size: desktop 1296; the tablet (770 × 399) and mobile (370 × 754) forms come with the mobile nav
• Web only; a product has no footer (the Sidebar’s user card carries what a product needs)

Use when the bottom of every site page — 128 above it, 24 below, the blob behind its right edge on the pages that have one.

Do not use when in a product; in a deck; as a section (Card).

Relates to Navigation menu, Logo grid, Input group (the email field), Socials (the marks), Form result (what the field shows once sent), Button, Separator.

Anti-patterns a pill-shaped email field · an email field drawn for the footer instead of the Input group · a second set of social marks · a light footer · links in Medium · a fourth column · a footer without its badges on the pages that carry them · casing from the markup (‘About Us’, ‘MOBUPPSX’) — sentence case and the product’s own (Writing rules) · a fill changed on the instance.

Keywords: footer, site footer, subscription, badges, terms

Figma — page Footer: Footer (1 variants)

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens footer.css.

<footer class="pui-footer">
  <div class="pui-footer__column"><p class="pui-footer__heading">Menu</p><a class="pui-footer__link" href="…">Case studies</a> …</div>
  <div class="pui-footer__column pui-footer__column--stack"> …Terms… <div><p class="pui-footer__heading">Subscription</p>
    <div class="pui-socials pui-socials--on-dark"> …three marks… </div>
    <div class="pui-field"><label class="pui-input-group pui-input-group--on-dark"><input class="pui-input-group__control" type="email"
      placeholder="Enter your email"><button class="pui-button pui-button--small pui-input-group__button">Subscribe</button></label></div></div></div>
  <div class="pui-footer__badges"> …img… </div></footer>

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
#858080 on #231b1b	4.33	3	text.subtle on surface.inverse (not-offered)	axe
#b5b3b3 on #231b1b	8.08	3	text.disabled on surface.inverse (not-offered)	ok
#ffffff on #352d2d	13.42	4.5	Nav item on hover (promised)	ok
#0b0202 on #ffffff	20.51	4.5	text.default on surface.page (promised)	ok

4 distinct pair(s) rendered, 1 that axe calls a violation — each one carries its reason in storybook/test/axe-allowlist.json.

The focus ring

primitive	on	the indicator	over	the change
Footer link	surface/inverse	shadow #6a66e4 2 px	#231b1b	3.72	ok
Footer email field	surface/inverse	shadow #6a66e4 2 px	#231b1b	3.72	ok
Footer subscribe button	surface/inverse	shadow-inset #6a66e4 2 px	#ffffff	4.53	ok

16 of 16 focus stop(s) in this block meet WCAG 2.4.13 on screen — the same crop screenshotted focused and unfocused, and the difference measured.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).