• Components
  • Typography
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

60px

Heading 2

48px

Heading 3

36px

Heading 4

30px
Heading 5
24px
Heading 6
20px
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

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

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
  1. Lorem ipsum dolor sit amet.
    1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.
  4. Lorem ipsum dolor sit amet.
  5. Lorem ipsum dolor sit amet.
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? Dashcode Admin Template
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus laudantium omnis fugit ducimus nulla libero temporibus corrupti non voluptatem harum? Dashcode Admin Template
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus laudantium omnis fugit ducimus nulla libero temporibus corrupti non voluptatem harum? Dashcode Admin Template
COPYRIGHT © DashCode, All rights Reserved
Hand-crafted & Made by Codeshaper
10 Messages
2 Notifications