# Footer
The foot of a website in six looks: the brand, page links in columns or a row, and a legal strip; on a phone the columns fold into rows that open.
Block: `smbk-footer`. Status: candidate. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Desktop and mobile: differ by presentation only.
## Options
| Axis | Values | Default | Meaning |
|---|---|---|---|
| `look` | `columns`, `minimal`, `centred`, `floating`, `call-to-action`, `big-wordmark` | `columns` | Columns: the brand beside columns of page links, then the legal strip. Minimal: a divider over the legal strip alone, its copyright at the start, its legal links in the middle and its social links at the end. Centred: the brand, a row of page links and the legal strip, each centered. Floating: the columns look on a raised card. Call to action: a card asking for one action above the columns look. Big wordmark: the columns look with the name set as wide as the footer under it. On a phone the columns fold into rows that open. Figma calls this Style. |
| `divider` | `on`, `off` | `on` | The divider above the legal strip. Figma: Divider (on by default). |
| `legal` | `start`, `end` | `start` | Where the legal links sit in the legal strip in a wide space. Start: after the copyright and the tagline, as Figma's strip draws them. End: at the strip's end, before the extras when there are some, the copyright and the tagline staying at the start. On a phone the strip stacks the same either way. The centred and minimal looks place their legal links themselves, so it changes the other four. End is not in Figma. |
| `column-width` | `hug`, `equal` | `hug` | Hug: each column of links as wide as its longest link, and columns that run out of room wrap one at a time, as Figma draws them. Equal: every column as wide as the widest, the same gap between them, all in one row where they fit and otherwise in two rows as even as the count allows, four as two and two, sitting at the row's end. The folded columns on a phone are the same either way. Equal is not in Figma. |
| `background` | on / off | off | A band behind the footer: the default surface with a hairline along its top, so the footer stands apart from a page on the canvas color. Figma: Background (off by default). |
| `zone` | on / off | off | The footer's own room, as Figma draws it: its content held to the content width and centered, with Figma's space above, below and at the sides (a small margin around the floating card). Off by default, so a page that already places its footer keeps its own room. |
Parts: `smbk-footer__content`, `smbk-footer__main`, `smbk-footer__brand`, `smbk-footer__brand-link`, `smbk-footer__logo`, `smbk-footer__blurb`, `smbk-footer__social`, `smbk-footer__social-link`, `smbk-footer__newsletter`, `smbk-footer__newsletter-row`, `smbk-footer__brand-divider`, `smbk-footer__columns`, `smbk-footer__half`, `smbk-footer__column`, `smbk-footer__heading`, `smbk-footer__list`, `smbk-footer__link`, `smbk-footer__new-tab`, `smbk-footer__folds`, `smbk-footer__fold`, `smbk-footer__fold-heading`, `smbk-footer__caret`, `smbk-footer__fold-divider`, `smbk-footer__row`, `smbk-footer__cta`, `smbk-footer__cta-text`, `smbk-footer__cta-headline`, `smbk-footer__cta-line`, `smbk-footer__cta-actions`, `smbk-footer__divider`, `smbk-footer__legal`, `smbk-footer__legal-start`, `smbk-footer__notice`, `smbk-footer__copyright`, `smbk-footer__tagline`, `smbk-footer__center`, `smbk-footer__end`, `smbk-footer__legal-links`, `smbk-footer__legal-link`, `smbk-footer__extras`, `smbk-footer__fine-print`, `smbk-footer__wordmark`, `smbk-footer__wide-only`, `smbk-footer__narrow-only`
## Markup
```html
```
## React
```tsx
import { Footer } from './design-system/components/footer/footer.js';
import { Button } from './design-system/components/button/button.js';
See the work
Book a call }} blurb="Design systems and digital products, built to last." social={[{ icon: "XLogo", href: "#x", label: "Simbolik on X" }, { icon: "InstagramLogo", href: "#instagram", label: "Simbolik on Instagram" }, { icon: "FacebookLogo", href: "#facebook", label: "Simbolik on Facebook" }, { icon: "LinkedinLogo", href: "#linkedin", label: "Simbolik on LinkedIn" }, { icon: "YoutubeLogo", href: "#youtube", label: "Simbolik on YouTube" }]} copyright="© 2026 simbolik. All rights reserved." legalLinks={[{ label: "Privacy policy", href: "#privacy" }, { label: "Terms of use", href: "#terms" }, { label: "Status", href: "#status" }]} />
```
## Stylesheet
```css
/* smbk-footer — Footer. Figma "Footer" 7444:2151 (Style × Platform; Background, Divider), built from FooterBrand
* 7443:399, FooterLinks 7443:938, FooterLegal 7443:1133 and FooterCTA 7443:1210.
* The foot of a website: the brand with a line about the site and its social links, page links in columns (or,
* centred, in one row), then a legal strip. In a narrow space each column folds into a row that opens, the brand
* follows them and the legal strip stacks. The columns are drawn twice, folded for the narrow form before the brand
* and open for the wide form after it, and the brand once between them, so the order Tab follows is the order on
* screen in each form. Which form shows is the layout switch.
* Six looks: columns; minimal (a divider over one strip, its section further down); centred; floating (the content
* on a raised card); call to action (a card asking for one action above the rest); big wordmark (the name as wide as
* the footer, under the strip).
* Within either form the footer fits whatever width it is given, with no width written anywhere: each column is as
* wide as its longest link, and columns carry on onto a further row when the row runs out; link labels wrap rather
* than being cut short; the legal strip wraps. Two choices for a wide space: every column as wide as the widest, in
* one row or two even ones (the equal column width), and the legal links at the strip's end (legal end). */
.smbk-footer {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-2xl);
width: 100%;
padding: var(--smbk-space-inset-2xl) var(--smbk-space-section-md);
background: var(--smbk-color-surface-canvas);
color: var(--smbk-color-text-default);
}
/* The content: everything in the footer, one part under another. Markup written by hand without it keeps the same
gaps, which the block gives its own parts. */
.smbk-footer__content {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-2xl);
width: 100%;
min-width: 0;
}
/* ---- the switches ---- */
/* Background: a band of the default surface behind the footer with a hairline along its top. */
.smbk-footer--background {
border-top: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
background: var(--smbk-color-surface-default);
}
.smbk-footer--divider-off .smbk-footer__divider {
display: none;
}
/* The zone: Figma's room around the content, and the content held to the content width in the middle. The large
stack steps above and below and the extra-large inset at the sides. */
.smbk-footer.smbk-footer--zone {
padding: var(--smbk-space-stack-3xl) var(--smbk-space-inset-2xl) var(--smbk-space-stack-xl);
}
.smbk-footer--zone > .smbk-footer__content {
max-width: var(--smbk-size-layout-container-default);
margin-inline: auto;
}
/* ---- floating: the content on a raised card ----
* Figma's floating card holds the whole footer, the extra-large inset inside it. Without the zone the card is the
* footer's whole box; with it, the medium inset above and below and the extra-large one at the sides, and the card
* as wide as that leaves (Figma binds no width to it). */
.smbk-footer.smbk-footer--look-floating {
padding: 0;
}
.smbk-footer--look-floating > .smbk-footer__content {
padding: var(--smbk-space-inset-2xl);
border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-rim);
border-radius: var(--smbk-radius-container-lg);
background: var(--smbk-color-surface-default);
box-shadow: var(--smbk-elevation-raised);
}
.smbk-footer.smbk-footer--look-floating.smbk-footer--zone {
padding: var(--smbk-space-inset-md) var(--smbk-space-inset-2xl);
}
.smbk-footer--look-floating.smbk-footer--zone > .smbk-footer__content {
max-width: none;
}
/* ---- the brand and the columns ----
* The columns drop below the brand only when even one column cannot sit beside it. Beside it they sit at the row's
* end, as Figma draws them. */
.smbk-footer__main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: var(--smbk-space-stack-2xl) var(--smbk-space-inline-3xl);
}
/* Logo, a line about the site, the social links and an optional newsletter sign-up, the large stack step apart. */
.smbk-footer__brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--smbk-space-stack-lg);
flex-shrink: 0;
max-width: 100%;
}
.smbk-footer__brand-link {
display: inline-flex;
color: inherit;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.smbk-footer__brand-link:focus-visible {
outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
outline-offset: var(--smbk-focus-ring-offset);
border-radius: var(--smbk-radius-control-xs);
}
.smbk-footer__logo {
height: var(--smbk-size-icon-xl);
width: auto;
}
/* Figma's brand is 320 wide and its line wraps there; the brand here is as wide as what it holds, so the line and the
newsletter stop at that width instead. */
.smbk-footer__blurb {
max-width: var(--smbk-size-width-320);
margin: 0;
color: var(--smbk-color-text-subtle);
font-family: var(--smbk-typography-body-sm-font-family);
font-size: var(--smbk-typography-body-sm-font-size);
font-weight: var(--smbk-typography-body-sm-font-weight);
line-height: var(--smbk-typography-body-sm-line-height);
letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}
/* Small ghost icon buttons, the extra-small inline step apart. */
.smbk-footer__social {
display: flex;
flex-wrap: wrap;
gap: var(--smbk-space-inline-xs);
margin: 0;
padding: 0;
list-style: none;
}
/* Each item holds only its link, so the row is exactly as tall as a button; as a list item it would add a line of
text's height around it. */
.smbk-footer__social > li {
display: flex;
}
/* A social link written by hand as a plain anchor, not a button: an icon in the default text color. */
.smbk-footer__social-link:not(.smbk-btn) {
display: inline-flex;
color: var(--smbk-color-text-default);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
@media (hover: hover) {
.smbk-footer__social-link:not(.smbk-btn):hover {
color: var(--smbk-color-text-brand);
}
}
.smbk-footer__social-link:not(.smbk-btn):focus-visible {
outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
outline-offset: var(--smbk-focus-ring-offset);
border-radius: var(--smbk-radius-control-xs);
}
/* The newsletter: the page's form, its label over a row of the email field and its button. */
.smbk-footer__newsletter,
.smbk-footer__newsletter > form {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-sm);
width: 100%;
max-width: var(--smbk-size-width-320);
margin: 0;
}
.smbk-footer__newsletter-row {
display: flex;
align-items: center;
gap: var(--smbk-space-inline-sm);
}
.smbk-footer__newsletter-row > :first-child {
flex: 1 1 auto;
min-width: 0;
}
/* The columns take the room the brand leaves, up to what they need in one row. */
.smbk-footer__columns {
display: flex;
flex: 1 1 0;
flex-wrap: wrap;
gap: var(--smbk-space-inline-2xl) var(--smbk-space-inline-3xl);
max-width: max-content;
}
/* As wide as the column's longest link, as Figma draws it, and never wider than the row itself: a column whose links
are longer than the row narrows and its labels wrap. Heading and links stand the extra-small stack step apart. */
.smbk-footer__column {
display: flex;
flex: 0 1 auto;
flex-direction: column;
gap: var(--smbk-space-stack-xs);
max-width: 100%;
}
/* The heading's text starts where its links' text does: the link's side padding and its edge. */
.smbk-footer__heading {
margin: 0;
padding: 0 0 var(--smbk-space-inset-xs) calc(var(--smbk-space-inset-lg) + var(--smbk-border-width-hairline));
color: var(--smbk-color-text-subtlest);
font-family: var(--smbk-typography-label-sm-font-family);
font-size: var(--smbk-typography-label-sm-font-size);
font-weight: var(--smbk-typography-label-sm-font-weight);
line-height: var(--smbk-typography-label-sm-line-height);
letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
text-transform: var(--smbk-typography-label-sm-text-transform);
}
.smbk-footer__list {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-xs);
margin: 0;
padding: 0;
list-style: none;
}
/* Each link is a navigation item, which keeps to one line and cuts a long label short. Here the label wraps instead,
since a navigation label is never cut short: the item grows a line at a time. One line keeps the navigation item's
own height, and its padding gives every further line the same inset. A word longer than the whole column breaks
rather than spills. */
.smbk-nav-item.smbk-footer__link {
height: auto;
min-height: var(--smbk-size-control-sm);
padding-block: calc((var(--smbk-size-control-sm) - 1lh) / 2 - var(--smbk-border-width-hairline));
white-space: normal;
overflow-wrap: break-word;
}
/* The words a page link that leaves the site adds to its name, "(opens in a new tab)": for a screen reader only, so
the link looks as every other. */
/* .smbk-footer__new-tab: hidden from view, kept for screen readers and the keyboard, by the shared rule in visually-hidden/visually-hidden.css. */
/* ---- the equal column width: every column as wide as the widest, the same gap between them ----
* The columns stand in two halves, the first holding the extra column of an odd count. Each half is a row of equal
* columns that wraps as one, so the columns stand in one row where they fit and otherwise in two rows as even as the
* count allows, never one column alone under the rest; the rows keep to the row's end, where one row sits. A column is
* as wide as the widest because its heading holds an invisible copy of every column's title (before it) and of every
* link's words (after it), one per line, set as the headings and as a link's bolder label are, under the heading
* with no height; the copy wraps between words as a label does, so a column too narrow for it still narrows. In a
* space too narrow for two columns side by side they stand one under another. Markup written by hand without the
* halves wraps its columns one at a time; without the copies, each column keeps its own width. Hidden from assistive
* technology: generated, invisible, with empty words. */
.smbk-footer--column-width-equal .smbk-footer__columns {
justify-content: flex-end;
}
.smbk-footer--column-width-equal .smbk-footer__half {
display: flex;
flex: 0 1 auto;
flex-wrap: wrap;
gap: var(--smbk-space-inline-2xl) var(--smbk-space-inline-3xl);
max-width: 100%;
}
/* Each column starts from its own width, which the copies make the widest's, so a half's columns stand side by side
at that width, and in a space too narrow for even one half they wrap one under another rather than overflow. */
.smbk-footer--column-width-equal .smbk-footer__half > .smbk-footer__column {
flex: 1 1 auto;
}
.smbk-footer--column-width-equal .smbk-footer__heading[data-titles]::before,
.smbk-footer--column-width-equal .smbk-footer__heading[data-links]::after {
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
white-space: pre-line;
pointer-events: none;
user-select: none;
}
.smbk-footer--column-width-equal .smbk-footer__heading[data-titles]::before {
content: attr(data-titles);
content: attr(data-titles) / "";
}
/* A link's words at its bolder weight, and the link's own room after them: with the heading's room before them, as
wide as the link. */
.smbk-footer--column-width-equal .smbk-footer__heading[data-links]::after {
content: attr(data-links);
content: attr(data-links) / "";
padding-inline-end: calc(var(--smbk-space-inset-lg) + var(--smbk-border-width-hairline));
font-family: var(--smbk-typography-body-sm-font-family);
font-size: var(--smbk-typography-body-sm-font-size);
font-weight: var(--smbk-typography-body-sm-medium-font-weight);
line-height: var(--smbk-typography-body-sm-line-height);
letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
text-transform: none;
}
/* ---- the folded columns: each a row that opens, the narrow form's own ----
* A native disclosure: its heading row is the summary, the large inset above and below its words, the caret at its
* end; open, its links follow with the medium inset under them. A divider closes each row. */
.smbk-footer__folds {
flex-direction: column;
width: 100%;
}
.smbk-footer__fold > details > summary {
list-style: none;
}
.smbk-footer__fold > details > summary::-webkit-details-marker {
display: none;
}
.smbk-footer__fold-heading {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--smbk-space-inline-md);
padding: var(--smbk-space-inset-lg) 0;
color: var(--smbk-color-text-default);
font-family: var(--smbk-typography-label-md-font-family);
font-size: var(--smbk-typography-label-md-font-size);
font-weight: var(--smbk-typography-label-md-font-weight);
line-height: var(--smbk-typography-label-md-line-height);
letter-spacing: var(--smbk-typography-label-md-letter-spacing);
text-transform: var(--smbk-typography-label-md-text-transform);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.smbk-footer__fold-heading:focus-visible {
outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
outline-offset: calc(-1 * var(--smbk-focus-ring-width));
border-radius: var(--smbk-radius-control-xs);
}
/* Figma draws an open row's caret pointing up and a closed one's down: one caret, turned. */
.smbk-footer__caret {
flex-shrink: 0;
color: var(--smbk-color-icon-default);
transition: rotate var(--smbk-motion-state-duration) var(--smbk-motion-state-easing);
}
.smbk-footer__fold > details[open] .smbk-footer__caret {
rotate: 180deg;
}
@media (prefers-reduced-motion: reduce) {
.smbk-footer__caret {
transition: none;
}
}
.smbk-footer__fold .smbk-footer__list {
gap: 0;
padding-bottom: var(--smbk-space-inset-md);
}
/* ---- the row: the centred look's page links, centered, the extra-small inline step apart, wrapping ---- */
.smbk-footer__row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--smbk-space-inline-xs);
margin: 0;
padding: 0;
list-style: none;
}
.smbk-footer__row > li {
display: flex;
}
/* ---- the call to action: a raised card, the words at the start and the actions at the end ---- */
.smbk-footer__cta {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--smbk-space-inline-2xl);
padding: var(--smbk-space-inset-3xl);
border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-rim);
border-radius: var(--smbk-radius-container-md);
background: var(--smbk-color-surface-raised);
box-shadow: var(--smbk-elevation-raised);
}
.smbk-footer__cta-text {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-xs);
min-width: 0;
}
.smbk-footer__cta-headline {
margin: 0;
color: var(--smbk-color-text-default);
font-family: var(--smbk-typography-heading-sm-font-family);
font-size: var(--smbk-typography-heading-sm-font-size);
font-weight: var(--smbk-typography-heading-sm-font-weight);
line-height: var(--smbk-typography-heading-sm-line-height);
letter-spacing: var(--smbk-typography-heading-sm-letter-spacing);
text-transform: var(--smbk-typography-heading-sm-text-transform);
}
.smbk-footer__cta-line {
margin: 0;
color: var(--smbk-color-text-subtle);
font-family: var(--smbk-typography-body-md-font-family);
font-size: var(--smbk-typography-body-md-font-size);
font-weight: var(--smbk-typography-body-md-font-weight);
line-height: var(--smbk-typography-body-md-line-height);
letter-spacing: var(--smbk-typography-body-md-letter-spacing);
}
.smbk-footer__cta-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--smbk-space-inline-md);
}
/* An email field and its button in the card: the medium inline step apart, as the two buttons are. */
.smbk-footer__cta .smbk-footer__newsletter-row {
gap: var(--smbk-space-inline-md);
}
/* ---- the legal strip ----
* Spread, Figma's wide strip: the copyright (and its tagline, the medium inline step after it) and the legal links
* at the start, the extras at the end, the fine print under both. Small links standing on their own, the large
* inline step apart; the extras the medium step apart. The strip wraps where room runs short. */
.smbk-footer__legal {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--smbk-space-stack-md) var(--smbk-space-inline-2xl);
color: var(--smbk-color-text-subtlest);
font-family: var(--smbk-typography-body-xs-font-family);
font-size: var(--smbk-typography-body-xs-font-size);
font-weight: var(--smbk-typography-body-xs-font-weight);
line-height: var(--smbk-typography-body-xs-line-height);
letter-spacing: var(--smbk-typography-body-xs-letter-spacing);
}
.smbk-footer__legal-start {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--smbk-space-stack-md) var(--smbk-space-inline-2xl);
}
.smbk-footer__notice {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 var(--smbk-space-inline-md);
margin: 0;
}
.smbk-footer__tagline {
color: var(--smbk-color-text-subtle);
}
.smbk-footer__legal-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 var(--smbk-space-inline-lg);
margin: 0;
padding: 0;
list-style: none;
}
.smbk-footer__extras {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--smbk-space-stack-sm) var(--smbk-space-inline-md);
}
.smbk-footer__fine-print {
flex-basis: 100%;
margin: 0;
color: var(--smbk-color-text-subtle);
}
/* Legal end: the legal links leave the start and stand at the strip's end, before the extras, the strip's gap between
them. The start part steps aside, so the notice, the legal links and the extras are the strip's own places, in the
order Tab follows, and the room left over goes before the legal links. A strip that wraps keeps them at the end of
its last row. The centred and minimal looks place their legal links themselves. */
.smbk-footer--legal-end:not(.smbk-footer--look-centred, .smbk-footer--look-minimal) .smbk-footer__legal-start {
display: contents;
}
.smbk-footer--legal-end:not(.smbk-footer--look-centred, .smbk-footer--look-minimal) .smbk-footer__legal-links {
margin-inline-start: auto;
}
/* A legal link written by hand, not the link component: the default text color, underlined among words (in the
copyright, the fine print, a line at the end) so it never differs by color alone, and standing on its own in the
legal links, where it is underlined on hover only. */
.smbk-footer__legal-link:not(.smbk-link) {
color: var(--smbk-color-text-default);
text-decoration-line: underline;
text-decoration-color: var(--smbk-color-text-link-underline);
text-decoration-thickness: var(--smbk-border-width-link-underline);
text-underline-offset: var(--smbk-space-link-underline);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.smbk-footer__legal-links .smbk-footer__legal-link:not(.smbk-link) {
text-decoration-line: none;
}
@media (hover: hover) {
.smbk-footer__legal-link:not(.smbk-link):hover {
color: var(--smbk-color-text-brand);
text-decoration-line: underline;
text-decoration-color: currentColor;
}
}
.smbk-footer__legal-link:not(.smbk-link):focus-visible {
outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
outline-offset: var(--smbk-focus-ring-offset);
border-radius: var(--smbk-radius-control-xs);
}
/* ---- the big wordmark: the name as wide as the content, under the strip ---- */
.smbk-footer__wordmark {
display: flex;
color: var(--smbk-color-text-default);
}
.smbk-footer__wordmark > :is(svg, img, span) {
display: block;
width: 100%;
height: auto;
}
/* Wide: the narrow form's brand and folded columns go, as does the old divider above the brand. The selectors carry
the block so they outweigh the parts' own display rules. */
.smbk-footer .smbk-footer__brand-divider,
.smbk-footer .smbk-footer__narrow-only {
display: none;
}
/* ---- centred: brand, row and strip, each centered ---- */
.smbk-footer--look-centred > .smbk-footer__content {
align-items: center;
}
.smbk-footer--look-centred .smbk-footer__content > .smbk-footer__divider {
align-self: stretch;
}
.smbk-footer--look-centred .smbk-footer__brand {
align-items: center;
text-align: center;
}
.smbk-footer--look-centred .smbk-footer__blurb,
.smbk-footer--look-centred .smbk-footer__newsletter {
max-width: var(--smbk-size-content-sm);
}
.smbk-footer--look-centred .smbk-footer__legal,
.smbk-footer--look-centred .smbk-footer__legal-start {
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: var(--smbk-space-stack-md);
text-align: center;
}
.smbk-footer--look-centred :is(.smbk-footer__notice, .smbk-footer__legal-links, .smbk-footer__extras) {
justify-content: center;
}
/* ---- narrow: the columns folded, the brand under them, the strip stacked ---- */
@container style(--smbk-layout: narrow) {
.smbk-footer {
padding: var(--smbk-space-inset-2xl) 0;
}
.smbk-footer.smbk-footer--zone {
padding: var(--smbk-space-stack-2xl) var(--smbk-space-inset-xl) var(--smbk-space-stack-xl);
}
.smbk-footer.smbk-footer--look-floating.smbk-footer--zone {
padding: var(--smbk-space-inset-md) var(--smbk-space-gutter-xs);
}
.smbk-footer--look-floating > .smbk-footer__content {
padding: var(--smbk-space-inset-xl);
}
.smbk-footer__main {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: var(--smbk-space-stack-2xl);
}
/* The brand comes after the folds. The order keeps a footer whose markup puts its brand first, or holds it twice,
in the same places. */
.smbk-footer__main > .smbk-footer__brand {
order: 2;
}
.smbk-footer .smbk-footer__narrow-only {
display: flex;
}
.smbk-footer .smbk-footer__wide-only {
display: none;
}
.smbk-footer__columns {
max-width: none;
}
.smbk-footer__cta {
flex-direction: column;
align-items: stretch;
gap: var(--smbk-space-stack-lg);
padding: var(--smbk-space-inset-xl);
}
/* Figma stacks the actions with the medium inline step, each as wide as the card: two buttons, or an email field
over its button. */
.smbk-footer__cta-actions,
.smbk-footer__cta .smbk-footer__newsletter-row {
flex-direction: column;
align-items: stretch;
}
/* Stacked: the copyright, the legal links and the extras one under another at the start, wherever a wide space
puts the legal links. */
.smbk-footer__legal,
.smbk-footer__legal-start {
flex-direction: column;
align-items: flex-start;
gap: var(--smbk-space-stack-md);
}
.smbk-footer--legal-end:not(.smbk-footer--look-centred, .smbk-footer--look-minimal) .smbk-footer__legal-links {
margin-inline-start: 0;
}
}
/* ---- minimal: a divider over one strip ----
* The strip has three places, each at least a small control tall with its content centered in it: the notice (the
* copyright, and the tagline after it) at the start, the center part in the middle and the end part at the end. The
* center and end parts hold the legal links and the extras with the social links, or other content a page puts
* there instead; several things in one place stand apart and wrap. The middle place is as wide as its content and
* the other two share the rest equally. Each keeps its own column when another is left out. The places sit flush;
* the strip's own gap between them only shows when room runs short, and a place whose content needs more than its
* share takes it rather than overlap. The fine print takes a row of its own under the three. In a narrow space the
* three stack, centered, the extra-large stack step apart, each only as tall as its content; the middle and end
* places fold into the stack, so a place whose content is hidden there leaves no gap. */
.smbk-footer--look-minimal,
.smbk-footer--look-minimal > .smbk-footer__content {
gap: var(--smbk-space-stack-lg);
}
.smbk-footer--look-minimal .smbk-footer__legal {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--smbk-space-stack-md) var(--smbk-space-inline-2xl);
}
.smbk-footer--look-minimal .smbk-footer__notice,
.smbk-footer__center,
.smbk-footer__end {
display: flex;
flex-wrap: wrap;
align-items: center;
min-height: var(--smbk-size-control-sm);
margin: 0;
}
.smbk-footer--look-minimal .smbk-footer__notice {
grid-column: 1;
text-align: start;
}
.smbk-footer__center,
.smbk-footer__end {
gap: var(--smbk-space-stack-sm) var(--smbk-space-inline-2xl);
}
.smbk-footer__center {
grid-column: 2;
justify-content: center;
text-align: center;
}
.smbk-footer__end {
grid-column: 3;
justify-content: flex-end;
text-align: end;
}
.smbk-footer--look-minimal .smbk-footer__legal-links {
justify-content: center;
}
.smbk-footer--look-minimal .smbk-footer__fine-print {
grid-column: 1 / -1;
}
/* Words a page puts in the middle or at the end lose a paragraph's margins; controls are left as they are. */
.smbk-footer__center > :is(span, p),
.smbk-footer__end > :is(span, p) {
margin: 0;
}
@container style(--smbk-layout: narrow) {
.smbk-footer--look-minimal,
.smbk-footer--look-minimal > .smbk-footer__content {
gap: var(--smbk-space-stack-xl);
}
.smbk-footer--look-minimal .smbk-footer__legal {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--smbk-space-stack-xl);
}
.smbk-footer--look-minimal .smbk-footer__notice {
justify-content: center;
min-height: 0;
text-align: center;
}
.smbk-footer--look-minimal .smbk-footer__extras {
justify-content: center;
}
.smbk-footer--look-minimal .smbk-footer__fine-print {
text-align: center;
}
/* The middle and end places fold into the stack: what they hold stands in it directly, centered, so content a page
hides in a narrow space leaves no empty place and no gap. Several things meant to stay together go inside one
element of the page's own. */
.smbk-footer__center,
.smbk-footer__end {
display: contents;
text-align: center;
}
}
/* ---- touch: the logo's link and every link take invisible press areas ----
On a touch screen an invisible area, centred on the logo's link and on each link and button, takes the press out to
the comfortable target in each direction it falls short of it. Where the footer sets them closer than that (the
social buttons and the centred row, which wrap; a column's links, one under another; a folded column's links, which
touch each other and their heading), each reaches only halfway into the gap, or not past its own edge where two
touch. Nothing drawn moves. */
@media (pointer: coarse) {
.smbk-footer__brand-link,
.smbk-footer__legal-links .smbk-footer__legal-link {
position: relative;
}
.smbk-footer__brand-link::after,
.smbk-footer__legal-links .smbk-footer__legal-link::after {
content: '';
position: absolute;
inset: min(0%, (100% - var(--smbk-size-target-comfortable)) / 2);
}
.smbk-footer__social .smbk-btn::after,
.smbk-footer__row .smbk-nav-item::after {
inset: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), var(--smbk-space-inline-xs) / -2);
}
.smbk-footer__list > li + li > .smbk-nav-item::after {
inset-block-start: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), var(--smbk-space-stack-xs) / -2);
}
.smbk-footer__list > li:has(+ li) > .smbk-nav-item::after {
inset-block-end: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), var(--smbk-space-stack-xs) / -2);
}
.smbk-footer__fold .smbk-footer__list > li > .smbk-nav-item::after {
inset-block-start: 0;
}
.smbk-footer__fold .smbk-footer__list > li:has(+ li) > .smbk-nav-item::after {
inset-block-end: 0;
}
}
```
## Tokens it reads
```json
{
"space": {
"stack": {
"2xl": {
"$type": "dimension",
"$value": "{{space.32}}",
"$description": "Gap between things stacked one above another, 2× large."
},
"3xl": {
"$type": "dimension",
"$value": "{{space.40}}",
"$description": "Gap between things stacked one above another, 3× large."
},
"xl": {
"$type": "dimension",
"$value": "{{space.24}}",
"$description": "Gap between things stacked one above another, extra large."
},
"lg": {
"$type": "dimension",
"$value": "{{space.16}}",
"$description": "Gap between things stacked one above another, large."
},
"sm": {
"$type": "dimension",
"$value": "{{space.8}}",
"$description": "Gap between things stacked one above another, small."
},
"xs": {
"$type": "dimension",
"$value": "{{space.4}}",
"$description": "Gap between things stacked one above another, extra small."
},
"md": {
"$type": "dimension",
"$value": "{{space.12}}",
"$description": "Gap between things stacked one above another, medium."
}
},
"inset": {
"2xl": {
"$type": "dimension",
"$value": "{{space.24}}",
"$description": "Padding inside a component, 2× large."
},
"md": {
"$type": "dimension",
"$value": "{{space.8}}",
"$description": "Padding inside a component, medium."
},
"xs": {
"$type": "dimension",
"$value": "{{space.4}}",
"$description": "Padding inside a component, extra small."
},
"lg": {
"$type": "dimension",
"$value": "{{space.12}}",
"$description": "Padding inside a component, large."
},
"3xl": {
"$type": "dimension",
"$value": "{{space.32}}",
"$description": "Padding inside a component, 3× large."
},
"xl": {
"$type": "dimension",
"$value": "{{space.16}}",
"$description": "Padding inside a component, extra large."
}
},
"section": {
"md": {
"$type": "dimension",
"$value": "{{space.64}}",
"$description": "Rhythm of page sections, medium."
}
},
"inline": {
"3xl": {
"$type": "dimension",
"$value": "{{space.32}}",
"$description": "Gap between things side by side, 3× large."
},
"xs": {
"$type": "dimension",
"$value": "{{space.4}}",
"$description": "Gap between things side by side, extra small."
},
"sm": {
"$type": "dimension",
"$value": "{{space.6}}",
"$description": "Gap between things side by side, small."
},
"2xl": {
"$type": "dimension",
"$value": "{{space.24}}",
"$description": "Gap between things side by side, 2× large."
},
"md": {
"$type": "dimension",
"$value": "{{space.8}}",
"$description": "Gap between things side by side, medium."
},
"lg": {
"$type": "dimension",
"$value": "{{space.12}}",
"$description": "Gap between things side by side, large."
}
},
"link-underline": {
"$type": "dimension",
"$value": "{{space.4}}",
"$description": "Gap between a link's words and the line under them. Figma sets a text's underline as a plain number with no variable behind it."
},
"gutter": {
"xs": {
"$type": "dimension",
"$value": "{{space.8}}",
"$description": "A section’s outer side padding on a phone (space/layout/gutter points here). The page itself has no gutter: each section carries its own."
}
}
},
"color": {
"surface": {
"canvas": {
"$type": "color",
"$value": "{{color.grey.200}}",
"$description": "Page background."
},
"default": {
"$type": "color",
"$value": "{{color.grey.100}}",
"$description": "Standard surface: cards, panels, the header."
},
"raised": {
"$type": "color",
"$value": "{{color.grey.50}}",
"$description": "One floor above default: popovers, raised panels."
}
},
"text": {
"default": {
"$type": "color",
"$value": "{{color.grey.900}}",
"$description": "Main text."
},
"subtle": {
"$type": "color",
"$value": "{{color.grey.700}}",
"$description": "Secondary text: descriptions, metadata."
},
"brand": {
"$type": "color",
"$value": "{{color.red.600}}",
"$description": "Brand-red text."
},
"subtlest": {
"$type": "color",
"$value": "{{color.grey.600}}",
"$description": "Quietest text: hints, captions, placeholders."
},
"link-underline": {
"$type": "color",
"$value": "{{color.alpha.grey-900.19}}",
"$description": "The line under a link at rest, see-through so it sits the same on every surface."
}
},
"border": {
"subtle": {
"$type": "color",
"$value": "{{color.grey.300}}",
"$description": "Dividers and quiet edges."
},
"rim": {
"$type": "color",
"$value": "{{color.alpha.white.90}}",
"$description": "The light rim that makes a surface look lit: fields, chosen pills, cards."
},
"focus": {
"$type": "color",
"$value": "{{color.red.600}}",
"$description": "Keyboard focus ring on controls."
}
},
"icon": {
"default": {
"$type": "color",
"$value": "{{color.grey.900}}",
"$description": "Icons."
}
}
},
"border-width": {
"hairline": {
"$type": "dimension",
"$value": "{{border-width.1}}",
"$description": "Thin lines: dividers and almost every edge."
},
"link-underline": {
"$type": "dimension",
"$value": "1.5px",
"$description": "Thickness of the line under a link. Figma sets a text's underline as a plain number with no variable behind it, and this one is not a step on the width scale."
}
},
"size": {
"layout": {
"container": {
"default": {
"$type": "dimension",
"$value": "{{size.layout.container.3xl}}",
"$description": "The default page container max width: 3xl, 1360 px. Full width (the space available) is the Fill sizing in Figma and size/layout/container/full (100%) in code, which Figma cannot hold as a number."
}
}
},
"icon": {
"xl": {
"$type": "dimension",
"$value": "{{size.32}}",
"$description": "Icon box, extra large."
}
},
"width": {
"320": {
"$type": "dimension",
"$value": "320px",
"$description": "A fixed width of 320 px: a narrow column, a list’s greatest height. Semantic sizes point here."
}
},
"control": {
"sm": {
"$type": "dimension",
"$value": "{{size.32}}",
"$description": "Height of a small control: 32 comfortable, 28 compact. Dashboard recipe: use compact density; 40 for the page’s one main action and for forms; 32 for toolbars and filters, the size used most; 28 for actions inside table rows and cards. On phones switch to comfortable density, or give small controls an invisible 44 px tap area (size/target/comfortable)."
}
},
"content": {
"sm": {
"$type": "dimension",
"$value": "{{size.width.480}}",
"$description": "Widest a content column may grow, small."
}
},
"target": {
"comfortable": {
"$type": "dimension",
"$value": "{{size.44}}",
"$description": "Comfortable touch target (44)."
}
}
},
"radius": {
"container": {
"lg": {
"$type": "dimension",
"$value": "{{radius.16}}",
"$description": "Corners of cards, panels and dialogs, large."
},
"md": {
"$type": "dimension",
"$value": "{{radius.12}}",
"$description": "Corners of cards, panels and dialogs, medium."
}
},
"control": {
"xs": {
"$type": "dimension",
"$value": "{{radius.2}}",
"$description": "Corners of controls, extra small."
}
}
},
"elevation": {
"raised": {
"$type": "shadow",
"$value": {
"light": "0px 2px 8px 1px #373d431a, 0px 1px 2px 0px #373d431a",
"dark": "0px 2px 8px 1px #00000026, 0px 1px 2px 0px #00000026"
}
}
},
"focus": {
"ring": {
"width": {
"$type": "dimension",
"$value": "{{border-width.2}}",
"$description": "Thickness of the focus ring."
},
"offset": {
"$type": "dimension",
"$value": "{{space.2}}",
"$description": "Gap between a control and its focus ring."
}
}
},
"typography": {
"body-sm": {
"$type": "typography",
"$value": {
"fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
"fontSize": "14px",
"fontWeight": 400,
"lineHeight": 1.5,
"letterSpacing": "0px"
}
},
"label-sm": {
"$type": "typography",
"$value": {
"fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
"fontSize": "12px",
"fontWeight": 500,
"lineHeight": 1.4,
"letterSpacing": "0px"
},
"$description": "Label SM: labels on controls and short UI text (buttons, chips, tabs, menu headings). Geist Medium, sentence case. Code and keys use Code SM and Code MD."
},
"body-sm-medium": {
"$type": "typography",
"$value": {
"fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
"fontSize": "14px",
"fontWeight": 500,
"lineHeight": 1.5,
"letterSpacing": "0px"
},
"$description": "Body SM one weight step bolder, for the current item, so the current item is not shown by colour alone."
},
"label-md": {
"$type": "typography",
"$value": {
"fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
"fontSize": "14px",
"fontWeight": 500,
"lineHeight": 1.4,
"letterSpacing": "0px"
},
"$description": "Label MD: labels on controls and short UI text (buttons, chips, tabs, menu headings). Geist Medium, sentence case. Code and keys use Code SM and Code MD."
},
"heading-sm": {
"$type": "typography",
"$value": {
"fontFamily": "Funnel Display, Funnel Display Fallback, system-ui, sans-serif",
"fontSize": {
"min": "24px",
"max": "32px"
},
"fontWeight": 400,
"lineHeight": 1.2,
"letterSpacing": "0px"
}
},
"body-md": {
"$type": "typography",
"$value": {
"fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
"fontSize": "16px",
"fontWeight": 400,
"lineHeight": 1.5,
"letterSpacing": "0px"
}
},
"body-xs": {
"$type": "typography",
"$value": {
"fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
"fontSize": "12px",
"fontWeight": 400,
"lineHeight": 1.5,
"letterSpacing": "0px"
}
}
},
"motion": {
"state": {
"duration": {
"$type": "duration",
"$value": "{{duration.200}}"
},
"easing": {
"$type": "cubicBezier",
"$value": "{{easing.cubic-in-out}}"
}
}
}
}
```
## Purpose
The foot of every page of a website: the brand with a line about the site and its social links, the page links for the reader who scrolled all the way down, and the legal strip. It is the site map in small. Six looks share those parts: columns, minimal (the strip alone, for a site whose pages are reached another way), centred, floating, call to action and big wordmark.
## Anatomy
- The block, on the canvas color, and inside it the content part, which holds everything else one part under another.
- The main part: the brand part beside the columns part. The brand part holds the brand link with the logo part, an optional blurb part (a line about the site), the social part (small ghost icon buttons, each with the social link part) and an optional newsletter part. Each column part is a heading part over a list part of navigation items at the middle size, the heading's words lined up with the links' words; each navigation item also carries the link part, which lets its label wrap. A page link that leaves the site holds the new-tab part after its label, words for a screen reader only. With the equal column width, the columns stand in two half parts inside the columns part.
- The narrow form's own parts: the folds part, a navigation landmark like the columns, with one fold part per column: a disclosure whose summary is the fold heading part (the column's title and the caret part), its list of links under it, and a fold divider part closing the row. The brand part comes after the folds.
- The page links come twice, the folds with the narrow-only part and the columns with the wide-only part, and the brand part once, between them: the folds, then the brand, then the columns. The layout switch shows one of the two renderings of the links, so the brand comes after the folds on a phone and before the columns in a wide space.
- The logo part is the built-in simbolik logo, or a site's own picture files with their dark versions (`logoPicture`, the logo's `picture`). Anything else goes in the brand's place (`brand`).
- A divider part above the legal part, in both forms.
- The legal part: the legal start part (the notice part, holding the copyright part and an optional tagline part, then the legal links part of small links), the extras part at the end (a status, a language button, a theme switch and a link back to the top, each when given), and an optional fine print part under them.
- The centred look: one brand part, centered, then the row part (one row of page links in a navigation landmark), then the divider and the legal part, centered, its legal links above the copyright.
- The floating look: the content part on a raised card.
- The call to action look: the call to action part first, a raised card holding the call to action text part (its headline part and line part) and the call to action actions part.
- The big wordmark look: the wordmark part last, the name set as wide as the content, hidden from screen readers.
- The minimal look: a divider over the legal part, which holds three places in three columns: the notice part at the start, the center part in the middle and the end part at the end. The center part holds the legal links part and the end part the extras part, with the social links before back to top; a site can put its own content in either place instead, such as a control or a line of words. The fine print takes a row under the three. No brand and no page links.
## When to use
- The bottom of every page of a website.
- The call to action look when the site asks every reader for one thing, such as a call or a sign-up.
- The big wordmark look when the name itself is the last thing a page should show.
## When not to use
- An application screen. Applications end with their content.
- The columns look on a landing page with one call to action, or on a site whose every page is reached from a sidebar or the header. Use the minimal look there.
## Behavior
In a wide space the brand sits at the start and the columns at the end of the row, each column as wide as its longest link. In a narrow space each column folds into a row that opens: its title and a caret, a divider under it. The first row starts open. Pressing a row's title, or Enter or Space on it, opens or closes it; it needs no script. The brand follows the folded rows, at the start, and the legal strip stacks under a divider: the copyright, the legal links, then the extras. The form follows the layout switch, so a wrapper can force either.
The legal strip in a wide space keeps the copyright and the legal links at the start and the extras at the end, and wraps when room runs short. With `legal="end"` the legal links move to the end of the strip, just before the extras when there are some, and the copyright and its tagline keep the start; Tab still reaches the copyright's links, then the legal links, then the extras, the order they are drawn in. On a phone the strip stacks the same way whichever is chosen: the copyright, the legal links, then the extras. The centred and minimal looks place their legal links themselves, so the choice changes the other four. The fine print takes a line of its own under the strip.
By default each column of links is as wide as its longest link. With `column-width="equal"` every column is as wide as the widest, with the same gap between them: in one row at the end of the brand's row where they all fit, and otherwise in two rows as even as the count allows, four as two and two, still at the row's end, so no column is ever left alone under the rest. An odd count puts the extra column in the first row. Given too little room for even two columns side by side, they stand one under another rather than run past the footer's edge. It needs no script: each column's heading holds an invisible copy of every column's title and every link's words, which only gives it its width. The folded columns on a phone are the same either way.
The centred look stays centered in both forms: the brand, the row of page links (which wraps onto further lines), and the strip, its legal links above the copyright.
The call to action card sets its words at the start and its actions at the end in a wide space; in a narrow space the actions stack under the words, each as wide as the card.
The minimal look keeps its three places in one row in a wide space, the legal links in the exact middle, each column at least a small control tall with its content centered in it. The middle column is as wide as its links and the two ends share the rest equally; where the copyright line and tagline need more than their share, the tagline moves under the copyright rather than overlap. Several things put in one place stand apart and wrap when there is no room. In a narrow space what the middle and end places hold stands in the stack directly, so content a page hides there in a narrow space leaves no empty place behind; several things meant to stay together on a phone go inside one element of the page's own. In a narrow space they stack in the same order, each centered.
Within either form the footer fits whatever width it is given, and never makes the page scroll sideways. Nothing in it is set by a width. In a wide space a column that no longer fits beside the others moves to a further row, or, with the equal column width, half of them do. If the wide form is given too little room for even one column beside the brand, the columns move below the brand, and a column whose links are longer than the whole row narrows. Link labels wrap onto further lines rather than being cut short, and a single word longer than its column breaks.
Two switches change the frame. With `divider="off"` the divider above the legal strip goes. With the background flag the footer stands on a band of the default surface with a hairline along its top. A dark band is the footer inside a part of the page set to the dark theme; it is not a look of its own.
The zone flag gives the footer its own room: its content held to the content width in the middle, with space above, below and at the sides, and a small margin around the floating card. Without it the footer keeps its own padding and the page places it.
Markup written by hand must put the link part on each column link's navigation item; without it, long labels are cut short instead of wrapping. For the equal column width it wraps the columns in two half parts, the first holding the extra column of an odd count, and gives each heading the `data-titles` attribute (every column's title) and the `data-links` attribute (every link's words seen, without the new-tab words), each one per line; without the halves the columns wrap one at a time, and without the attributes each column keeps its own width. Each page link's `data-label` holds only its words seen, never the new-tab words. It holds the folds with the narrow-only part, then the brand part, then the columns with the wide-only part, so the brand is on the page once and a form inside it (a newsletter sign-up) has each id once. A footer whose markup puts the brand before the folds still shows it in the same places, but on a phone Tab then reaches the brand before the links above it; one with no folds shows its columns open on a phone. Markup that holds the brand twice, once with the wide-only part before the columns and once with the narrow-only part after the folds, still shows one at a time, but anything with an id inside the brand is then on the page twice, and a label points at the copy that comes first, hidden on a phone.
In the minimal look, content a page puts in the center or end place goes in as it is. Put words in a span or a paragraph: the footer takes away a paragraph's margins and leaves controls and other elements as they are.
The extras, the newsletter and the call to action's actions are the page's own components: the footer places them and the page decides what they do. The language button opens whatever the page chooses; the newsletter's field and button send the page's own form.
## Accessibility
### What it does for you
- The block is a content-info landmark; the page links are a navigation landmark named "Footer" by default.
- Column headings are headings, so the columns can be jumped between: second-level, as is the call to action's headline, unless `headingLevel` gives another. On a phone each folded row's title is a disclosure: a screen reader hears its name and whether it is open, and Enter or Space opens and closes it.
- A link given `active` is the current page: it says so to a screen reader (`aria-current="page"`), as the header's links do. A page link also takes the navigation item's current look; a legal link keeps its look, since the legal strip has no current state of its own.
- A page link or a social link given `external` leaves the site: it opens in a new tab, and a screen reader hears "(opens in a new tab)" after its name, so the change of tab is never a surprise (WCAG 2.2 success criterion 3.2.5 Change on Request). On a page link the words are in the new-tab part, out of sight; on a social link they end its name. Nothing changes in how either looks. The legal links take no such flag: the terms, the privacy policy and the rest of the strip open in the same tab.
- Given `external`, a link also gets `target="_blank"` and `rel="noopener"`.
- A link among words (in the copyright, the fine print, a line at the end) is underlined, so it never differs from the words around it by color alone.
- The brand and the page links are read and reached with Tab in the order they are seen in each form: the brand first in a wide space, the page links first on a phone.
- A status says its state in words beside its dot, never by color alone. The language button's name says what it changes, such as "Language: English". Back to top is a link with words, to the page's start.
- The big wordmark is hidden from screen readers: the brand already names the site.
- No link label is ever cut short, so what a reader sees is the whole of what a screen reader announces. Navigation labels wrap rather than truncate, and the text still fits at twice its size (WCAG 2.2 success criterion 1.4.4 Resize Text) and at the narrowest reflow width without sideways scrolling (1.4.10 Reflow).
### What you must do
- Give the page links another name when a page shows more than one footer with page links.
- Give each social link a name; the prop requires one.
- Mark a link that leaves the site with `external`. In markup written by hand, give a link that leaves the site both attributes, end a page link's label with the new-tab part holding a space and "(opens in a new tab)", and end a social link's `aria-label` with the same words.
- Provide the page's start that Back to top links to.
- Give the newsletter's email field a visible label. The call to action's field names itself when the headline above it is its only label. Messages about what to fix are the page's form's own.
- Give every word it says by itself, such as back to top and the new-tab words, in the page's language; each keeps its English unless the page gives its own.
### How to test
- With the keyboard only, Tab through the footer: the order follows what is seen, and every link and button shows its focus ring. On a phone, open and close a folded row with Enter and with Space.
- With a screen reader, the footer is found as a content-info landmark and its links as a navigation landmark by name; each column heading is read as a heading; a link that opens a new tab says so; the current page is read as the current page.
- With text at 200% and the page 320 pixels wide, every link label wraps whole and nothing scrolls sideways.
- In a forced-color mode, the links, the underlines and the focus rings are still visible.
### Keyboard
| Key | What it does |
|---|---|
| Tab | Moves focus to the next link or button, in the order they are seen. |
| Enter | Follows the focused link or presses the focused button. |
| Enter or Space | On a folded row's title on a phone, opens or closes the row. |
## Usage rules
### Do
- Keep to four columns of five or six links.
- Keep labels short. A long label wraps and stays readable, but a column of two- and three-line labels is slow to scan.
- Put the legal links in the strip, not in a column.
- Give the newsletter field a visible label and a button that says what it does.
### Don't
- Put more than one call to action in the card.
- Measure the footer to switch it to its narrow form when the wide one looks crowded. The wide form never overflows, so there is nothing to detect; force a form with the layout switch only as a design choice.