# Divider

La fine ligne qui sépare deux parties, lorsque l'espace seul ne suffit pas.

## Playground

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

## Quand l'utiliser

-   Entre les parties qui se touchent et qui ont besoin d'une frontière : le pied de page et la page, l'en-tête d'un tableau et ses lignes.

## Quand ne pas l'utiliser

-   **Entre sections de texte :** l'espace sépare déjà ; une ligne supplémentaire est du bruit.
-   **To mark an empty space:** that is the dashed line.

## Exemples

### Ligne fine et encre

La ligne fine, dans la couleur de la ligne, pour presque tout ; l'encre, pour une frontière forte, comme sous un en-tête de tableau.

Afficher le code

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

### Verticale

Entre des éléments côte à côte, de la hauteur de la ligne : ici il sépare un groupe d’actions des autres.

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

## Règles

-   Pas de marge de son propre : l'espace autour vient du Stack qui le contient.
-   1px, toujours ; jamais une bande épaisse.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-divider"`

sur le `<hr>`

La ligne fine.

`data-tone="ink"`

optionnel

La ligne encre, pour une frontière forte.