Display Heading

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

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

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 to ask.

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.

<>
<DisplayHeading as="div" variant="displayHeading10">
  Twilio magic
</DisplayHeading>
<DisplayHeading as="div" variant="displayHeading20">
  Twilio magic
</DisplayHeading>
<DisplayHeading as="div" variant="displayHeading30">
  Twilio magic
</DisplayHeading>
</>

<DisplayHeading as="h1" variant="displayHeading10">
  Display Heading one
</DisplayHeading>

<DisplayHeading as="h2" variant="displayHeading20">
  Display Heading two
</DisplayHeading>

<DisplayHeading as="h2" variant="displayHeading30">
  Display Heading three
</DisplayHeading>

<Card>
  <DisplayHeading as="h2" marginBottom="space0" variant="displayHeading10">
    Display Heading with no margin
  </DisplayHeading>
</Card>