# Divider

The hairline that separates two parts, when space alone is not enough.

## Playground

```html
<div class="feitio-stack" data-gap="3" style="inline-size: min(100%, 24rem)"><span>Above</span><hr class="feitio-divider"><span>Below</span></div>
```

## When to use

-   Between parts that touch and need a boundary: the footer and the page, a table header and its rows.

## When not to use

-   **Between text sections:** space already separates; an extra line is noise.
-   **To mark an empty space:** that is the dashed line.

## Examples

### Hairline and ink

The hairline, in the line color, for almost everything; the ink one, for a strong boundary, like under a table header.

Show code

```html
<hr class="feitio-divider">
<hr class="feitio-divider" data-tone="ink">
```

### Vertical

Between pieces side by side, as tall as the row: here it separates one group of actions from the others.

Show code

```html
<div class="feitio-inline" data-gap="3">
  <button type="button" class="feitio-button" data-size="small">Editar</button>
  <button type="button" class="feitio-button" data-size="small">Duplicar</button>
  <hr class="feitio-divider" aria-orientation="vertical">
  <button type="button" class="feitio-button" data-size="small" data-variant="danger">Apagar</button>
</div>
```

## Rules

-   No margin of its own: the space around it comes from the Stack containing it.
-   1px, always; never a thick band.

## Attributes

Attribute

Values

What for

`class="feitio-divider"`

on the `<hr>`

The hairline.

`data-tone="ink"`

optional

The ink line, for a strong boundary.