Skip to main content
eSSENTIAL ACCESSIBILITY Crisis Centre

Card grid landing page

This is a templated landing page, displayed in a card grid layout. A templated landing page shows hyperlinks to different pages.

In a card grid page, the button links can be set to link to any page. The card grid layout can be customized to include an icon, title, description, button, background colour, background image, background icon, centered text, and sliding animation.

Each row can contain up to 5 "cards" (columns) - each will be evenly spaced across the page. On smaller screen sizes, the cards will automatically resize to fit in the available space.

Regular content, such as a heading, can be placed in between rows to act as a separator. In the examples below, a list of the used options appear between each card row.

View examples of available icons

Recommended combinations of card grid options


  • Elements: icon, title, description, link
  • Background styles: colour
  • Content features: centered text
Fancy box link

Become a UOIT student

Find information on how to apply, important dates, academic requirements and more

Fancy box link

Virtual tour

Explore UOIT's two campus locations from home with our virtual tour!

Fancy box link

Visit us

Book a personalized tour and get to know UOIT firsthand!


  • Elements: title, description, link, button
  • Background styles: colour, icon
  • Content features: none

Virtual tour

Explore UOIT's two campus locations from home with our virtual tour!

Launch tour

Visit us

Book a personalized tour and get to know UOIT firsthand!

Book a campus tour

  • Elements: icon, title, description, link
  • Background styles: none (default background colour is grey)
  • Content features: sliding text
Fancy box link

Virtual tour

Explore UOIT's two campus locations from home with our virtual tour!

Fancy box link

Visit us

Book a personalized tour and get to know UOIT firsthand!


  • Elements: icon, title, description, link, button
  • Background styles: colour, background image
  • Content features: centered text

Become a UOIT student

Find information on how to apply, important dates, academic requirements and more

How to apply

Virtual tour

Explore UOIT's two campus locations from home with our virtual tour!

Launch tour

Visit us

Book a personalized tour and get to know UOIT firsthand!

Book a tour

  • Elements: icon, title, description, link
  • Background styles: small image
  • Content features: none
Fancy box link

Become a UOIT student

Find information on how to apply, important dates, academic requirements and more

Fancy box link

Virtual tour

Explore UOIT's two campus locations from home with our virtual tour!

Fancy box link

Campus Tours

Book a personalized tour and get to know UOIT firsthand!


  • Elements: icon, title, description, link
  • Background styles: full image
  • Content features: none
Fancy box link

Become a UOIT student

Find information on how to apply, important dates, academic requirements and more

Fancy box link

Virtual tour

Explore UOIT's two campus locations from home with our virtual tour!

Fancy box link

Campus tours

Book a personalized tour and get to know UOIT firsthand!


  • Elements: title, description, link
  • Background styles: image
  • Content features: none
Fancy box link

Become a UOIT student

Find information on how to apply, important dates, academic requirements and more

Fancy box link

Virtual tour

Explore UOIT's two campus locations from home with our virtual tour!

University of Ontario Institute of Technology logo