Cookie consent
A consent notice with equal-weight Accept and Reject, and per-purpose switches, honest by default, dismissible.
Consent
<section class="mn-consent" role="region" aria-label="Cookie choices">
<p><strong>Cookies on this site.</strong> We use necessary storage to keep you signed in. With your permission we also measure visits to improve pages. <a class="mn-link" href="#">Privacy notice</a></p>
<details class="mn-consent-options"><summary>Customise</summary>
<label class="mn-row"><input class="mn-switch" type="checkbox" role="switch" checked disabled> Necessary: always on</label>
<label class="mn-row"><input class="mn-switch" type="checkbox" role="switch"> Measurement</label>
<label class="mn-row"><input class="mn-switch" type="checkbox" role="switch"> Marketing</label>
</details>
<div class="mn-consent-actions"><button class="mn-btn mn-btn-outline" type="button" data-mn-dismiss=".mn-consent">Reject all</button><button class="mn-btn" type="button" data-mn-dismiss=".mn-consent">Accept all</button></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/cookie-consent.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-consent | The notice (a region). Add mn-consent-fixed to pin it to the bottom of the viewport. |
| mn-consent-actions | Reject and Accept with equal weight, then Customise. |
| mn-consent-options | A <details> with one switch per purpose; necessary is on and disabled. |
Accessibility
- It is a labelled region (role="region" with aria-label), not a modal: the page stays usable.
- Reject and Accept have the same size and weight; nothing is pre-ticked except strictly necessary storage.
- Buttons with data-mn-dismiss close it; store the choice and do not show it again.