Divider

A linha fina que separa duas partes, quando o espaço sozinho não basta.

Nesta página

Playground

Acima

Abaixo

Tom

Direção

Fundo

HTML

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

Quando usar

Entre partes que se tocam e precisam de um limite: o rodapé e a página, o cabeçalho de uma tabela e as linhas.

Quando não usar

Entre seções de texto: o espaço já separa; linha a mais é ruído.
Para marcar um espaço vazio: isso é o tracejado.

Exemplos

Acima

No meio

Abaixo

Fina e de tinta

A fina, na cor das linhas, para quase tudo; a de tinta, para um limite forte, como embaixo do cabeçalho de uma tabela.

Mostrar código

HTML

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

Vertical

Entre peças lado a lado, da altura da linha: aqui separa as ações de um grupo das outras.

Mostrar código

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>

Regras

Sem margem própria: o espaço em volta vem do Stack que a contém.
1px, sempre; nunca uma faixa grossa.

Atributos

Atributo	Valores	Para quê
`class="feitio-divider"`	no `<hr>`	A linha fina.
`data-tone="ink"`	opcional	A linha de tinta, para um limite forte.