Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

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
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/display-heading - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {DisplayHeading} from '@twilio-paste/core/display-heading';

const Component = () => (
  <DisplayHeading as="h2" variant="displayHeading20">
    Display Heading
  </DisplayHeading>
);

Props

Props page anchor

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"