Heading

A title in one of five sizes.

Oak dining chair

Materials

Care instructions

Visual size is independent of the element

Heading.tsx

import {Heading} from 'alinea/components'

export function HeadingExample() {
  return (
    <div style={{display: 'grid', gap: 8, width: 360}}>
      <Heading as="h1">Oak dining chair</Heading>
      <Heading as="h2">Materials</Heading>
      <Heading as="h3">Care instructions</Heading>
      <Heading as="h2" size="sm" weight="medium" truncate>
        Visual size is independent of the element
      </Heading>
    </div>
  )
}

Props

PropTypeDefaultDescription

as'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'Default 'h1'The heading element, defaults to h1

size'xs' | 'sm' | 'default' | 'lg' | 'xl'Default –Visual size, defaults to one matching the element

weight'medium' | 'semibold' | 'bold'Default –

truncatebooleanDefault –

asChildbooleanDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.