# Divider

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

## Playground

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

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