Skip to content
Change the site theme
Figma
(information)

Display Heading

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


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.

Display Heading as h1 with displayHeading10 variant

Display Heading as h1 with displayHeading10 variant page anchor

Display Heading as h2 with heading20 variant

Display Heading as h2 with heading20 variant page anchor

Heading as h3 with displayHeading30 variant

Heading as h3 with displayHeading30 variant page anchor

Display Heading with no bottom margin

Display Heading with no bottom margin page anchor

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.


yarn add @twilio-paste/display-heading - or - yarn add @twilio-paste/core
import {DisplayHeading} from '@twilio-paste/core/display-heading';
const Component = () => (
<DisplayHeading as="h2" variant="displayHeading20">
Display Heading
</DisplayHeading>
);
PropTypeDescriptionDefault
asasTags'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'span'null
id?stringnull
marginBottom?oneOf(['space0'])Currently we only allow space0 to remove bottom marginnull
variantdisplayHeadingVariants'displayHeading10', 'displayHeading20', 'displayHeading30'null
display?CSS display property options'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid', and more"block"
element?stringOverrides the default element name to apply unique styles with the Customization Provider'DISPLAY_HEADING'

Black lives matter.