Color
Applies given color as background
Colors Bg
Usage
/* Format */
.u-color__bg--{color} {}
/* Examples & modifiers */
.u-color__bg--primary {}
.u-color__bg--primary-contrast {}
.u-color__bg--secondary {}
.u-color__bg--secondary-contrast {}
.u-color__bg--success {}
.u-color__bg--success-contrast {}
.u-color__bg--danger {}
.u-color__bg--danger-contrast {}
.u-color__bg--info {}
.u-color__bg--warning {}
.u-color__bg--warning-contrast {}
.u-color__bg--transparent {}
.u-color__bg--surface {}
.u-color__bg--surface-contrast {}| Modifier | Values | Description |
|---|---|---|
|
color
|
primary, primary-contrast, secondary, secondary-contrast, success, success-contrast, danger, danger-contrast, info, warning, warning-contrast, transparent, surface, surface-contrast | Applies given color as background |
Preview
Preview
Colors Text
Usage
/* Format */
.u-color__text--{color} {}
/* Examples & modifiers */
.u-color__text--primary {}
.u-color__text--primary-contrast {}
.u-color__text--secondary {}
.u-color__text--secondary-contrast {}
.u-color__text--success {}
.u-color__text--success-contrast {}
.u-color__text--danger {}
.u-color__text--danger-contrast {}
.u-color__text--info {}
.u-color__text--warning {}
.u-color__text--warning-contrast {}
.u-color__text--transparent {}
.u-color__text--surface {}
.u-color__text--surface-contrast {}
.u-color__text--surface-border {}| Modifier | Values | Description |
|---|---|---|
|
color
|
primary, primary-contrast, secondary, secondary-contrast, success, success-contrast, danger, danger-contrast, info, warning, warning-contrast, transparent, surface, surface-contrast, surface-border | Applies given color as text color |
Preview
Preview
Colors Border
Usage
/* Format */
.u-color__border--{color} {}
/* Examples & modifiers */
.u-color__border--primary {}
.u-color__border--secondary {}
.u-color__border--success {}
.u-color__border--danger {}
.u-color__border--info {}
.u-color__border--warning {}
.u-color__border--surface {}| Modifier | Values | Description |
|---|---|---|
|
color
|
primary, secondary, success, danger, info, warning, surface | Applies given border color |
Preview
Preview
Colors
Usage
/* Format */
.u-color--{color} {}
/* Examples & modifiers */
.u-color--primary {}
.u-color--secondary {}
.u-color--success {}
.u-color--danger {}
.u-color--info {}
.u-color--warning {}
.u-color--surface {}| Modifier | Values | Description |
|---|---|---|
|
color
|
primary, secondary, success, danger, info, warning, surface | Applies synchronized text, background and border color |
Preview
Preview