Headings

v3.0.0

Headings help to structure content on a page using relative visual prominence.

Released

History
View changes
Install
npm i @gold.au/headings
Tags
Requires
Contributors
  • Julian Fleetwood avatar picture
  • Gary Broadbent avatar picture
  • Trevor Brennan avatar picture
  • Dominik Wilkowski avatar picture
  • Alex Page avatar picture
  • Patrick De Young avatar picture
  • Simon Pascal Klein avatar picture

Colour impairment

How the headings are viewed with various colour blindnesses

Example

Grayscale

How the headings are viewed with total colour blindness.

Example

Screen readers

[Heading level 4] Display x, x, x, l.

[Heading level 6] Display x, x, l.

[Heading level 4] Display x, l.

[Heading level 5] Display l, g.

[Heading level 2] Display m, d.

[Heading level 3] Display s, m.

[Heading level 1] Display x, s.

How the headings demo is described by assistive technology.

As read with macOS High Sierra VoiceOver.

Related components

Feedback