Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar462
Peer review pending

Display Heading

Version 4.1.0GithubStorybook

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

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"

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.