Get updates on changes to City services and closures.

View COVID-19 info and support

Hero banner

Hero banner

This is an example of a hero banner

Optional button link

Hero banner overview

The hero / CTA banner is the implementation of the pattern library component​ by the same name.


This banner is meant to be the primary element on a page as its presence on a page, hides the page title. However, multiple instances of a banner can be present on a page.


This banner has a couple of configuration options available:

  • Overlay color 
    • Light
    • Dark
  • Overlay position - Position of the content block 
    • Left
    • Center
    • Right)
  • CTA button - Optional