Typography
Headings
| Desktop | Mobile | CSS Class |
|---|---|---|
Heading 1 NaNpx / NaNpx | Heading 1 NaNpx / NaNpx | .h1 |
Heading 2 NaNpx / NaNpx | Heading 2 NaNpx / NaNpx | .h2 |
Heading 3 NaNpx / NaNpx | Heading 3 NaNpx / NaNpx | .h3 |
Heading 4 NaNpx / NaNpx | Heading 4 NaNpx / NaNpx | .h4 |
Heading 5 NaNpx / NaNpx | Heading 5 NaNpx / NaNpx | .h5 |
Heading 6 NaNpx / NaNpx | Heading 6 NaNpx / NaNpx | .h6 |
Body
| Desktop & Mobile | CSS Class |
|---|---|
Large Body NaNpx / NaNpx | .lead |
Body NaNpx / NaNpx | |
Small Body NaNpx / NaNpx | .small |
Extra Small Body NaNpx / NaNpx | .x-small |
Micro Body NaNpx / NaNpx | .micro |
Display
| Desktop | Mobile | CSS Class |
|---|---|---|
Display 1 NaNpx / NaNpx | Display 1 NaNpx / NaNpx | .display-1 |
Display 2 NaNpx / NaNpx | Display 2 NaNpx / NaNpx | .display-2 |
Display 3 NaNpx / NaNpx | Display 3 NaNpx / NaNpx | .display-3 |
Display 4 NaNpx / NaNpx | Display 4 NaNpx / NaNpx | .display-4 |
Links
| Example | Description |
|---|---|
The default style for | |
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 |