Paste assistant Assistant
Figma
Star454

Heading

A Heading is text that gives hierarchical structure to a page.

yarn add @twilio-paste/heading - or - yarn add @twilio-paste/core
import {Heading} from '@twilio-paste/core/heading';

const Component = () => (
  <Heading as="h2" variant="heading20">
    Heading Two
  </Heading>
);

as RequiredRequired

The HTML element to render.

Type
AsTags

variant RequiredRequired

Style variant to apply to the heading, affects the visual appearance of the heading.

Type
HeadingVariants
Default
'heading20'

display

Responsive style prop of CSS display values

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

element

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

Type
string
Default
'HEADING'

id

Same as the HTML id attribute.

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.