WWW Design Library2024-06-27T04:49:54+00:00

WWW Design Library

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

Accordions

Accordions expand and collapse sections of content.

Banners

Default, basic and Advanced banner styles

Buttons

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.

Callouts

A callout is a piece of text from an article that has been taken out and used as a visual aid to help show a reader where important information is located.

Cards

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

  • 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