Heading Utilities
Heading utilities should only be used on heading elements (h1-h6). Heading utilities group font size, font weight, color, and margin styles.
| Utility Class | Description |
|---|---|
| .h1 | Sets font-size to $font-size-h1, font-weight to $font-weight-regular, color to $font-color-primary, and margin-bottom to $space-md. |
| .h2 | Sets font-size to $font-size-h2, font-weight to $font-weight-semi-bold, color to $font-color-primary, and margin-bottom to $space-md. |
| .h3 | Sets font-size to $font-size-h3, font-weight to $font-weight-bold, color to $font-color-primary, and margin-bottom to $space-sm. |
| .h4 | Sets font-size to $font-size-h4, font-weight to $font-weight-semi-bold, color to $font-color-secondary, and margin-bottom to $space-sm. |
Text Style Utilities
Text style utilities group font size, font weight, and color styles.
| Utility Class | Description |
|---|---|
| .text-style-1 | Sets font-size to $font-size-xl, font-weight to $font-weight-regular, and color to $font-color-primary. |
| .text-style-2 | Sets font-size to $font-size-lg, font-weight to $font-weight-semi-bold, and color to $font-color-primary. |
| .text-style-3 | Sets font-size to $font-size-md, font-weight to $font-weight-bold, and color to $font-color-primary. |
| .text-style-4 | Sets font-size to $font-size-md, font-weight to $font-weight-semi-bold, and color to $font-color-secondary. |
| .text-style-muted-1 | Sets font-weight to $font-weight-regular, and color to $font-color-secondary. |
| .text-style-muted-2 | Sets font-weight to $font-weight-regular, font-style to italic, and color to $font-color-secondary. |
| .text-style-muted-3 | Sets font-weight to $font-weight-semi-bold, and color to $font-color-secondary. |
Font Size Utilities
| Utility Class | Description |
|---|---|
| .font-size-xl | Sets font-size to $font-size-xl. |
| .font-size-lg | Sets font-size to $font-size-lg. |
| .font-size-md | Sets font-size to $font-size-md. |
| .font-size-sm | Sets font-size to $font-size-sm. |
| .font-size-body-lead | Sets font-size to $font-size-body-lead. |
| .font-size-body | Sets font-size to $font-size-body. |
Font Weight Utilities
| Utility Class | Description |
|---|---|
| .font-weight-regular | Sets font-weight to $font-weight-regular. |
| .font-weight-semi-bold | Sets font-weight to $font-weight-semi-bold. |
| .font-weight-bold | Sets font-weight to $font-weight-bold. |
Font Style Utilities
| Utility Class | Description |
|---|---|
| .font-style-normal | Sets font-style to $font-style-normal. |
| .font-style-italic | Sets font-style to $font-style-italic. |
Text Transformation Utilities
| Utility Class | Description |
|---|---|
| .text-transform-lowercase | Sets text-transform to lowercase. |
| .text-transform-capitalize | Sets text-transform to capitalize. |
| .text-transform-uppercase | Sets text-transform to uppercase. |
Text Decoration Utilities
| Utility Class | Description |
|---|---|
| .text-decoration-none | Sets text-decoration to none. |
| .text-decoration-underline | Sets text-decoration to underline. |
Text Alignment Utilities
| Utility Class | Description |
|---|---|
| .text-align-left | Sets text-align to left. |
| .text-align-center | Sets text-align to center. |
| .text-align-right | Sets text-align to right. |
Text Wrapping Utilities
| Utility Class | Description |
|---|---|
| .text-nowrap | Sets white-space to nowrap. |
| .text-wrap | Sets white-space to normal. |
| .text-break | Sets word-break to break-all, word-break to break-word, and overflow-wrap to break-word. |