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.

Block	Text	Background	Border
u-color-1	u-color-1-text	u-color-1-bg	u-color-1-border
u-color-2	u-color-2-text	u-color-2-bg	u-color-2-border
u-color-3	u-color-3-text	u-color-3-bg	u-color-3-border
u-color-4	u-color-4-text	u-color-4-bg	u-color-4-border
u-color-5	u-color-5-text	u-color-5-bg	u-color-5-border
u-color-6	u-color-6-text	u-color-6-bg	u-color-6-border
u-color-7	u-color-7-text	u-color-7-bg	u-color-7-border
u-color-8	u-color-8-text	u-color-8-bg	u-color-8-border
u-color-9	u-color-9-text	u-color-9-bg	u-color-9-border
u-color-10	u-color-10-text	u-color-10-bg	u-color-10-border
u-color-11	u-color-11-text	u-color-11-bg	u-color-11-border
u-color-12	u-color-12-text	u-color-12-bg	u-color-12-border
u-color-13	u-color-13-text	u-color-13-bg	u-color-13-border
u-color-14	u-color-14-text	u-color-14-bg	u-color-14-border
u-color-15	u-color-15-text	u-color-15-bg	u-color-15-border
u-color-16	u-color-16-text	u-color-16-bg	u-color-16-border
u-color-17	u-color-17-text	u-color-17-bg	u-color-17-border
u-color-18	u-color-18-text	u-color-18-bg	u-color-18-border
u-color-19	u-color-19-text	u-color-19-bg	u-color-19-border
u-color-20	u-color-20-text	u-color-20-bg	u-color-20-border
u-color-21	u-color-21-text	u-color-21-bg	u-color-21-border
u-color-22	u-color-22-text	u-color-22-bg	u-color-22-border
u-color-23	u-color-23-text	u-color-23-bg	u-color-23-border
u-color-24	u-color-24-text	u-color-24-bg	u-color-24-border
u-color-25	u-color-25-text	u-color-25-bg	u-color-25-border
u-color-26	u-color-26-text	u-color-26-bg	u-color-26-border
u-color-27	u-color-27-text	u-color-27-bg	u-color-27-border
u-color-28	u-color-28-text	u-color-28-bg	u-color-28-border
u-color-29	u-color-29-text	u-color-29-bg	u-color-29-border
u-color-30	u-color-30-text	u-color-30-bg	u-color-30-border
u-color-31	u-color-31-text	u-color-31-bg	u-color-31-border
u-color-32	u-color-32-text	u-color-32-bg	u-color-32-border
u-color-33	u-color-33-text	u-color-33-bg	u-color-33-border
u-color-34	u-color-34-text	u-color-34-bg	u-color-34-border
u-color-35	u-color-35-text	u-color-35-bg	u-color-35-border
u-color-36	u-color-36-text	u-color-36-bg	u-color-36-border
u-color-37	u-color-37-text	u-color-37-bg	u-color-37-border
u-color-38	u-color-38-text	u-color-38-bg	u-color-38-border
u-color-39	u-color-39-text	u-color-39-bg	u-color-39-border
u-color-40	u-color-40-text	u-color-40-bg	u-color-40-border
u-color-41	u-color-41-text	u-color-41-bg	u-color-41-border
u-color-42	u-color-42-text	u-color-42-bg	u-color-42-border
u-color-43	u-color-43-text	u-color-43-bg	u-color-43-border
u-color-44	u-color-44-text	u-color-44-bg	u-color-44-border
u-color-45	u-color-45-text	u-color-45-bg	u-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.

Status	Block	Text	Background	Border
Normal	u-normal	u-normal-text	u-normal-bg	u-normal-border
Hot	u-hot	u-hot-text	u-hot-bg	u-hot-border
Warning	u-warning	u-warning-text	u-warning-bg	u-warning-border
Danger	u-danger	u-danger-text	u-danger-bg	u-danger-border
Info	u-info	u-info-text	u-info-bg	u-info-border
Success	u-success	u-success-text	u-success-bg	u-success-border

Breadcrumb

General Color Utilities

General Utility Classes

Stateful Color Utilities

Stateful Utility Classes

Color and Status Modifiers

Breadcrumb

General Color Utilities

General Utility Classes

Stateful Color Utilities

Stateful Utility Classes