WWW Design Library2024-04-16T23:55:10+00:00

WWW Design Library

Guide to implementing QH Design System-based elements into Metro North websites.


Default, basic and Advanced banner styles


Buttons are typically used to trigger an action, such as submitting a form, opening a menu, or initiating a search.

Call to action (CTA)

Call-to-Action (CTA) link is a text-based link that is designed to prompt users to take a specific action, such as signing up for an event.


The card component is used to provide a brief summary of content or a task, often with a link to more detail.

Content cards

Content cards are used for related or supporting information, usually at the end of a page.

Container background colours

Guide to background colours on full-with containers.

Content background colours

Content backgrounds highlight information within the body of a standard page.

Link columns (Link list)

Link columns component is a simple list of vertical links that can be used to group related links.

Side navigation

The side navigation is placed next to the body content of a website.

Under construction

  • Accordions
  • Buttons
  • Callouts
  • Contacts
  • In-page navigation (On this page)
  • Related information (Content cards)
  • Tables
  • Tabs
  • Templates
    • Landing/Category pages
    • Content page
      • Standard
      • Multi-column
    • News article
    • Event
Back to top