Headings

(h1) Heading

(h2) Heading

(h3) Heading

(h4) Heading

(h5) Heading

(h6) Heading


<h1>(h1) Heading</h1>
<h2>(h2) Heading</h2>
<h3>(h3) Heading</h3>
<h4>(h4) Heading</h4>
<h5>(h5) Heading</h5>
<h6>(h6) Heading</h6>

Display Headings

Display 1

Display 2

Display 3

Display 4


<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Font Families & Weights

Open Sans - Extra bold

Open Sans - Bold

Open Sans - Semi Bold

Open Sans - Normal

Open Sans - Light


<p class="font-weight-extra-bold">Open Sans - Extra bold</p>
<p class="font-weight-bold">Open Sans - Bold</p>
<p class="font-weight-semi-bold">Open Sans - Semi Bold</p>
<p class="font-weight-normal">Open Sans - Normal</p>
<p class="font-weight-light">Open Sans - Light</p>

Playfair - Black

Playfair - Bold

Playfair - Normal


<p class="font-family-secondary font-weight-black">Playfair - Black</p>
<p class="font-family-secondary font-weight-bold">Playfair - Bold</p>
<p class="font-family-secondary font-weight-normal">Playfair - Normal</p>

Poppins - Black

Poppins - Extra bold

Poppins - Bold

Poppins - Semi Bold

Poppins - Medium

Poppins - Normal

Poppins - Light

Poppins - Extra Light

Poppins - Thin


<p class="font-family-tertiary font-weight-black">Poppins - Black</p>
<p class="font-family-tertiary font-weight-extra-bold">Poppins - Extra bold</p>
<p class="font-family-tertiary font-weight-bold">Poppins - Bold</p>
<p class="font-family-tertiary font-weight-semi-bold">Poppins - Semi Bold</p>
<p class="font-family-tertiary font-weight-medium">Poppins - Medium</p>
<p class="font-family-tertiary font-weight-normal">Poppins - Normal</p>
<p class="font-family-tertiary font-weight-light">Poppins - Light</p>
<p class="font-family-tertiary font-weight-extra-light">Poppins - Extra Light</p>
<p class="font-family-tertiary font-weight-thin">Poppins - Thin</p>

Font Sizes

Large text (17px)

Regular text (15px)

Small text (13px)


<p class="font-large">Large text (17px)</p>
<p>Regular text (15px)</p>
<p class="font-small">Small text (15px)</p>

Text Decorations

Overline

Line-through

Underline

Underline Overline


<p class="text-decoration-overline">Overline</p>
<p class="text-decoration-line-through">Line-through</p>
<p class="text-decoration-underline">Underline</p>
<p class="text-decoration-underline-overline">Underline Overline</p>

Typography