Components > Typography

Heading

Overview

Headings are titles for the main sections of a page. They help users understand what a page or section is about at a glance.

Dos and Don’ts

dosanddont

How to use

How to use the component to your design/builder

Turning On the Builder

  1. 1. First add or edit a post/page.
  2. 2. If you are using WordPress 5+ with Gutenberg enabled (default),you should see a Builder Block like the screenshot below.
  3. 3. If Gutenberg is disabled, you will find the “Themify Builder” tab below the WordPress classic editor.

Copy/Paste Module

  1. 1. Hover over the ‘3 dots’ icon and select copy
copypastemod

Typography Variations

SIZE

extraLarge (heading tag – h1)

The Ultimate
Selling machine

large (h2)

The Ultimate
Selling machine

medium (h3)

The Ultimate
Selling machine

small (h4)

The Ultimate
Selling machine

tiny (h5)

The Ultimate
Selling machine

extraTiny (h6)

The Ultimate
Selling machine

LIGHT

extraLarge (heading tag – h1)

The Ultimate
Selling machine

large (h2)

The Ultimate
Selling machine

medium (h3)

The Ultimate
Selling machine

small (h4)

The Ultimate
Selling machine

tiny (h5)

The Ultimate
Selling machine

extraTiny (h6)

The Ultimate
Selling machine

Demo

Content hierarchy 

Use headings to emphasize main sections of a page and group related content together.

Hero Banner

Paragraph copy here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Screenshot 2024-10-10 at 9.49.41 AM

Overview Section

Paragraph copy here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Accessibility Considerations

Heading structure

All pages must have a logical, descending heading structure that doesn’t skip levels.

  • Each page should have an <h1> as the main page title, and the first page heading. It should describe what the page is about.
  • Use only one <h1> per page.
  • Use <h2> for sections of content and for modal headings.
  • Use <h3> for subsections.
  • Don’t skip heading levels.

Heading 1 here

Your heading 2 here

Paragraph copy here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

This is your heading 3

Paragraph copy here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam