Divider

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

Sur cette page

Playground

Au-dessus

En dessous

Ton

Direction

Fond

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

Above

In the middle

Below

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.