# Pricing · MIAN

Plan tiers with a featured plan, feature lists and a monthly/yearly switch in pure CSS.

- Id: `pricing` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/pricing
- Use for: saas pricing, pricing plans, subscription tiers, monthly yearly toggle, compare plans, tickets.
- On a page: decision · prominence high · density medium. Usually after: testimonial, feature-grid. Usually before: faq, cta, comparison.
- Alternatives: price-list, comparison, radio-card.
- Avoid: More than four tiers, or hiding every price behind “Contact us”.

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-plans`: Wrapper for the billing switch and the tiers; the switch shows [data-period="monthly"] or [data-period="yearly"] prices inside it.
- `mn-billing`: A mn-toggle-group of two radio labels with value="monthly" and value="yearly".
- `mn-pricing`: The tiers: stacked, then one equal column per tier.
- `mn-tier`: One plan. Add mn-card for the surface. mn-tier-featured outlines the recommended one; mn-tier-badge labels it.
- `mn-tier-name · mn-tier-desc · mn-tier-action`: Plan name, who it is for, and a full-width button.
- `mn-price`: mn-price-amount and mn-price-period.

## Accessibility

- The billing switch is a real radio group inside a <fieldset> with a <legend> (visually hidden if you like).
- Hidden prices use display:none, so screen readers read only the current period.
- Say what “featured” means in text (the badge), not only with the outline.

## Examples

### Pricing

```html
<section class="mn-section mn-section-sm"><div class="mn-container mn-plans">
  <fieldset class="mn-toggle-group mn-billing" style="border:0;margin:0"><legend class="mn-sr-only">Billing period</legend>
    <label><input type="radio" name="billing-ex" value="monthly" checked>Monthly</label>
    <label><input type="radio" name="billing-ex" value="yearly">Yearly · 2 months free</label>
  </fieldset>
  <div class="mn-pricing">
    <article class="mn-card mn-tier"><h3 class="mn-tier-name">Starter</h3><p class="mn-tier-desc">One entity, up to 5 accounts.</p>
      <p class="mn-price"><span class="mn-price-amount"><span data-period="monthly">€49</span><span data-period="yearly">€41</span></span><span class="mn-price-period">per month</span></p>
      <a class="mn-btn mn-btn-outline mn-tier-action" href="#">Start free</a>
      <ul class="mn-checklist"><li>Nightly reconciliation</li><li>2 users</li><li class="mn-off"><span class="mn-sr-only">Not included: </span>Multi-entity</li></ul></article>
    <article class="mn-card mn-tier mn-tier-featured"><span class="mn-badge mn-tier-badge">Most teams</span><h3 class="mn-tier-name">Team</h3><p class="mn-tier-desc">Up to 5 entities and 50 accounts.</p>
      <p class="mn-price"><span class="mn-price-amount"><span data-period="monthly">€190</span><span data-period="yearly">€158</span></span><span class="mn-price-period">per month</span></p>
      <a class="mn-btn mn-tier-action" href="#">Start free</a>
      <ul class="mn-checklist"><li>Everything in Starter</li><li>Multi-entity and currency</li><li>10 users</li></ul></article>
    <article class="mn-card mn-tier"><h3 class="mn-tier-name">Scale</h3><p class="mn-tier-desc">Unlimited entities, SSO and an auditor seat.</p>
      <p class="mn-price"><span class="mn-price-amount">Custom</span></p>
      <a class="mn-btn mn-btn-outline mn-tier-action" href="#">Talk to us</a>
      <ul class="mn-checklist"><li>Everything in Team</li><li>SAML SSO and audit log export</li><li>Named support</li></ul></article>
  </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/pricing/source