Skip to main content

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, button
  • Background styles: colour, 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: colour, icon
  • Content features: centered text

  • 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: centered text, sliding text

  • Elements: icon, title, description, link
  • Background styles: image, half cover
  • Content features: none
University of Ontario Institute of Technology logo