Skip to main content

Headings

Component status:Beta
Heading styles for websites.

Default Headings#

This is a Heading 1 example

This is a Heading 2 example

This is a Heading 3 example

This is a Heading 4 example

This is a Heading 5 example
This is a Heading 6 example
<h1 class="bux-h1">This is a Heading 1 example</h1>
<h2 class="bux-h2">This is a Heading 2 example</h2>
<h3 class="bux-h3">This is a Heading 3 example</h3>
<h4 class="bux-h4">This is a Heading 4 example</h4>
<h5 class="bux-h5">This is a Heading 5 example</h5>
<h6 class="bux-h6">This is a Heading 6 example</h6>

Alternate H1#

Use this in situations where a serif font may not be appropriate.

This is an alternate h1

<h1 class="bux-h1--alt">This is an alternate h1</h1>

Section Heading#

This style may be used to divide content into sections and can be used with an h2, h3, or h4. All three will look the same — be sure to use the appropriate heading level based on the structure of your content.

This is a Section Heading

<h2 class="bux-section-heading">This is a Section Heading</h2>

When to use Headings#

  • Use headings to show text structure. Headings give users a sense of the page’s organization and structure and are ranked <h1> through <h6>.
  • All pages should at least have a <h1> level heading for the title of the page.
  • Make sure the headings are used hierarchically and no levels are skipped.
  • Write headings so they are descriptive to give people an overview of the content on the page.
  • Do not use the headings out of order or based on their appearance.
  • Do not use bold text instead of a heading.

When to use something else#

  • If you are wanting text to be larger or stand out but it’s not part of the hierarchy of the page then you should use html and css to change the size and color of the text.

Accessibility#

  • If the underlying code for a page's headings is correct, screen reader users benefit from headings.
  • Screen reader users can navigate a page according to its headings, listen to a list of all headings, and skip to a desired heading to begin reading at that point.
  • Using headings and making them visually distinctive is helpful for users with cognitive disabilities.
  • The usefulness of proper heading structures is very high, with 85.7% of respondents from the 2021 WebAIM Screen Reader Survey finding heading levels very or somewhat useful.

Resources#