Divider

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

On this page

Playground

Above

Below

Tone

Direction

Background

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

Above

In the middle

Below

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.