Skip to content
Copyright © 2024 by Westpac Banking Corporation. All rights reserved.

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.

Version0.13.0
History
View changesCopyright © 2023 by Westpac Banking Corporation. All rights reserved.
Installnpm install @westpac/ui
Usageimport { ... } 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
PropertyTypeDefaultRequiredDescription
size1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | { [x: string]: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined; } | undefinedtrueSize of heading
brandHeadingbooleanfalseWhether it should be a brand heading
childrenReactNodefalseHeading text
tag"h1" | "h2" | "h3" | "h4" | "h5" | "h6"falseSemantic tag, will be determined by size if not provided. Will default to 'h6' if using responsive size.
uppercasebooleanfalseWhether heading should be uppercase