Divider

Die feine Linie, die zwei Teile trennt, wenn allein der Platz nicht ausreicht.

Auf dieser Seite

Playground

Oben

Unten

Ton

Richtung

Hintergrund

HTML

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

Wann verwenden

Zwischen Teilen, die sich berühren und eine Grenze benötigen: dem Footer und der Seite, einer Tabellenüberschrift und ihren Zeilen.

Wann nicht verwenden

Zwischen Textabschnitten: Der Abstand trennt bereits; eine zusätzliche Linie ist Rauschen.
Um einen leeren Raum zu markieren: das ist die gestrichelte Linie.

Beispiele

Above

In the middle

Below

Haarlinie und Tinte

Die Haarlinie in der Linienfarbe für fast alles; die Tintenfür eine starke Grenze, wie unter einer Tabellenüberschrift.

Code anzeigen

HTML

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

Vertikal

Zwischen Teilen nebeneinander, so hoch wie die Zeile: hier trennt er eine Gruppe von Aktionen von den anderen.

Code anzeigen

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>

Regeln

Kein eigener Rand: Der Raum um ihn herum kommt vom Stack, der ihn enthält.
1px, immer; nie ein dickerer Streifen.

Attribute

Attribut	Werte	Zum Zweck
`class="feitio-divider"`	am `<hr>`	Die Haarlinie.
`data-tone="ink"`	optional	Die Tintelinie für eine starke Grenze.