a17t

Heading

A flexible element for larger, more prominent text

  • Display

    Inherited

  • Selectors

    .heading

  • Source

    GitHub ↗

  • Features

    TonesPriorities

This is a heading.

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

Overview

The heading element makes text look like a title or heading. Inside of a content element, it is applied to the <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tags.

It makes the text larger (3xl), semibold, and applies tight leading.

Considerations

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

Variants

The heading has full contextual tone and priority support.

This is a toned heading.

This is a toned heading.

This is a toned heading.

This is a toned heading.

This is a toned heading.

This is a toned heading.

Example code 
<h3 class="heading ~neutral @low">This is a toned heading.</h3>

<h3 class="heading ~positive @low">This is a toned heading.</h3>

<h3 class="heading ~warning @low">This is a toned heading.</h3>

<h3 class="heading ~critical @low">This is a toned heading.</h3>

<h3 class="heading ~info @low">This is a toned heading.</h3>

<h3 class="heading ~urge @low">This is a toned heading.</h3>

Accessibility

Use with heading (<h1>, <h2>, etc.) elements. Using the .heading element on heading tags will help screenreaders and other assistive technologies better represent your content.

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

This is a pretty big deal!

Example code 
<h3 class="heading">This is a pretty big deal!</h3>
This is a smaller deal!
Example code 
<h5 class="heading text-xl">This is a smaller deal!</h5>
Headings are tag-agnostic, but you shouldn't be.
Example code 
<small class="heading text-lg">Headings are tag-agnostic, but you shouldn't be.</small>