Skip to main content

Custom landing page - card grid layout

This is a templated, manually-created (custom) landing page, displayed in a card grid layout. A templated landing page shows hyperlinks to different pages.

In custom landing pages, 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 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
  • Content features: centered text

Sample site

A sample site with examples of page layout options and page components

See examples

Page types

Learn about the difference between a templated landing/index page and a content/regular page

Learn more

Accordion page layout

View an example of an accordion page layout

View accordions

  • 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

Example components

Examples of buttons, colours, fonts, and tables

See examples

Faculty profile page

View a faculty profile page template

Learn more

  • Elements: icon, title, description, link
  • Background styles: none (default background colour is grey)
  • Content features: centered text, sliding text
University of Ontario Institute of Technology logo