Due to current events, we have postponed our in-person training sessions. Instead, we are offering online resources and training until further notice.
Skip to McMaster Navigation Skip to Site Navigation Skip to main content
McMaster Logo McMaster logo

Cards

card is a flexible and extensible content container. It includes options for images, icons and different sizes. Cards can also be linked to other pieces of content.

Card Types

Below are examples of the card varieties. The 2 main settings that can be set for cards are image shape (rectangle or circle) and card size (default or wide).

Cards with circle images can be set to images, icons or text. Cards set to the default size and rectangular images can have the title overlay the image.

laptop on desk

Rectangle Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauri.

laptop on desk

Rectangle Default with Link Learn More

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauri.

laptop on desk

Rectangle Default with Title Overlay

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauri.

laptop on desk

Rectangle Default with Title Overlay and Link Learn More

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauri.

Rectangle Default - Text Only

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauri.

Layout Example 1 - Static Cards - Info Boxes

Layout Example 2 - Static Cards - Internal Links

Layout Example 3 - Static Cards - Step Guide

Step 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nib.

Step 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nib.

Step 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nib.

Step 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nib.

Step 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nib.

Step 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nib.

Layout Example 4 - Static Cards - Gallery

image of the exterior of university hall

Project Name View Project

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ne.

Layout Example 5 - Dynamic Cards - People

Leadership

Joe Smith

Professor

Layout Example 6 - Dynamic Cards - News

office desk with computer covered in papers and writing tools to depict project planning
Example of new large size CTA banner with gold background.

Layout Example 6 - Dynamic Cards - Events with Carousel