Use a subheading below a heading to create logical subdivisions for content under that heading.
Subheading formats and sizing are controlled by their numerical class assignment in coordination with headings and paragraphs according to the standard type ramp. In set sizing, you should use the recommended pairing of subheading size 1 when paired with heading size 1 and paragraph size 1, subheading size 2 when paired with heading size 2 and paragraph size 2, and so on through size 4.
Subheading components are built from HTML
heading elements such as
<h6> or, occasionally, from the paragraph element
<p>. Whenever possible, match a subheading component to the same size of HTML heading element and the paragraph element to create a match between the visual hierarchy (component) visible to the user and the sematic hierarchy (HTML element) that will be read by screen readers and machines.
Nevertheless, there are times when you may not want these to match, so mismatching components and elements is supported.
- A subheading can be a word, phrase or full sentence as appropriate to the context in which it is used.
- Use set sizing when paired with a
paragraph. For example,
c-subheading-2would pair with
c-paragraph-2. This set sizing applies for sizes 1-4.
- Subheadings must be paired with a heading, but headings do not require subheadings. The need for a subheading is determined by the nature of the content.
- Use the recommended pairing of a subheading and heading as described in the Best Practices above.
- Do not get too verbose. Subheading should not be used like a paragraph.
- Do not use subheading on its own without a heading. Instead, use a heading appropriate for where it is in the page structure.
- Do not use subheading to make text a certain size or bold or to style text.
- Do not use successive subheadings to create a list. Use a list component instead or reconsider how your content is constructed.
- The most semantically meaningful element for a subheading is, in fact, the
<p>element. Element tags
<h1> - <h6>could also be used. Most importantly, structure the page content headers in a meaningfully organized manner and augment with subheadings as needed. Heading and subheading content is read directly by screen readers.
- Size: The size of the subheading component is determined by assigning the
c-subheading-Xclass to the host element. There are six subheading class levels:
c-subheading-1(the largest) through
See the Typography page for more information.
- Arbitrary size: Use the class
c-subheadingonly when the subheading needs to inherit sizing information from the context where it is used. However, this option is only available when used in combination with
c-mosaic-placement, a:hover, c-hero, m-hero-item, m-immersive-hero-item, m-area-heading, m-feed-hero-item, m-multi-hero-item,and
- Schema definition: The subheading schema defines the acceptable configurations, requirements, and options for each component.
Code and preview
<p class="c-subheading-1">Subheading 1</p>
<p class="c-subheading-2">Subheading 2</p>
<p class="c-subheading-3">Subheading 3</p>
<p class="c-subheading-4">Subheading 4</p>
<p class="c-subheading-5">Subheading 5</p>
<p class="c-subheading-6">Subheading 6</p>
<h1 class="c-subheading-1">Subheading 7</h1>
<h2 class="c-subheading-2">Subheading 8</h2>
<h3 class="c-subheading-3">Subheading 9</h3>
<h4 class="c-subheading-4">Subheading 10</h4>
<h5 class="c-subheading-5">Subheading 11</h5>
<h6 class="c-subheading-6">Subheading 12</h6>