UBC CMS

Block Pattern Library

Add CLF-compliant, ready to go layouts to your CMS site with a simple copy/paste.

Calls To Action

A call to action (CTA) is an instruction to the audience designed to provoke an immediate response, usually using an imperative verb such as “call now”, “find out more” or “download the brochure”.

Profiles Layouts

Faculties, Units, and Departments often showcase their staff, employees, faculty members, or students on their websites. Using Gutenberg’s Query Loop Block it’s possible to have beautifully styled, easily navigated profile listings to showcase and highlight your people.

  • Circular Photo, Bio, Contact Pullout

    A circular portrait photo of the person alongside their top-level information. Below is their education and interests with their contact details as a pull-out.

  • Photo, info, and tabs

    A portrait photo of the person alongside the top-level information. Below are tabs highlighting different areas of interest for the person.

Content Highlights

Different ways to highlight one or more specific pieces of content to add visual flair and draw the attention of your visitors.

  • 3-column stats

    Stylized stats split across three columns on a desktop, collapsing to one column on smaller screens. As first seen on https://med.ubc.ca

  • Stat Box

    A simple way to show a quick stat and description with an optional icon.

  • Stat Highlight

    A stylized way to show a number and some text. Perhaps as a statistic, or a title for a post in an archive.

Cards

A card component is a versatile element frequently used in web design to present content in a visually appealing and structured manner. Resembling physical cards, these components typically consist of a container with distinct sections for an image, title and text. Cards are commonly employed for displaying various types of content such as articles, products, or user profiles. They promote a clean and organized layout, making it easy for users to scan information and engage with content.

* UBC Collab 2023 theme required.