Typography

Open Sans

Outfit

Lora

Poppins


<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


<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


<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


<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


<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


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