# Footer

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

## Playground

```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

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

## Accessibility

-   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.
