Tag
Eine kurze Beschriftung für den Status eines Elements: pünktlich, verspätet, ausfallen.
Auf dieser Seite
Playground
Verspätet
Status
Größe
Hintergrund
<span class="feitio-tag"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg>Verspätet</span>Wann verwenden
- Für einen Elementstatus in einer Tabelle, einer Liste oder einem Überschriftsbereich.
Wann nicht verwenden
- Für etwas anklickbares: ein Tag ist weder Button noch Link.
- Aufmerksamkeit erregen ("Neu", "Hervorgehoben" überall): das ist der "lärmige".
- Für eine Benachrichtigung: Notice.
Beispiele
DraftOnlineLateDown
Vier
Neutral, success, warning und error, immer mit dem Rahmen darum, damit es auf einem schwachen Monitor nicht verschwindet. Nie orange, immer mit Icon und Wort.
Code anzeigen
<span class="feitio-tag" data-status="warn">
<svg class="feitio-icon" aria-hidden="true">…</svg>Atrasado
</span>Reactsoon
Klein
Neben einem Namen in einer Liste oder im Menü, wenn die reguläre Größe zu schwer wäre: das "soon" dieser Seite in der Navigation ist eins.
Code anzeigen
<span class="feitio-tag" data-size="small">em breve</span>Do and don't
Do
Late
Eins Wort, mit Icon: von weitem lesbar und ohne Farbe.
Don’t
Zu spät
Orange, alle Großbuchstaben, eine perfekte Kapsel und kein Icon.
Schreiben
- Eins oder zwei Wörter, ein Adjektiv oder ein Zustand ("Pünktlich", "Zu spät").
Barrierefreiheit
- Das Wort ist der Status; das Icon geht mit (
aria-hidden).
Attribute
| Attribut | Werte | Zum Zweck |
|---|---|---|
class="feitio-tag" | erforderlich | Der Tag. |
data-status | none, "ok", "warn", "error" | Neutral (keine Attribute), success, warning oder error. |
data-size="small" | optional | Der kleine, neben einem Namen in einer Liste. |