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”.
-
Twin Buttons with a stylized divider
Two buttons with a dividing message
-
Title, description, and 2 buttons
A call to action that allows you to help focus your visitors’ attention to a specific action you’d like them to take.
-
Stylized title and subtitle with a button
A subtitle above a large title, with a UBC Blue button
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.