Skip to main content

Subheading

The subheading component is available in six (6) sizes that are used in combination with headings to provide identifiable divisions in the content under that heading. The subheadings in MWF provide proper top margin spacing for subheader text and are responsive. Subheadings have semantic meaning and are intended to augment the content under headings.

Example

Subheading size 1
Subheading size 2
Subheading size 3
Subheading size 4
Subheading size 5
Subheading size 6
Subheading sizes 1-6 on a default theme

Best practices

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 <h1> through <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.

Do

  • 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 heading and/or paragraph. For example, c-subheading-2 would pair with c-heading-2 and 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.

Don’t

  • 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.

Also known as

Subheader
Subtitle

Related

Caption
Heading
Paragraph

Accessibility

  • 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.

Options

  • Size: The size of the subheading component is determined by assigning the c-subheading-X class to the host element. There are six subheading class levels: c-subheading-1 (the largest) through c-subheading-6 (the smallest).
    See the Typography page for more information.
  • Arbitrary size: Use the class c-subheading only 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 m-typographic-intro.

Development

  • Schema definition: The subheading schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Subheading 1

Subheading 1

<p class="c-subheading-1">Subheading 1</p>

Subheading 2

Subheading 2

<p class="c-subheading-2">Subheading 2</p>

Subheading 3

Subheading 3

<p class="c-subheading-3">Subheading 3</p>

Subheading 4

Subheading 4

<p class="c-subheading-4">Subheading 4</p>

Subheading 5

Subheading 5

<p class="c-subheading-5">Subheading 5</p>

Subheading 6

Subheading 6

<p class="c-subheading-6">Subheading 6</p>

Subheading 7

Subheading 7

<h1 class="c-subheading-1">Subheading 7</h1>

Subheading 8

Subheading 8

<h2 class="c-subheading-2">Subheading 8</h2>

Subheading 9

Subheading 9

<h3 class="c-subheading-3">Subheading 9</h3>

Subheading 10

Subheading 10

<h4 class="c-subheading-4">Subheading 10</h4>

Subheading 11

Subheading 11
<h5 class="c-subheading-5">Subheading 11</h5>

Subheading 12

Subheading 12
<h6 class="c-subheading-6">Subheading 12</h6>