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.

  • Cards with image, title and short description

    Styled card component which can be used on its own or being part of the Post Template block within Query Loop.

  • Cards with image, title, short description and button.

    Switch between the live preview and the code view to see what this might look like on your site and how to get it there Available on every CMS website How do I use block patterns on my site on CMS? Block Patterns in WordPress are HTML with CSS (provided by special HTML comments). That…

  • Cards with rounded Headshots, title and short description.

    Switch between the live preview and the code view to see what this might look like on your site and how to get it there Available on every CMS website How do I use block patterns on my site on CMS? Block Patterns in WordPress are HTML with CSS (provided by special HTML comments). That…