Cascade Design Library

Accordions are a flexible component that organize and hide information until needed by the user.

How to add buttons, cta links and headings.

A card component displays concise, organized content in an appealing, easily digestible format.

The column component divides content into flexible, responsive sections for easy layout customizations.

Rows have default padding. Columns and modules have default margins. The classes listed below will remove all padding or margins…

The CTA Block is a highly structured component designed to help users focus on key calls to action.

A highly structured component, primarily used for building link hubs with informational context or as informational columns with visuals attached.

Factoids is a component designed to highlight key facts and relevant information on a page.

The Featured Banner component is a structured component ideal for promoting key initiatives within a prominent visual and call to action on the homepage.

The featured card component is a structured element designed to serve as a link hub emphasizing three crucial ideas or call to actions. The component requires a set of three cards with an image and title for each.

The Featured Content component is a structured full width component design which allows for three colour options: Western Purple, Deep Focus, and Grey. Images can be placed to the left or right, with the option of adding a title, subtitle, description, and up to two CTA buttons.

The Featured Highlight component is used to highlight key information with optional call-to-action buttons. For optimal visual balance, ensure the selected image size complements the content length.

The Experience component is a full-width, visually distinctive element designed to highlight impactful calls to action. It features a signature purple frosted background, making it ideal for drawing attention to key messaging or promotions.

Hero banners create a strong visual impact with bold imagery and caption, reinforcing the theme of its content. Hero banners can be used on all page types, with separate mobile specific images ensuring an optimized responsive experience.

Options for images

Various content display options

The News component is built to dynamically feed in either news articles (posts) created within the unit site.

The Pages component is built to display pages created within the unit site.

The staff listing is a structured component displaying a list of team members with optional contact information.

The Tabs component organizes content into separate, clickable sections, allowing users to switch between different views without reloading the page.

The Testimonial Block is a three-column component designed to showcase photos and quotes, highlighting community profiles. Call-to-action buttons can link to a secondary page or trigger a YouTube video in a modal pop-up module.

Page templates allow for two types of titles to be used – Basic Title and Default Title.

The video component enables easy embedding of videos from YouTube or hosted media files. Adding captions or subtitles to media files is important ensure videos are accessible to a broader audience and meets accessibility guidelines.