Divider
A horizontal or vertical rule, optionally with a label.
Labelled and vertical
or continue with
BlogDocsSource
<div style="max-width:24rem">
<button class="mn-btn mn-btn-outline mn-btn-block"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 19c-4 1.5-4-2-6-2.5m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1-.3-3.4 1.3a11.6 11.6 0 0 0-6 0C6.8 2.3 5.8 2.6 5.8 2.6a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4.4 9c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21"/></svg> Continue with GitHub</button>
<div class="mn-divider" role="separator">or continue with</div>
<button class="mn-btn mn-btn-block">Email</button>
</div>
<div class="mn-row" style="height:1.5rem">Blog<span class="mn-divider mn-divider-vertical"></span>Docs<span class="mn-divider mn-divider-vertical"></span>Source</div>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/divider.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-divider | Horizontal. Put text inside for a labelled divider. |
| mn-divider-vertical | Vertical, inside a flex row. |
Accessibility
- An empty <hr> is announced as a separator. A labelled divider is presentational; use role="separator" if it divides groups.