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.