Sub​heading

A flexible element for secondary text accompanying a heading


  • Display

    Inherited

  • Selectors

    .subheading
  • Source

    GitHub ↗

  • Features

    TonesPriorities

This is a heading.

This is a subheading!
<h3 class='heading'>This is a heading.</h3>
<h5 class='subheading'>This is a subheading!</h5>

Overview

The subheading element makes text look like a muted heading. It’s great to pair with a heading, but is usually unnecessary when followed by body text.

It makes the text larger (xl) and applies a slightly muted color depending on tone.

Considerations

Spacing — Unless used inside a content element, the subheading element defines no margin. That means that you’ll need to manually position it inside your layout.

Variants

The subheading has full contextual tone and priority support.

This is a toned subheading.

This is a toned subheading.

This is a toned subheading.

This is a toned subheading.

This is a toned subheading.

This is a toned subheading.

Example code
<p class="subheading ~neutral !low">This is a toned subheading.</p>

<p class="subheading ~positive !low">This is a toned subheading.</p>

<p class="subheading ~warning !low">This is a toned subheading.</p>

<p class="subheading ~critical !low">This is a toned subheading.</p>

<p class="subheading ~info !low">This is a toned subheading.</p>

<p class="subheading ~urge !low">This is a toned subheading.</p>

Accessibility

Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.

Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!

Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).

Examples

I'm a little subheading. I'm honestly pretty rare.

Example code
<p class="subheading">I'm a little subheading. I'm honestly pretty rare.</p>

Customization

Name Type Default Description
--family-secondary font sets the font family
--color-muted color sets the color

You can also customize this element by simply overriding any of its CSS attributes, listed here. Contextual variable defaults (e.g., --color-content) and global variables (e.g., --family-primary) are defined here.