Typography
Open Sans
Outfit
Lora
Poppins
View Example's Code
<h2 class="font-family-primary">Open Sans</h2>
<h2 class="font-family-secondary">Outfit</h2>
<h2 class="font-family-tertiary">Lora</h2>
<h2 class="font-family-poppins">Poppins</h2>
.font-large
.font-small
.sm-heading
View Example's Code
<p class="font-large">.font-large</p>
<p class="font-small">.font-small</p>
<p class="sm-heading">.sm-heading</p>
Display 1 XL
Display 1 LG
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
View Example's Code
<h2 class="display-1 display-xl">Display 1 XL</h2>
<h2 class="display-1 display-lg">Display 1 LG</h2>
<h2 class="display-1">Display 1</h2>
<h2 class="display-2">Display 2</h2>
<h2 class="display-3">Display 3</h2>
<h2 class="display-4">Display 4</h2>
<h2 class="display-5">Display 5</h2>
<h2 class="display-6">Display 6</h2>
.fw-bolder
.fw-bold
.fw-semi-bold
.fw-medium
.fw-normal
.fw-light
.fw-lighter
View Example's Code
<h2 class="fw-bolder">.fw-bolder</h2>
<h2 class="fw-bold">.fw-bold</h2>
<h2 class="fw-semi-bold">.fw-semi-bold</h2>
<h2 class="fw-medium">.fw-medium</h2>
<h2 class="fw-normal">.fw-normal</h2>
<h2 class="fw-light">.fw-light</h2>
<h2 class="fw-lighter">.fw-lighter</h2>
Text Gradient 1
Text Gradient 2
Text Gradient 3
Text Gradient 4
Text Gradient 5
View Example's Code
<h2 class="display-5 fw-medium"><span class="text-gradient-1">Text Gradient 1</span></h2>
<h2 class="display-5 fw-medium"><span class="text-gradient-2">Text Gradient 2</span></h2>
<h2 class="display-5 fw-medium"><span class="text-gradient-3">Text Gradient 3</span></h2>
<h2 class="display-5 fw-medium"><span class="text-gradient-4">Text Gradient 4</span></h2>
<h2 class="display-5 fw-medium"><span class="text-gradient-5">Text Gradient 5</span></h2>
Stroke Text
View Example's Code
<h2 class="display-3 font-family-poppins fw-semi-bold stroke-text">Stroke Text</h2>
<div class="d-inline-block icon-4xl">
<i class="bi bi-star"></i>
</div>
<div class="d-inline-block icon-3xl">
<i class="bi bi-star"></i>
</div>
<div class="d-inline-block icon-2xl">
<i class="bi bi-star"></i>
</div>
<div class="d-inline-block icon-xl">
<i class="bi bi-star"></i>
</div>
<div class="d-inline-block icon-lg">
<i class="bi bi-star"></i>
</div>
<div class="d-inline-block">
<i class="bi bi-star"></i>
</div>
<div class="d-inline-block icon-sm">
<i class="bi bi-star"></i>
</div>