Skip to Main Content

Breadcrumb

General Color Utilities

While many components within Universal Theme automatically make use of these colors, you can use them in several custom components as well. Universal Theme provides a number of CSS utility classes that can be used to apply this color palette to any HTML markup.

General Utility Classes

BlockTextBackgroundBorder
u-color-1u-color-1-textu-color-1-bgu-color-1-border
u-color-2u-color-2-textu-color-2-bgu-color-2-border
u-color-3u-color-3-textu-color-3-bgu-color-3-border
u-color-4u-color-4-textu-color-4-bgu-color-4-border
u-color-5u-color-5-textu-color-5-bgu-color-5-border
u-color-6u-color-6-textu-color-6-bgu-color-6-border
u-color-7u-color-7-textu-color-7-bgu-color-7-border
u-color-8u-color-8-textu-color-8-bgu-color-8-border
u-color-9u-color-9-textu-color-9-bgu-color-9-border
u-color-10u-color-10-textu-color-10-bgu-color-10-border
u-color-11u-color-11-textu-color-11-bgu-color-11-border
u-color-12u-color-12-textu-color-12-bgu-color-12-border
u-color-13u-color-13-textu-color-13-bgu-color-13-border
u-color-14u-color-14-textu-color-14-bgu-color-14-border
u-color-15u-color-15-textu-color-15-bgu-color-15-border
u-color-16u-color-16-textu-color-16-bgu-color-16-border
u-color-17u-color-17-textu-color-17-bgu-color-17-border
u-color-18u-color-18-textu-color-18-bgu-color-18-border
u-color-19u-color-19-textu-color-19-bgu-color-19-border
u-color-20u-color-20-textu-color-20-bgu-color-20-border
u-color-21u-color-21-textu-color-21-bgu-color-21-border
u-color-22u-color-22-textu-color-22-bgu-color-22-border
u-color-23u-color-23-textu-color-23-bgu-color-23-border
u-color-24u-color-24-textu-color-24-bgu-color-24-border
u-color-25u-color-25-textu-color-25-bgu-color-25-border
u-color-26u-color-26-textu-color-26-bgu-color-26-border
u-color-27u-color-27-textu-color-27-bgu-color-27-border
u-color-28u-color-28-textu-color-28-bgu-color-28-border
u-color-29u-color-29-textu-color-29-bgu-color-29-border
u-color-30u-color-30-textu-color-30-bgu-color-30-border
u-color-31u-color-31-textu-color-31-bgu-color-31-border
u-color-32u-color-32-textu-color-32-bgu-color-32-border
u-color-33u-color-33-textu-color-33-bgu-color-33-border
u-color-34u-color-34-textu-color-34-bgu-color-34-border
u-color-35u-color-35-textu-color-35-bgu-color-35-border
u-color-36u-color-36-textu-color-36-bgu-color-36-border
u-color-37u-color-37-textu-color-37-bgu-color-37-border
u-color-38u-color-38-textu-color-38-bgu-color-38-border
u-color-39u-color-39-textu-color-39-bgu-color-39-border
u-color-40u-color-40-textu-color-40-bgu-color-40-border
u-color-41u-color-41-textu-color-41-bgu-color-41-border
u-color-42u-color-42-textu-color-42-bgu-color-42-border
u-color-43u-color-43-textu-color-43-bgu-color-43-border
u-color-44u-color-44-textu-color-44-bgu-color-44-border
u-color-45u-color-45-textu-color-45-bgu-color-45-border

Stateful Color Utilities

Universal Theme provides 6 stateful colors: normal, hot, informational, danger, warning, and success. Here are the CSS modifier classes you can use to apply these states to your own UI controls.

Stateful Utility Classes

StatusBlockTextBackgroundBorder
Normalu-normalu-normal-textu-normal-bgu-normal-border
Hotu-hotu-hot-textu-hot-bgu-hot-border
Warningu-warningu-warning-textu-warning-bgu-warning-border
Dangeru-dangeru-danger-textu-danger-bgu-danger-border
Infou-infou-info-textu-info-bgu-info-border
Successu-successu-success-textu-success-bgu-success-border