Text
Removes text decoration and prevents it from appearing on hover and focus. Use u-inherit-color to inherit text color from the parent.
Text Decoration
Usage
/* Format */
.u-no-decoration {}
/* Examples & modifiers */
.u-no-decoration--u-no-decoration {}
.u-no-decoration--u-inherit-color {}| Modifier | Values | Description |
|---|---|---|
|
default
|
u-no-decoration, u-inherit-color | Removes text decoration and prevents it from appearing on hover and focus. Use u-inherit-color to inherit text color from the parent. |
Preview
Preview
Text Appearance
Usage
/* Format */
.u-{style} {}
/* Examples & modifiers */
.u-bold {}
.u-strong {}
.u-italic {}| Modifier | Values | Description |
|---|---|---|
|
style
|
bold, strong, italic | Applies font weight or style to text. |
Preview
Preview
Text Flow
Usage
/* Format */
.u-{flow} {}
/* Examples & modifiers */
.u-nowrap {}
.u-truncate {}| Modifier | Values | Description |
|---|---|---|
|
flow
|
nowrap, truncate | Controls how text wraps or overflows its container. u-nowrap prevents wrapping, u-truncate clips text with an ellipsis. |
Preview
Preview
Text Size
Usage
/* Format */
.u-text-{size} {}
/* Examples & modifiers */
.u-text-small {}
.u-text-normal {}
.u-text-large {}
.u-text-xlarge {}| Modifier | Values | Description |
|---|---|---|
|
size
|
small, normal, large, xlarge | Sets relative text size as a percentage of the base font size. |
Preview
Preview
Text Transform
Usage
/* Format */
.u-text-{transform} {}
/* Examples & modifiers */
.u-text-uppercase {}
.u-text-lowercase {}
.u-text-capitalize {}| Modifier | Values | Description |
|---|---|---|
|
transform
|
uppercase, lowercase, capitalize | Transforms the case of text. |
Preview
Preview
Font Size
Usage
/* Format */
.u-font-size--{name} {}
/* Examples & modifiers */
.u-font-size--base {}
.u-font-size--lead {}
.u-font-size--caption {}
.u-font-size--marketing {}
.u-font-size--headline {}
.u-font-size--title {}
.u-font-size--subtitle {}
.u-font-size--subtitle-small {}
.u-font-size--meta {}
.u-font-size--brand {}| Modifier | Values | Description |
|---|---|---|
|
name
|
base, lead, caption, marketing, headline, title, subtitle, subtitle-small, meta, brand | Sets the font size using a named design token. |
Preview
Preview