Content

Special Heading

A styled headline with an optional overline and subtitle.

Live demo

See it in action

Overline + title + subtitle — centered

Eyebrow

A clear, balanced heading.

An optional subtitle sits beneath the title.

Overline marker — leading line

What we do

A line marks the overline.

Overline marker — lines on both sides

The collection

Flanked by lines, centered.

Overline container — filled pill

New

A tinted pill badge overline.

Overline container — outline pill with a dot

Featured

An outline pill plus a dot marker.

Overline container — underline

Guide

A short underline under the overline.

Display size — Display 3 (oversized)

Big

An oversized display heading.

Coloured overline + title

Brand

A heading in custom colours.

Alignment — left

Left aligned

This heading sits to the left.

The subtitle follows the same alignment.

Alignment — right

Right aligned

This heading sits to the right.

The subtitle follows the same alignment.

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12">
				<p class="heading-overline">Eyebrow</p>
				<h2 class="heading-title">A clear, balanced heading.</h2>
				<p class="heading-subtitle">An optional subtitle sits beneath the title.</p>
			</div>
		</div>
	</div>
</section>

To learn more about the Special Heading shortcode, please check out the online manual here.

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.