Fancy Headings

Fancy Headings

Canvas gives headings extra structure and emphasis with several title shortcodes. Use .fancy-title for bordered/underlined section titles, .heading-block for a title plus subtitle, and .emphasis-title for a large centered statement.

Structure

• .fancy-title - a decorated title wrapper; by default it draws a double border line beside the heading
• .title-border - single border line variant
• .title-double-border - explicit double border line variant
• .title-bottom-border - underline under the whole heading
• .title-center / .title-right - center or right align the fancy title
• .heading-block - a title with an optional <span> subtitle below
• .emphasis-title - large, bold centered statement title
• .before-heading - a small kicker line placed above the main heading

Fancy Title

<div class="fancy-title title-border">
	<h3>Single Border Title</h3>
</div>

Variants

Double border: the default fancy-title style, or set it explicitly.

<div class="fancy-title title-double-border">
	<h3>Double Border Title</h3>
</div>

Centered: add .title-center (or .title-right) to change alignment.

<div class="fancy-title title-border title-center">
	<h3>Single Border Title</h3>
</div>

Bottom border: underline the whole heading with .title-bottom-border.

<div class="fancy-title title-bottom-border">
	<h3>Underlined Title</h3>
</div>

Heading Block

Pair a heading with a subtitle using .heading-block and a <span>.

<div class="heading-block text-center">
	<h2>Heading Block</h2>
	<span>Sub-Title for the Heading Block</span>
</div>

Emphasis Title

Use .emphasis-title for a large centered statement, optionally with a .before-heading kicker.

<div class="emphasis-title">
	<span class="before-heading">Get Started with</span>
	<h2>This is an Emphasis Title</h2>
	<p class="lead mt-4">Create as much unique content as you want with this Template.</p>
</div>

Tips

• .fancy-title works with any heading level (<h1> through <h6>); the border scales to the text.
• Add .text-center on a .heading-block to center both the title and subtitle.
• Use .before-heading for a short kicker above a heading, useful in hero and emphasis sections.