# Call to action · MIAN

A closing band that asks for one thing, sign up, book, subscribe, with an optional inline email form.

- Id: `cta` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/cta
- Use for: call to action, sign up band, newsletter signup, book a demo, final section, contact prompt.
- On a page: closing · prominence high · density low. Usually after: faq, pricing, testimonial. Usually before: site-footer.
- Alternatives: contact-section.
- Avoid: A CTA band after every section. Once, near the end, asking for the same action as the hero.

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-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.

## Examples

### Split call to action

```html
<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

```html
<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="you@example.com" required><button class="mn-btn mn-btn-lg">Subscribe</button></form>
  </div>
</div></section>
```

## Source

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