Site footer
A website footer: brand, link columns, legal line and an optional giant wordmark.
Footer
<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>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/site-footer.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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".