Skip to main content

Incorrect use of the Hero component

Heading levels

Problem:

  • Heading level accessibility. Get involved H2 followed by two H2 hero components.

  • White overlay with black, difficult to read

Solution:

  • Update to card components

Secondary heros not set to H2

Problem:

  • Heading level accessibility. Multiple H1s on the page.

Solution:

  • Updated secondary hero components to H2

Using a hero as a heading

Problem:

  • Using a hero component as a heading. Hero was set to an H1.

Solution:

  • For headings use either a wysiwyg or a title component H2.

Text

Problem:

  • Too much text on image, difficult to read

Unusual formatting

Problem:

  • H1 treatment does not follow our design best practices
  • Centered text is difficult to read

Inconsistent H1 styling

Problem:

  • Inconsistent H1 treatment to other H1 titles in the subsite 
  • GillSansMedium sentence case compared to GillSansBoldCondensed uppercase on all other pages