Skip to contentSkip to navigationSkip to topbar
Figma
Star

Display Heading

Peer review pending

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

Version 4.1.0
Github

Installation

Installation page anchor
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>
);

DisplayHeading

DisplayHeading page anchor

as RequiredRequired

HTML element to render, e.g., h1, h2, etc.

Type
AsTags

variant RequiredRequired

The variant of the display heading

Type
DisplayHeadingVariants

display

CSS display property

Type
| Display | (Display | null | undefined)[] | { [x: string]: Display | undefined; [x: number]: Display | undefined }
Default
'block'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'DISPLAY_HEADING'

id

Type
string

marginBottom

Currently we only allow space0 to remove bottom margin

Type
"space0"