HTML headings Default
All HTML headings, are available. .h1 through .h7 classes are also available, for when you want to match the font styling of a heading.
PREVIEWFONT SIZE
Heading 1
60pxHeading 2
48pxHeading 3
36pxHeading 4
30pxHeading 5
24pxHeading 6
20pxLight / Bold Headings
All HTML headings are available with light and bold font-weight. Use .font-weight-normal for light heading and .
LIGHT HEADINGSBOLD HEADINGS
Heading
Heading
Heading 2
Heading 2
Heading 3
Heading 3
Heading 4
Heading 4
Heading 5
Heading 5
Heading 6
Heading 6
Texts
| Type | Class | Text |
|---|---|---|
| Title | text-lg | Cupcake ipsum dolor sit amet fruitcake donut chocolate. font-size: 18px / line-height: 28px / font-weight: 500 |
| Sub Title | text-base | Cupcake ipsum dolor sit amet fruitcake donut chocolate. font-size: 16px / line-height: 24px / font-weight: 400 |
| Body Text | text-sm | Cupcake ipsum dolor sit amet fruitcake donut chocolate. font-size: 14px / line-height: 20px / font-weight: 400 |
| Small Text | text-xs | Cupcake ipsum dolor sit amet fruitcake donut chocolate. font-size: 12px / line-height: 18px / font-weight: 400 |
Customizing headings Default
Use the included utility classes to recreate the small secondary-500 heading text.
Display heading
Display heading
Display heading
Display heading
Display heading
Display heading
Heading colors
Use the included utility classes to recreate the small secondary-500 heading text.
Display heading
Display heading
Display heading
Display heading
Display heading
Display heading
Display Headings
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
Display 1
Display 2
Display 3
Display 4
Inline Text Elements
Styling for common inline HTML5 elements.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as an addition to the
This line of text is meant to be treated as deleted text.
Text Color
Styling for common inline HTML5 elements.
Styling for common inline HTML5 elements.
Styling for common inline HTML5 elements.
This is warning-500 text You can archive this adding .text-warning-500 class
This is danger-500 text You can archive this adding .text-danger-500 class
Listing Typography
Unorder list.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
list-decimal
Dash list
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
Icon List 1
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
Icon List 2
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
Icon List 3
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit amet.
Blockquotes
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus laudantium omnis fugit ducimus nulla libero temporibus corrupti non voluptatem harum?TheRightHand Admin Template
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus laudantium omnis fugit ducimus nulla libero temporibus corrupti non voluptatem harum?TheRightHand Admin Template
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus laudantium omnis fugit ducimus nulla libero temporibus corrupti non voluptatem harum?TheRightHand Admin Template