Call to action
A closing band that asks for one thing, sign up, book, subscribe, with an optional inline email form.
Split call to action
Try this month’s close on Ledger.
Free for 30 days. Your data stays yours, and exports are one click.
<section class="mn-section mn-section-sm"><div class="mn-container">
<div class="mn-cta mn-cta-split">
<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>
<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>
</div>
</div></section>Newsletter
One good essay a week.
Field Notes arrives on Sunday morning. No tracking pixels.
<section class="mn-section mn-section-sm" data-mode="dark" style="background:var(--mn-bg)"><div class="mn-container">
<div class="mn-cta mn-cta-center mn-cta-plain">
<h2 class="mn-title">One good essay a week.</h2><p class="mn-intro">Field Notes arrives on Sunday morning. No tracking pixels.</p>
<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="[email protected]" required><button class="mn-btn mn-btn-lg">Subscribe</button></form>
</div>
</div></section>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/cta.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-cta | The band: muted surface, generous padding. mn-cta-center · mn-cta-split (text left, actions right) · mn-cta-plain (no box). |
| mn-hero-actions | Reuse for the buttons. |
| mn-subscribe | 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.