Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Color Utilities

  • Text Color
    • Link Color
    • Sass API
  • Background Color
    • Sass API

Text Color

Utility Example
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!
Code Sample (expand to see it)
<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-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!
Code Sample (expand to see it)
<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!
Code Sample (expand to see it)
$text-theme-colors: (
    'primary': (
        color: $primary !important,
    ),
    '%text-tertiary': (
        color: green !important,
    ),
    '.text-tertiary': (
        extend: '%text-tertiary',
    ),
    '.text-quaternary': (
        extend: '%text-tertiary',
    ),
);

Outputs:

Copied!
Code Sample (expand to see it)
.text-primary {
    color: #0b5fff !important;
}

.text-tertiary, .text-quaternary {
    color: green !important;
}

Background Color

Utility Example
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!
Code Sample (expand to see it)
<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!
Code Sample (expand to see it)
$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!
Code Sample (expand to see it)
.bg-primary {
    background-color: #0b5fff !important;
}

.bg-tertiary, .bg-quaternary {
    background-color: green !important;
}

How can this be improved? Create an issue!