Components / Navigation / Fat footer
N6 · Navigation
Fat footer
Link columns plus a stamp that says when the example data was fixed.
<footer class="c-foot">
<div class="c-foot-cols">
<div><p class="label">Product</p><a href="#product">Components</a></div>
<div><p class="label">Learn</p><a href="#learn">Install</a></div>
</div>
<p class="sub num">Example data as of 27 Oct 2026, 09:00 UTC</p>
</footer>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A page ends with a map of the product.
- Readers need the as-of time for the figures.
When not to use
- The view is an app panel with its own navigation.
- There is a single next step and no link map.
Usage
<footer class="c-foot">
<div class="c-foot-cols">
<div><p class="label">Product</p><a href="#product">Components</a></div>
<div><p class="label">Learn</p><a href="#learn">Install</a></div>
</div>
<p class="sub num">Example data as of 27 Oct 2026, 09:00 UTC</p>
</footer>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| c-foot-cols | element | — | Three link columns. |
| stamp | text | — | As-of line. Use tabular numbers. |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves through the links in column order. |
Accessibility
- Columns start with a label.
- Links are text.
- The as-of line is in the footer, not a tooltip.
Motion
- No motion.
Pattern origin
Pattern type: footer link columns with a data-as-of stamp.