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.

PREVIEW FONT SIZE

Heading 1

36px

Heading 2

30px

Heading 3

24px

Heading 4

20px

Heading 5

18px

Heading 6

16px

Light / Bold Headings

All HTML headings are available with light and bold font-weight. Use .font-weight-normal for light heading and.

LIGHT HEADINGS BOLD HEADINGS

Heading

Heading 2

Heading 3

Heading 4

Heading 5

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

Heading colors

Use the included utility classes to recreate the small secondary-500 heading text.

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 document.

~~This line of text is meant to be treated as deleted text.~~

Text Color

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