Swatch
Ein Farbproben mit einer Tintenlinie darum, neben dem Namen.
Auf dieser Seite
Playground
accentRolle
Hintergrund
<span class="feitio-inline" data-gap="2"><span class="feitio-swatch" style="--swatch: var(--feitio-color-accent)"></span><code>accent</code></span>Wann verwenden
- Um eine Farbe in der Dokumentation anzuzeigen: die Farbtöne, ein Token-Tabell.
Wann nicht verwenden
- Einen Status in einer Benutzeroberfläche anzeigen: das Tag, mit Symbol und Wort.
Beispiele
accentokwarnerrorNeben dem Namen
Die Probe ist so groß wie der Text und folgt dem Thema: sie wechselt von selbst von Tag zu Nacht.
Code anzeigen
<span class="feitio-swatch" style="--swatch: var(--feitio-color-accent)"></span><code>accent</code>Barrierefreiheit
- Die Probe geht mit (sie ist Dekoration); der Name der Farbe, neben ihr, ist das, was gelesen wird.
Attribute
| Attribut | Werte | Zum Zweck |
|---|---|---|
class="feitio-swatch" | erforderlich | Kleines Quadrat mit Tintenlinie. |
--swatch | eine Feitio-Farbe | Die Farbe der Probe. |