Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Heading

Version 11.1.2GithubStorybook

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

Installation

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

Usage

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

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

Props

Props page anchor

Heading

Heading page anchor

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"