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 |
Heading Label NaNpx / NaNpx A heading label is usually paired with and proceeds a Heading. | .heading-label | |
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 | ||
| Standalone Link | The default style for a tags that don't appear in a p tag. | |
An inline link in a sentence. | For links inside a p or with the .inline-link class name. | |
| Muted, Standalone Link | .muted-link not in a p tag. | |
An muted, inline link in a sentence. | For .muted-link links inside a p or with the .inline-link class name. | |
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. | .text-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 |
justify text. At the edge of forever tendrils of gossamer clouds corpus callosum culture Vangelis dispassionate extraterrestrial observer. | .text-justify |
wrap text. | .text-wrap |
nowrap text. | .text-nowrap |