/*
* Site-footer-extended — section (expanded form)
*
* Multi-column footer: 3-5 category columns of links + a bottom row
* with logo, copyright, and legal links. The minimal single-row form
* lives in Site-footer.
*
* <footer class="site-footer-extended">
* <div class="site-footer-extended__columns">
* <div class="site-footer-extended__column">
* <h3 class="site-footer-extended__column-title">Product</h3>
* <ul class="site-footer-extended__column-list">
* <li><a href="#">Components</a></li>
* <li><a href="#">Tokens</a></li>
* <li><a href="#">Themes</a></li>
* </ul>
* </div>
* <!-- more columns... -->
* </div>
* <div class="site-footer-extended__bottom">
* <a class="site-footer-extended__logo" href="/">Malevich</a>
* <p class="site-footer-extended__copyright">© 2026 Malevich.</p>
* <nav class="site-footer-extended__legal" aria-label="Legal">
* <a href="/privacy">Privacy</a>
* <a href="/terms">Terms</a>
* </nav>
* </div>
* </footer>
*/
@layer malevich.components {
.site-footer-extended {
display: flex;
flex-direction: column;
gap: var(--space-gap-blocks-l);
padding-block: var(--space-inset-section-l);
padding-inline: var(--space-inset-section-m);
background-color: var(--color-surface-canvas);
border-block-start: var(--border-width-hairline) solid var(--color-border-muted);
color: var(--color-ink-regular);
inline-size: 100%;
box-sizing: border-box;
}
/* ---- Column grid ---- */
.site-footer-extended__columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--site-footer-extended-column-min), 1fr));
gap: var(--space-gap-blocks-l);
}
.site-footer-extended__column {
display: flex;
flex-direction: column;
gap: var(--space-gap-elements-s);
}
.site-footer-extended__column-title {
margin: 0 0 var(--space-gap-elements-s);
color: var(--color-ink-strong);
font-family: var(--font-overline-family);
font-size: var(--font-overline-size);
font-weight: var(--font-overline-weight);
line-height: var(--font-overline-line-height);
letter-spacing: var(--font-overline-letter-spacing);
text-transform: uppercase;
}
.site-footer-extended__column-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-gap-elements-s);
}
.site-footer-extended__column-list a {
color: var(--color-ink-regular);
text-decoration: none;
font-family: var(--font-body-support-family);
font-size: var(--font-body-support-size);
font-weight: var(--font-body-support-weight);
line-height: var(--font-body-support-line-height);
letter-spacing: var(--font-body-support-letter-spacing);
transition: color var(--motion-fast) var(--motion-easing-default);
}
.site-footer-extended__column-list a:hover {
color: var(--color-ink-strong);
}
/* ---- Bottom row ---- */
.site-footer-extended__bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-gap-elements-m);
padding-block-start: var(--space-inset-block-m);
border-block-start: var(--border-width-hairline) solid var(--color-border-muted);
}
.site-footer-extended__logo {
display: inline-flex;
align-items: center;
color: var(--color-ink-strong);
text-decoration: none;
font-family: var(--font-display-title-family);
font-size: var(--font-heading-section-size);
font-weight: var(--font-display-title-weight);
letter-spacing: var(--font-display-title-letter-spacing);
flex-shrink: 0;
}
.site-footer-extended__copyright {
margin: 0;
color: var(--color-ink-subtle);
font-family: var(--font-caption-family);
font-size: var(--font-caption-size);
font-weight: var(--font-caption-weight);
line-height: var(--font-caption-line-height);
letter-spacing: var(--font-caption-letter-spacing);
}
.site-footer-extended__legal {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-gap-elements-m);
}
.site-footer-extended__legal a {
color: var(--color-ink-subtle);
text-decoration: none;
font-family: var(--font-caption-family);
font-size: var(--font-caption-size);
font-weight: var(--font-caption-weight);
line-height: var(--font-caption-line-height);
letter-spacing: var(--font-caption-letter-spacing);
transition: color var(--motion-fast) var(--motion-easing-default);
}
.site-footer-extended__legal a:hover {
color: var(--color-ink-strong);
}
/* Variants */
.site-footer-extended.-on-inverse {
background-color: var(--color-ink-strong);
color: var(--color-ink-inverse);
}
.site-footer-extended.-on-inverse .site-footer-extended__column-title,
.site-footer-extended.-on-inverse .site-footer-extended__column-list a,
.site-footer-extended.-on-inverse .site-footer-extended__logo {
color: var(--color-ink-inverse);
}
.site-footer-extended.-on-inverse .site-footer-extended__copyright,
.site-footer-extended.-on-inverse .site-footer-extended__legal a {
color: var(--color-ink-inverse);
opacity: 0.6;
}
}
This component is pure CSS — no JavaScript required.
# Site-Footer-Extended — AGENTS.md
> Auto-generated from `site-footer-extended.docs.md` + the modifier applicability matrix.
> Edit those source files; this file regenerates on build.
## Identity
- **Component:** `site-footer-extended`
- **Layer:** sections
- **Status:** stable
- **Last updated:** 2026-05-19
## Summary
- Documentation sites with extensive footer navigation.
## Variants
| Variant | Class | Effect |
|---|---|---|
| Default | `.site-footer-extended` | Canvas surface |
| Inverse | `.-on-inverse` | Dark surface |
## Modifier applicability
Per ADR-0007. Modifiers attach via `data-{category}="value"` attributes.
| Category | Accepts |
|---|---|
| `background` | `solid`, `gradient` |
| `surface` | `flat` |
| `effect` | — |
| `shader` | — |
| `rhythm` | `compact`, `regular`, `spacious` |
| `motion` | any value |
| `behavior` | — |
## Anatomy
```html
<footer class="site-footer-extended">
<div class="site-footer-extended__columns">
<div class="site-footer-extended__column">
<h3 class="site-footer-extended__column-title">Product</h3>
<ul class="site-footer-extended__column-list">
<li><a href="/components">Components</a></li>
<li><a href="/tokens">Tokens</a></li>
<li><a href="/themes">Themes</a></li>
</ul>
</div>
<div class="site-footer-extended__column">
<h3 class="site-footer-extended__column-title">Resources</h3>
<ul class="site-footer-extended__column-list">
<li><a href="/docs">Docs</a></li>
<li><a href="/guides">Guides</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</div>
<div class="site-footer-extended__column">
<h3 class="site-footer-extended__column-title">Community</h3>
<ul class="site-footer-extended__column-list">
<li><a href="https://github.com/…">GitHub</a></li>
<li><a href="/discord">Discord</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
</div>
<div class="site-footer-extended__bottom">
<a class="site-footer-extended__logo" href="/">Malevich</a>
<p class="site-footer-extended__copyright">© 2026 Malevich.</p>
<nav class="site-footer-extended__legal" aria-label="Legal">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
<a href="/license">License</a>
</nav>
</div>
</footer>
```
The columns grid uses `auto-fit` + `minmax(12rem, 1fr)` so columns
reflow gracefully as the viewport shrinks — no breakpoint queries.
## Tokens consumed
- `--color-surface-canvas` / `--color-ink-strong` (inverse bg)
- `--color-ink-strong`, `--color-ink-regular`, `--color-ink-subtle`,
`--color-ink-inverse`
- `--color-border-muted` — top + inner borders
- `--space-inset-section-{m,l}`, `--space-inset-block-m`
- `--space-gap-elements-{s,m}`, `--space-gap-blocks-l`
- `--border-width-hairline`
- `--font-overline-*` — column titles (uppercase tracking)
- `--font-body-support-*` — column list links
- `--font-caption-*` — copyright + legal
- `--font-display-title-*`, `--font-heading-section-size` — logo
- `--motion-fast`, `--motion-easing-default`
## Accessibility contract
- Use `<footer>` for the page-level wrapper.
- Column titles use real `<h3>` so screen readers can navigate
between categories.
- Legal links carry `<nav aria-label="Legal">` to distinguish from
primary navigation in the columns.
- Grid auto-collapse keeps source order matching reading order.