# Divider · MIAN

A horizontal or vertical rule, optionally with a label.

- Id: `divider` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/divider
- Use for: separator, horizontal rule, or divider.

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

## Examples

### Labelled and vertical

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

## Source

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