Swatch

Un échantillon d'une couleur, avec une ligne de texte autour, à côté de son nom.

Sur cette page

Playground

accent

Rôle

Fond

HTML

<span class="feitio-inline" data-gap="2"><span class="feitio-swatch" style="--swatch: var(--feitio-color-accent)"></span><code>accent</code></span>

Pour afficher une couleur dans la documentation : les rôles de couleurs, un tableau de jetons.

Pour indiquer un statut dans une interface : l'étiquette, avec icône et mot.

accentokwarnerror

L'échantillon est de la taille du texte et suit le thème : il change tout seul de jour en nuit.

Afficher le code

HTML

<span class="feitio-swatch" style="--swatch: var(--feitio-color-accent)"></span><code>accent</code>

L'échantillon va de pair (il est décoratif) ; le nom de la couleur, à côté, est ce qui se lit.

Attribut	Valeurs	Pour quoi
`class="feitio-swatch"`	obligatoire	Le petit carré avec la ligne d'encre.
`--swatch`	une couleur Feitio	La couleur de l'échantillon.