{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "cta",
  "name": "Call to action",
  "category": "Sections",
  "description": "A closing band that asks for one thing, sign up, book, subscribe, with an optional inline email form.",
  "tags": [
    "cta",
    "call to action",
    "banner",
    "signup",
    "newsletter",
    "subscribe",
    "email capture",
    "conversion"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "closing",
    "intents": [
      "call to action",
      "sign up band",
      "newsletter signup",
      "book a demo",
      "final section",
      "contact prompt"
    ],
    "prominence": "high",
    "density": "low",
    "worksAfter": [
      "faq",
      "pricing",
      "testimonial"
    ],
    "worksBefore": [
      "site-footer"
    ],
    "alternatives": [
      "contact-section"
    ],
    "avoid": "A CTA band after every section. Once, near the end, asking for the same action as the hero."
  },
  "url": "https://mian.ro/components/cta",
  "markdownUrl": "https://mian.ro/ai/components/cta.md",
  "classes": [
    {
      "name": "mn-cta",
      "description": "The band: muted surface, generous padding. mn-cta-center · mn-cta-split (text left, actions right) · mn-cta-plain (no box)."
    },
    {
      "name": "mn-hero-actions",
      "description": "Reuse for the buttons."
    },
    {
      "name": "mn-subscribe",
      "description": "An inline email field and button that wraps on narrow screens."
    }
  ],
  "accessibility": [
    "The email field needs a label (visually hidden is fine) and type=\"email\" autocomplete=\"email\".",
    "Say what happens after signing up and how often you will write.",
    "For a dark band, set data-mode=\"dark\" on the section instead of inverting colours by hand."
  ],
  "examples": [
    {
      "title": "Split call to action",
      "description": null,
      "html": "<section class=\"mn-section mn-section-sm\"><div class=\"mn-container\">\n  <div class=\"mn-cta mn-cta-split\">\n    <div><h2 class=\"mn-title\">Try this month’s close on Ledger.</h2><p class=\"mn-intro\">Free for 30 days. Your data stays yours, and exports are one click.</p></div>\n    <div class=\"mn-hero-actions\"><a class=\"mn-btn mn-btn-lg\" href=\"#\">Start free</a><a class=\"mn-btn mn-btn-lg mn-btn-ghost\" href=\"#\">Book a demo</a></div>\n  </div>\n</div></section>"
    },
    {
      "title": "Newsletter",
      "description": null,
      "html": "<section class=\"mn-section mn-section-sm\" data-mode=\"dark\" style=\"background:var(--mn-bg)\"><div class=\"mn-container\">\n  <div class=\"mn-cta mn-cta-center mn-cta-plain\">\n    <h2 class=\"mn-title\">One good essay a week.</h2><p class=\"mn-intro\">Field Notes arrives on Sunday morning. No tracking pixels.</p>\n    <form class=\"mn-subscribe\" action=\"#\"><label class=\"mn-sr-only\" for=\"sub-ex\">Email</label><input class=\"mn-input mn-input-lg\" id=\"sub-ex\" type=\"email\" autocomplete=\"email\" placeholder=\"you@example.com\" required><button class=\"mn-btn mn-btn-lg\">Subscribe</button></form>\n  </div>\n</div></section>"
    }
  ],
  "css": ".mn-cta { display: grid; gap: 1.5rem; justify-items: start; padding: clamp(2.25rem, 6cqi, 5rem); border-radius: var(--mn-radius-box); background-color: var(--mn-surface-2); color: var(--mn-fg); }\n.mn-cta > *, .mn-cta > div > * { margin: 0; }\n.mn-cta > div { display: grid; gap: 1rem; }\n.mn-cta-plain { padding-inline: 0; background: none; border-radius: 0; }\n.mn-cta-center { justify-items: center; text-align: center; }\n.mn-cta-center .mn-hero-actions { justify-content: center; }\n@container mn (min-width: 52rem) { .mn-cta-split { grid-template-columns: minmax(0, 1.4fr) auto; align-items: end; column-gap: 3rem; } }\n.mn-subscribe { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; max-width: 28rem; }\n.mn-subscribe > .mn-input { flex: 1 1 13rem; min-width: 0; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/cta.json"
  }
}