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.22.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
| Property | Type | Default | 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 |