Skip to main content

Old Hero component patterns

Stacked, side by side, multi colour

Old solution:

  • Stacked hero components
  • side by side hero placement
  • multiple use of colours

New solution:

  • Use a Card deck and Card components for Undergraduate and Graduate
  • Update Cyan hero to a blue hero and use white text

Square hero beside a wysiwyg embedded in a box

Old solution:

  • Column control equal height checked with a square hero and box/WYSIWYG 

New solution: 

  • Grid container and Offset block component

Hero side-by-side and stacked

Old solution:

  • 2 flexible hero components in a 2-column column control with equal height checked 

New solution:

  • Grid container with Offset block, add images

Side by side

Old solution:

  • 4 square hero components in column control with equal height checked 

New solution:

  • Card deck and card components

Mini hero H1 with solid colour background

Old solution:

  • Mini hero H1 with solid colour background

New solution:

  • Simplify to a Title component

Using a hero component for an introductory blurb

Old solution:

  • Flexible hero with text centred

New solution:

  • Grid container with an Introduction component