Heading

Typography for headings with size and weight variants

Installation

pnpm add @wandercom/design-system-web

Usage

import { Heading } from '@wandercom/design-system-web/ui/heading';

export function Example() {
  return <Heading variant="display-lg">Large display heading</Heading>;
}

Variants

<Heading variant="display">Display heading</Heading>
<Heading variant="headline-lg">Large headline</Heading>

Color variations

<Heading variant="headline" color="primary">Primary heading (default)</Heading>
<Heading variant="headline" color="secondary">Secondary heading</Heading>
<Heading variant="headline" color="tertiary">Tertiary heading</Heading>

Semantic elements

<Heading as="h1" variant="display-lg">Page title</Heading>
<Heading as="h2" variant="headline">Section heading</Heading>

Variants

Display large

Loading example...
<Heading variant="display-lg">Heading Display Large</Heading>

Display

Loading example...
<Heading variant="display">Heading Display</Heading>

Headline large

Loading example...
<Heading variant="headline-lg">Heading Headline Large</Heading>

Headline

Loading example...
<Heading variant="headline">Heading Headline</Heading>

Headline small

Loading example...
<Heading variant="headline-sm">Heading Headline Small</Heading>

Responsive

Loading example...
<Heading variant={{ base: 'headline-sm', md: 'headline', lg: 'display-lg' }}>Heading Responsive</Heading>

Props

variant

OptionallyResponsive<'display-lg' | 'display' | 'headline-lg' | 'headline' | 'headline-sm'>
Heading variant. Controls both the size and default weight (medium).

color

'primary' | 'secondary' | 'tertiary'
Text color variant using design system semantic colors. Defaults to 'primary'.

as

'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
HTML element to render. Defaults based on variant.

asChild

boolean
When true, renders children and merges props onto the child element instead of rendering a paragraph.

className

string
Additional CSS classes to apply.
Heading