Pluma

Theme

About

MCP Server

Getting started

FormattedRelativeTime

Combobox with Add New

Density

Inline Form Controls

Refinement levers

Search with DropdownMenu

Componentsv2.170.1

Iconsv1.15.0

MCPv0.8.18

Tokensv0.34.1

Heading

Github

Storybook

Legacy component

A styled, semantic heading element. The Heading component builds on top of Text and supports all Text props.

Importing

The component can be imported via:

import { Heading } from '@customerio/pluma-components/react';

Usage

The component accepts a level prop, from 1 to 6, which will have the component render the matching heading tag (h1 to h6):

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<Heading level={1}>Heading 1</Heading>
<Heading level={2}>Heading 2</Heading>
<Heading level={3}>Heading 3</Heading>
<Heading level={4}>Heading 4</Heading>
<Heading level={5}>Heading 5</Heading>
<Heading level={6}>Heading 6</Heading>

API

`PlumaHeading` `extends Text`

`color` `"critical" | "caution" | "success" | "bold" | "inherit" | "white" | "information" | "active" | "disabled" | "accent" | "base" | "invert" | "subtle" | "code" | "minimal" | "placeholder" | undefined`

The text color. _{^{(See text color tokens)}}

`family` `"mono" | "sans" | undefined`

The font family. _{^{(See font family tokens)}}

`fontStyle` `"italic" | "normal" | undefined`

The font style. _{^{(See MDN font-style)}}

`level` `"1" | "2" | "3" | "4" | "6" | "5" | undefined`

Default:2

The level of the heading (which maps to h1-h6 tags)

`size` `"button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "xxxl" | undefined`

The text size. _{^{(See font size tokens)}}

`text` `"product-code" | "product-h1" | "product-h2" | "product-h3" | "product-h4" | "product-label" | "product-label-secondary" | "product-link" | "product-link-secondary" | "product-p" | "product-p-active" | "product-p-secondary" | "product-ps" | "product-ps-active" | "product-pxs" | "product-pxs-active" | "product-pxs-secondary" | undefined`

A predefined typography style. _{^{(See text tokens)}}

`weight` `"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`

The font weight. _{^{(See font weight tokens)}}

Heading

Importing

Usage

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

API

PlumaHeading extends Text

color "critical" | "caution" | "success" | "bold" | "inherit" | "white" | "information" | "active" | "disabled" | "accent" | "base" | "invert" | "subtle" | "code" | "minimal" | "placeholder" | undefined

family "mono" | "sans" | undefined

fontStyle "italic" | "normal" | undefined

level "1" | "2" | "3" | "4" | "6" | "5" | undefined

size "button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "xxxl" | undefined

weight "bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined

On this page

`PlumaHeading` `extends Text`

`color` `"critical" | "caution" | "success" | "bold" | "inherit" | "white" | "information" | "active" | "disabled" | "accent" | "base" | "invert" | "subtle" | "code" | "minimal" | "placeholder" | undefined`

`family` `"mono" | "sans" | undefined`

`fontStyle` `"italic" | "normal" | undefined`

`level` `"1" | "2" | "3" | "4" | "6" | "5" | undefined`

`size` `"button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "xxxl" | undefined`

`weight` `"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`