# Site footer · MIAN

A website footer: brand, link columns, legal line and an optional giant wordmark.

- Id: `site-footer` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/site-footer
- Use for: website footer, footer links, legal line, sitemap links, giant wordmark footer.
- On a page: footer · prominence low · density medium. Usually after: cta.
- Avoid: Links to pages that do not exist.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-footer`: The <footer>. Holds an mn-container.
- `mn-footer-grid`: Brand column plus link columns; --cols sets how many link columns (default 3).
- `mn-footer-brand`: Logo and one sentence about the company.
- `mn-footer-col`: A column: an <h2> and a <ul> of links.
- `mn-footer-legal`: Copyright and legal links.
- `mn-footer-wordmark`: The brand name set huge across the width.

## Accessibility

- Use <footer>; a footer nav should have aria-label (e.g. “Footer”).
- Column headings are <h2> so they appear in the headings list.
- The wordmark is decorative: aria-hidden="true".

## Examples

### Footer

```html
<footer class="mn-footer"><div class="mn-container">
  <div class="mn-footer-grid">
    <div class="mn-footer-brand"><a class="mn-header-brand" href="#"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><rect x="3" y="3" width="18" height="18" rx="5"/><path d="M8 7v10h8" stroke="var(--mn-bg)" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>Ledger</a><p>Month-end close for finance teams. Made in Cluj and Berlin.</p></div>
    <nav class="mn-footer-col" aria-label="Product"><h2>Product</h2><ul><li><a href="#">Reconciliation</a></li><li><a href="#">Consolidation</a></li><li><a href="#">Pricing</a></li></ul></nav>
    <nav class="mn-footer-col" aria-label="Company"><h2>Company</h2><ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Contact</a></li></ul></nav>
    <nav class="mn-footer-col" aria-label="Resources"><h2>Resources</h2><ul><li><a href="#">Docs</a></li><li><a href="#">Security</a></li><li><a href="#">Status</a></li></ul></nav>
  </div>
  <p class="mn-footer-wordmark" aria-hidden="true">Ledger</p>
  <div class="mn-footer-legal"><p>© 2026 Ledger Ltd.</p><ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul></div>
</div></footer>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/site-footer/source