Typography
Headings
Desktop | Mobile | CSS Class |
---|---|---|
Heading 1
| Heading 1
| .h1 |
Heading 2
| Heading 2
| .h2 |
Heading 3
| Heading 3
| .h3 |
Heading 4
| Heading 4
| .h4 |
Heading 5
| Heading 5
| .h5 |
Heading 6
| Heading 6
| .h6 |
Heading Label
| Heading Label
| .heading-label |
Body
Desktop & Mobile | CSS Class |
---|---|
Large Body
| .lead |
Body
| |
Small Body
| .small |
Extra Small Body
| .x-small |
Micro Body
| .micro |
Display
Desktop | Mobile | CSS Class |
---|---|---|
Display 1
| Display 1
| .display-1 |
Display 2
| Display 2
| .display-2 |
Display 3
| Display 3
| .display-3 |
Display 4
| Display 4
| .display-4 |
Links
Example | Description |
---|---|
An inline link in a sentence. | For links inside a |
| |
An muted, inline link in a sentence. | For |
Decoration and Emphasis
Style | CSS Class |
---|---|
Lowercase text. | .text-lowercase |
uppercase text. | .text-uppercase |
capitalize text. | .text-capitalize |
No decorations. | .text-decoration-none |
Italic text. | .font-italic |
Bold text. | .font-weight-bold |
Regular text. | .font-weight-normal |
Alignment
Style | CSS Class |
---|---|
left text. | .text-left |
right text. | .text-right |
center text. | .text-center |
The text-justify class specifies the justification method of text. This text-justify class spreads the words into the complete line with equal spaces. | .text-justify |
Use text-wrap to cause text to wrap normally within an element. Newlines and spaces will be collapsed. | .text-wrap |
Use text-nowrap to prevent text from wrapping within an element. Newlines and spaces will be collapsed. You can prevent line breaks and text wrapping for specific elements | .text-nowrap |