# Divider

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

## Playground

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

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