Font sizes

Large text

Normal text

Small text

<p class="font-large">Large text</p>
<p>Normal text</p>
<p class="font-small">Small text</p>

Custom Headings

Title Heading

Small Heading

<h6 class="title-heading">Title Heading</h6>
<h6 class="sm-heading">Small Heading</h6>

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

<h1>H1 Heading</h1>
<h2>H2 Heading</h1>
<h3>H3 Heading</h1>
<h4>H4 Heading</h1>
<h5>H5 Heading</h1>
<h6>H6 Heading</h1>

Stroke Text

Stroke Text

<h1 class="display-3 fw-bold stroke-text">Stroke Text</h1>

Display Headings

Display 1 Heading

Display 2 Heading

Display 3 Heading

Display 4 Heading

Display 5 Heading

Display 6 Heading

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

Font Icon sizes

<div class="d-inline-block me-2 icon-4xl">
  <i class="bi bi-star"></i>
</div>
<div class="d-inline-block me-2 icon-3xl">
  <i class="bi bi-star"></i>
</div>
<div class="d-inline-block me-2 icon-2xl">
  <i class="bi bi-star"></i>
</div>
<div class="d-inline-block me-2 icon-xl">
  <i class="bi bi-star"></i>
</div>
<div class="d-inline-block me-2 icon-lg">
  <i class="bi bi-star"></i>
</div>
<div class="d-inline-block me-2">
  <i class="bi bi-star"></i>
</div>
<div class="d-inline-block me-2 icon-sm">
  <i class="bi bi-star"></i>
</div>