Heading (Dev) | GEL Design System

This is a developer-only package containing styling for heading elements supporting visual and semantic heading levels, uppercase and both body font and brand font options.

Version	0.13.0
History	View changes
Install	`npm install @westpac/ui`
Usage	`import { ... } from @westpac/ui/heading`

Heading types

There are two heading component options: Heading and BrandHeading. Heading renders in body font and BrandHeading in brand font.

<>
  <Heading tag="h1" size={1}>Heading</Heading>
  <Heading tag="h1" size={1} brandHeading>BrandHeading</Heading>
</>

Sizes

Headings are visually sized using the typographic scale and may be set as either a fixed or responsive size.

Fixed sizing

() => {
  const sizes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  return (
    <>
      {sizes.map(size => (
        <Heading size={size} key={size}>
          Heading size {size}
        </Heading>
      ))}
    </>
  );
}

Tag

Define the heading element tag (<h1> - <h6>). This will be determined by the size if a tag is not provided.

<>
  <Heading tag="h1" size={3}>Heading tag h1 size 3</Heading>
  <Heading tag="h2" size={5}>Heading tag h2 size 5</Heading>
</>

Uppercase

Render the heading in uppercase. Line height is adjusted as necessary.

<>
  <Heading size={1} uppercase>Heading</Heading>
  <Heading size={1} brandHeading uppercase>BrandHeading</Heading>
</>

Props

Heading props
Property	Type	Required	Description
size	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| { [x: string]: 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| undefined; } \| undefined`	`true`	Size of heading
brandHeading	`boolean`	`false`	Whether it should be a brand heading
children	`ReactNode`	`false`	Heading text
tag	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	`false`	Semantic tag, will be determined by size if not provided. Will default to 'h6' if using responsive size.
uppercase	`boolean`	`false`	Whether heading should be uppercase