Color Utilities
Text Color
Utility | Example |
---|---|
text-blue | The quick brown fox jumped over the lazy dog. |
text-indigo | The quick brown fox jumped over the lazy dog. |
text-purple | The quick brown fox jumped over the lazy dog. |
text-pink | The quick brown fox jumped over the lazy dog. |
text-red | The quick brown fox jumped over the lazy dog. |
text-orange | The quick brown fox jumped over the lazy dog. |
text-yellow | The quick brown fox jumped over the lazy dog. |
text-green | The quick brown fox jumped over the lazy dog. |
text-teal | The quick brown fox jumped over the lazy dog. |
text-cyan | The quick brown fox jumped over the lazy dog. |
text-primary | The quick brown fox jumped over the lazy dog. |
text-secondary | The quick brown fox jumped over the lazy dog. |
text-success | The quick brown fox jumped over the lazy dog. |
text-info | The quick brown fox jumped over the lazy dog. |
text-warning | The quick brown fox jumped over the lazy dog. |
text-danger | The quick brown fox jumped over the lazy dog. |
text-dark | The quick brown fox jumped over the lazy dog. |
text-light | The quick brown fox jumped over the lazy dog. |
text-muted | The quick brown fox jumped over the lazy dog. |
text-white | The quick brown fox jumped over the lazy dog. |
text-black-50 | The quick brown fox jumped over the lazy dog. |
text-white-50 | The quick brown fox jumped over the lazy dog. |
text-reset | The quick brown fox jumped over the lazy dog. This sets `color: inherit !important`. |
Copied!
<div class="text-blue" href="#1"></div>
<div class="text-indigo" href="#1"></div>
<div class="text-purple" href="#1"></div>
<div class="text-pink" href="#1"></div>
<div class="text-red" href="#1"></div>
<div class="text-orange" href="#1"></div>
<div class="text-yellow" href="#1"></div>
<div class="text-green" href="#1"></div>
<div class="text-teal" href="#1"></div>
<div class="text-cyan" href="#1"></div>
<div class="text-primary"></div>
<div class="text-secondary"></div>
<div class="text-success"></div>
<div class="text-info"></div>
<div class="text-warning"></div>
<div class="text-danger"></div>
<div class="text-dark"></div>
<div class="text-light"></div>
<div class="text-muted"></div>
<div class="text-white"></div>
<div class="text-black-50"></div>
<div class="text-white-50"></div>
<div class="text-reset"></div>
Link Color
Text color utilities applied to anchor tags. These styles will only be output if a text color has hover
state styles.
Utility | Example |
---|---|
text-blue | Link to Somewhere |
text-indigo | Link to Somewhere |
text-purple | Link to Somewhere |
text-pink | Link to Somewhere |
text-red | Link to Somewhere |
text-orange | Link to Somewhere |
text-yellow | Link to Somewhere |
text-green | Link to Somewhere |
text-teal | Link to Somewhere |
text-cyan | Link to Somewhere |
text-primary | Link to Somewhere |
text-secondary | Link to Somewhere |
text-success | Link to Somewhere |
text-info | Link to Somewhere |
text-warning | Link to Somewhere |
text-danger | Link to Somewhere |
text-dark | Link to Somewhere |
text-light | Link to Somewhere |
text-muted | Link to Somewhere |
text-white | Link to Somewhere |
text-black-50 | Link to Somewhere |
text-white-50 | Link to Somewhere |
Copied!
<a class="text-blue" href="#1"></a>
<a class="text-indigo" href="#1"></a>
<a class="text-purple" href="#1"></a>
<a class="text-pink" href="#1"></a>
<a class="text-red" href="#1"></a>
<a class="text-orange" href="#1"></a>
<a class="text-yellow" href="#1"></a>
<a class="text-green" href="#1"></a>
<a class="text-teal" href="#1"></a>
<a class="text-cyan" href="#1"></a>
<a class="text-primary" href="#1"></a>
<a class="text-secondary" href="#1"></a>
<a class="text-success" href="#1"></a>
<a class="text-info" href="#1"></a>
<a class="text-warning" href="#1"></a>
<a class="text-danger" href="#1"></a>
<a class="text-dark" href="#1"></a>
<a class="text-light" href="#1"></a>
<a class="text-muted" href="#1"></a>
<a class="text-white" href="#1"></a>
<a class="text-black-50" href="#1"></a>
<a class="text-white-50" href="#1"></a>
Text Color Sass API
The map $text-theme-colors
allows generating any number of text color variants. If a key starts with .
, #
or %
, Clay will output it as is, otherwise we will prepend .text-
to the key (e.g., .text-primary
).
Copied!
$text-theme-colors: (
'primary': (
color: $primary !important,
),
'%text-tertiary': (
color: green !important,
),
'.text-tertiary': (
extend: '%text-tertiary',
),
'.text-quaternary': (
extend: '%text-tertiary',
),
);
Outputs:
Copied!
.text-primary {
color: #0b5fff !important;
}
.text-tertiary, .text-quaternary {
color: green !important;
}
Background Color
Utility | Example |
---|---|
bg-blue | The quick brown fox jumped over the lazy dog. |
bg-indigo | The quick brown fox jumped over the lazy dog. |
bg-purple | The quick brown fox jumped over the lazy dog. |
bg-pink | The quick brown fox jumped over the lazy dog. |
bg-red | The quick brown fox jumped over the lazy dog. |
bg-orange | The quick brown fox jumped over the lazy dog. |
bg-yellow | The quick brown fox jumped over the lazy dog. |
bg-green | The quick brown fox jumped over the lazy dog. |
bg-teal | The quick brown fox jumped over the lazy dog. |
bg-cyan | The quick brown fox jumped over the lazy dog. |
bg-primary | The quick brown fox jumped over the lazy dog. |
bg-secondary | The quick brown fox jumped over the lazy dog. |
bg-success | The quick brown fox jumped over the lazy dog. |
bg-info | The quick brown fox jumped over the lazy dog. |
bg-warning | The quick brown fox jumped over the lazy dog. |
bg-danger | The quick brown fox jumped over the lazy dog. |
bg-dark | The quick brown fox jumped over the lazy dog. |
bg-light | The quick brown fox jumped over the lazy dog. |
bg-white | The quick brown fox jumped over the lazy dog. |
bg-transparent | The quick brown fox jumped over the lazy dog. |
Copied!
<div class="bg-blue"></div>
<div class="bg-indigo"></div>
<div class="bg-purple"></div>
<div class="bg-pink"></div>
<div class="bg-red"></div>
<div class="bg-orange"></div>
<div class="bg-yellow"></div>
<div class="bg-green"></div>
<div class="bg-teal"></div>
<div class="bg-cyan"></div>
<div class="bg-primary"></div>
<div class="bg-secondary"></div>
<div class="bg-success"></div>
<div class="bg-info"></div>
<div class="bg-warning"></div>
<div class="bg-danger"></div>
<div class="bg-dark"></div>
<div class="bg-light"></div>
<div class="bg-white"></div>
<div class="bg-transparent"></div>
Background Color Sass API
The map $bg-theme-colors
allows generating any number of background color variants. If a key starts with .
, #
or %
, Clay will output it as is, otherwise we will prepend .bg-
to the key (e.g., .bg-primary
).
Copied!
$bg-theme-colors: (
'primary': (
background-color: $primary !important,
),
'%bg-tertiary': (
background-color: green !important,
),
'.bg-tertiary': (
extend: '%bg-tertiary',
),
'.bg-quaternary': (
extend: '%bg-tertiary',
),
);
Outputs:
Copied!
.bg-primary {
background-color: #0b5fff !important;
}
.bg-tertiary, .bg-quaternary {
background-color: green !important;
}