{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "site-footer",
  "name": "Site footer",
  "category": "Sections",
  "description": "A website footer: brand, link columns, legal line and an optional giant wordmark.",
  "tags": [
    "footer",
    "site footer",
    "sitemap",
    "links",
    "legal",
    "copyright",
    "website"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "footer",
    "intents": [
      "website footer",
      "footer links",
      "legal line",
      "sitemap links",
      "giant wordmark footer"
    ],
    "prominence": "low",
    "density": "medium",
    "worksAfter": [
      "cta"
    ],
    "worksBefore": [],
    "alternatives": [],
    "avoid": "Links to pages that do not exist."
  },
  "url": "https://mian.ro/components/site-footer",
  "markdownUrl": "https://mian.ro/ai/components/site-footer.md",
  "classes": [
    {
      "name": "mn-footer",
      "description": "The <footer>. Holds an mn-container."
    },
    {
      "name": "mn-footer-grid",
      "description": "Brand column plus link columns; --cols sets how many link columns (default 3)."
    },
    {
      "name": "mn-footer-brand",
      "description": "Logo and one sentence about the company."
    },
    {
      "name": "mn-footer-col",
      "description": "A column: an <h2> and a <ul> of links."
    },
    {
      "name": "mn-footer-legal",
      "description": "Copyright and legal links."
    },
    {
      "name": "mn-footer-wordmark",
      "description": "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": [
    {
      "title": "Footer",
      "description": null,
      "html": "<footer class=\"mn-footer\"><div class=\"mn-container\">\n  <div class=\"mn-footer-grid\">\n    <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>\n    <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>\n    <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>\n    <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>\n  </div>\n  <p class=\"mn-footer-wordmark\" aria-hidden=\"true\">Ledger</p>\n  <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>\n</div></footer>"
    }
  ],
  "css": ".mn-footer { padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; border-top: var(--mn-border-w) solid var(--mn-border); font-size: .9375rem; }\n.mn-footer-grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }\n.mn-footer-brand { grid-column: 1 / -1; display: grid; gap: 1rem; align-content: start; max-width: 24rem; }\n.mn-footer-brand > * { margin: 0; }\n.mn-footer-brand p { color: var(--mn-muted); line-height: 1.6; }\n@container mn (min-width: 56rem) {\n  .mn-footer-grid { grid-template-columns: minmax(0, 2fr) repeat(var(--cols, 3), minmax(0, 1fr)); }\n  .mn-footer-brand { grid-column: auto; }\n}\n.mn-footer-col h2 { margin: 0 0 1rem; font: 600 .875rem/1.2 var(--mn-font); color: var(--mn-fg); letter-spacing: 0; }\n.mn-footer-col ul { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }\n.mn-footer-col a, .mn-footer-legal a { color: var(--mn-muted); text-decoration: none; transition: color var(--mn-duration) var(--mn-ease); }\n.mn-footer-col a:hover, .mn-footer-legal a:hover { color: var(--mn-fg); }\n.mn-footer-col a:focus-visible, .mn-footer-legal a:focus-visible { outline: none; box-shadow: var(--mn-focus); border-radius: 2px; }\n.mn-footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.5rem; border-top: var(--mn-border-w) solid var(--mn-border); color: var(--mn-muted); font-size: .8125rem; }\n.mn-footer-legal > * { margin: 0; }\n.mn-footer-legal ul { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }\n.mn-footer-wordmark { margin: clamp(2.5rem, 6vw, 4rem) 0 0; overflow: hidden; color: var(--mn-fg); font: var(--mn-heading-weight) clamp(3rem, 16cqi, 13rem)/.82 var(--mn-font-heading); letter-spacing: -.06em; white-space: nowrap; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/site-footer.json"
  }
}