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”.
Two buttons with a dividing message
A call to action that allows you to help focus your visitors’ attention to a specific action you’d like them to take.
A subtitle above a large title, with a UBC Blue button
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.
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.
A portrait photo of the person alongside the top-level information. Below are tabs highlighting different areas of interest for the person.
Different ways to highlight one or more specific pieces of content to add visual flair and draw the attention of your visitors.
Stylized stats split across three columns on a desktop, collapsing to one column on smaller screens. As first seen on https://med.ubc.ca
A simple way to show a quick stat and description with an optional icon.
A stylized way to show a number and some text. Perhaps as a statistic, or a title for a post in an archive.