Skip to contentSkip to navigationSkip to topbar
Figma
Star

Display Heading

Version 4.1.0GithubStorybookPeer review pending

Display heading is large, expressive text that stands out from traditional headings and is used for marketing and attention grabbing purposes.

Component preview theme
<DisplayHeading as="div" variant="displayHeading10" marginBottom="space0">
Twilio magic
</DisplayHeading>

Guidelines

Guidelines page anchor

Display heading is large, expressive text that stands out from traditional headings and is used for marketing and attention grabbing purposes.

About Display Heading

About Display Heading page anchor

Display Heading should not be used interchangeably with the Heading component. While Heading is for adding multiple levels of hierarchy and structuring the content of any page, Display Heading should only be used in very specific contexts.

Use Display Heading for marketing, branding, or editorial purposes to highlight a small amount of text. Don't use Display Heading to outline sections of a page or form.

Follow these guidelines for appropriate Display Heading usage:

  • Don’t use Display Heading to resize text. Instead use the Text primitive.
  • Use the appropriate tag for the Display Heading. If using an <h1> tag, don't use more than one per page.
  • Always use sentence case, unless you're writing a product name. For more information read the product style guide

Here are some examples of when you might want to use a Display Heading:

  • Grabbing your user's attention on a home or onboarding page
  • Marketing purposes or when you need to connect with the Twilio branding
  • Displaying numbers on a dashboard layout to make them stand out

If you have concerns about whether you're using a Display Heading appropriately, feel free to start a new Github Discussion(link takes you to an external page) to ask.

Accessibility

Accessibility page anchor

It is important to not skip one or more heading levels as it is common for screen readers to build an outline of the page and assist users as they navigate a page. Skipping a heading level could cause confusion as the user navigating the page may not know why a heading is missing.

  • Display Heading text should meet AA requirements (4.5:1) for color contrast from itself and the background color
  • Display Headings should be used thoughtfully and intentionally, including the value passed to the as prop.
Component preview theme
<>
<DisplayHeading as="div" variant="displayHeading10">
Twilio magic
</DisplayHeading>
<DisplayHeading as="div" variant="displayHeading20">
Twilio magic
</DisplayHeading>
<DisplayHeading as="div" variant="displayHeading30">
Twilio magic
</DisplayHeading>
</>

Display Heading as h1 with displayHeading10 variant

Display Heading as h1 with displayHeading10 variant page anchor
Component preview theme
<DisplayHeading as="h1" variant="displayHeading10">
Display Heading one
</DisplayHeading>

Display Heading as h2 with heading20 variant

Display Heading as h2 with heading20 variant page anchor
Component preview theme
<DisplayHeading as="h2" variant="displayHeading20">
Display Heading two
</DisplayHeading>

Heading as h3 with displayHeading30 variant

Heading as h3 with displayHeading30 variant page anchor
Component preview theme
<DisplayHeading as="h2" variant="displayHeading30">
Display Heading three
</DisplayHeading>

Display Heading with no bottom margin

Display Heading with no bottom margin page anchor
Component preview theme
<Card>
<DisplayHeading as="h2" marginBottom="space0" variant="displayHeading10">
Display Heading with no margin
</DisplayHeading>
</Card>

When to use Display Heading

When to use Display Heading page anchor

This is sentence case

Do

Use sentence case in Display Headings (except for a product name).

This Is Title Case

Don't

Don’t use title case.

Do

Use Display Headings to connect with the brand or grab users' attention.

Don't

Don’t use Display Headings in place of the regular Heading component.

Do

Be intentional about the value you pass to the `as` prop.

Don't

Don’t use multiple h1 tags on a page.