Footer

The footer: the brand with the years, who made it, and the links that apply to the whole site.

On this page

Playground

Since

Background

HTML

<footer class="feitio-footer"><div class="inner"><span class="who"><strong>Feitio</strong><span>© <span data-since="2026">2026</span></span></span><ul><li><a href="#playground">Changelog</a></li><li><a href="#playground">MIT License</a></li><li><a href="#playground">GitHub</a></li></ul></div></footer>

When to use

At the end of every page of a documentation or institutional site.

When not to use

On a work screen: what would go in the footer goes in the Drawer footer.
As a second menu, repeating every page.

Examples

The footer

The brand and years on the left; the links on the right. On mobile, one below the other.

Show code

HTML

<footer class="feitio-footer">
  <div class="inner">
    <span class="who">…<strong>Feitio</strong> © <span data-since="2026">2026</span></span>
    <ul><li><a href="/mudancas">Mudanças</a></li>…</ul>
  </div>
</footer>

The years

The year comes from the data-since attribute: while it is the same year, it shows just that ("2026"); when the year turns, it shows the range ("2026–2027"), on its own, with no one editing it.

Anatomy

Who: the brand, the name and the years.
Links: a few, those that apply to the whole site.

It is a <footer>: screen readers announce the region.

Attributes

Attribute	Values	What for
`class="feitio-footer"`	on the `<footer>`	The footer, with the hairline on top.
`data-since`	the first year	Shows the year, or the range once the year turns.