Following web best practices, it's important to add text in a meaningful way that cleary communicates your message to your audience.

Below you'll learn how to use titles, heading styles, calls-to-action and more, to help audiences easily consume the content.

Heading Styles

Heading hierarchy is important to improve accessibility and search engine optimization on your website. Having a well-defined title hierarchy makes your page easy for users to scan the page for information. 

  • Always start with Heading 1 (except for the homepage), followed by Heading 2, Heading 3, and so forth. 
  • The title component can also be used to automatically create a H1 for the title of the page. 
  • Heading styles can be applied in a text component or in a Banner image.

See Banner styles

Heading One

Heading Two 

Heading Three

Heading Four

Heading Five

 Best Practices

H1 Heading

  • A title heading can easily be added as a title component, or in a text component
  • Only add one H1 at the top of your page to maintain user accessibility 

Headings on Home page

  • Homepages already include an H1 as the site name in the header, therefore any titles added to your home page should be an H2 
  • If the H2 appears too small for home page you can apply a CSS class to enlarge the font

Headings Links

  • Avoid linking a heading and use a call-to-action, such as a button or read more link instead.

 How to

In the text component, you can find the heading styles under the format drop down. 


Used only on homepage for H2 headings

  • header-l - can be used to increase the text size and appear as H1
  • header-xl - can be used to increase the text size to appear larger than an H1