Swatch
A sample of a color, with the ink line around it, next to its name.
On this page
Playground
accentRole
Background
<span class="feitio-inline" data-gap="2"><span class="feitio-swatch" style="--swatch: var(--feitio-color-accent)"></span><code>accent</code></span>When to use
- To show a color in documentation: the color roles, a token table.
When not to use
- To tell a status in an interface: the Tag, with icon and word.
Examples
accentokwarnerrorNext to the name
The sample is the size of the text and follows the theme: it changes on its own from day to night.
Show code
<span class="feitio-swatch" style="--swatch: var(--feitio-color-accent)"></span><code>accent</code>Accessibility
- The sample goes along (it is decoration); the color’s name, next to it, is what gets read.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-swatch" | required | The little square with the ink line. |
--swatch | a Feitio color | The sample’s color. |