Headings

Documentation and examples of different types of heading styles

Heading and pre-heading styles

Pre-heading with alt font

Heading

Heading

Heading Style

Heading

Heading

<span class="font-alt display-8 fw-normal">Pre-heading with alt font</span>
<h2 class="display-6 text-dark">Heading</h2>
<h2 class="display-6 text-primary">Heading</h2>
<h2 class="display-6 text-dark">Heading <span class="bg-primary text-white py-1">Style</span></h2>
<div class="bg-dark p-4 mb-3">
	<h2 class="display-6 text-light">Heading</h2>
	<h2 class="display-6 text-white">Heading</h2>
</div>

Heading strokes styles

Heading

Heading

Heading

Heading

Heading hover fill

Heading with anchor

Stroke

Stroke md

Stroke lg

<h2 class="display-6 text-dark-stroke">Heading</h2>
<h2 class="display-6 text-light-stroke">Heading</h2>
<h2 class="display-6 text-primary-stroke">Heading</h2>
<div class="bg-dark p-4 mb-3">
	<h2 class="display-6 text-white-stroke">Heading</h2>
</div>
<h2 class="display-6 text-dark-stroke text-hover-fill">Heading hover fill</h2>
<a href="#" class="h2 display-6 text-dark-stroke">Heading with anchor</a>
<h2 class="display-6 text-dark-stroke">Stroke</h2>
<h2 class="display-6 text-dark-stroke text-stroke-md">Stroke md</h2>
<h2 class="display-6 text-dark-stroke text-stroke-lg">Stroke lg</h2>

Heading with shadow and strokes styles

Heading

Heading

Heading

Heading

Heading

Heading

Heading

<h2 class="display-5 text-dark-stroke text-primary-shadow">Heading</h2>
<h2 class="display-5 text-white-stroke text-primary-shadow">Heading</h2>
<h2 class="display-5 text-dark-stroke text-light-shadow">Heading</h2>
<h2 class="display-5 text-primary-stroke text-light-shadow">Heading</h2>
<h2 class="display-5 text-dark-stroke text-dark-shadow">Heading</h2>
<h2 class="display-5 text-primary-stroke text-dark-shadow">Heading</h2>
<div class="bg-dark p-4">
	<h2 class="display-5 text-primary-stroke text-white-shadow">Heading</h2>
</div>