Using Five-Column - Tips & Guidelines

Cards are a common feature used on websites to display content related to a particular topic, theme, or area of interest in a visual box. To ensure that related content is easily distinguishable and accessible for screen readers, it is essential to use clear and descriptive card titles. These titles can also serve as anchor text when creating jump-to menus or directing users to a specific section.

Five-column cards are not commonly used on OISE websites. They are primarily used as buttons or call-to-action elements to shorten webpage length and add some style to longer content. They should be used sparingly in narrow or limited spaces. It is not recommended to use videos or images in five-column cards, as the content may appear too small on both mobile and desktop devices.

When using the Title with Text option, it is important to keep in mind that the limit for characters (including spaces) is 60. Going over this limit will cause distortion.

Title Only (Grey Background)

It is always recommended to use heading three for anything beyond two columns.

No Background

No Background

No Background

No Background

No Background

No Background - Centred

No Background - Centred

No Background - Centred

No Background - Centred

No Background - Centred

White Background

White Background - Centred

White Background

White Background

White Background

White Background - Centred

White Background - Centred

White Background - Centred

White Background - Centred

White Background - Centred

Dark Blue Background

Dark Blue Background

Dark Blue Background

Dark Blue Background

Dark Blue Background

Dark Blue Background - Centred

Dark Blue Background - Centred

Dark Blue Background - Centred

Dark Blue Background - Centred

Dark Blue Background - Centred

Light Blue Background

Light Blue Background

Light Blue Background

Light Blue Background

Light Blue Background

Light Blue Background - Centred

Light Blue Background - Centred

Light Blue Background - Centred

Light Blue Background - Centred

Light Blue Background - Centred

Grey Background

Grey Background

Grey Background

Grey Background

Grey Background

Grey Background - Centred

Grey Background - Centred

Grey Background - Centred

Grey Background - Centred

Grey Background - Centred

Title Only (White Background)

It is always recommended to use heading three for anything beyond two columns.

No Background

No Background

No Background

No Background

No Background

No Background - Centred

No Background - Centred

No Background - Centred

No Background - Centred

No Background - Centred

White Background

White Background - Centred

White Background

White Background

White Background

White Background - Centred

White Background - Centred

White Background - Centred

White Background - Centred

White Background - Centred

Dark Blue Background

Dark Blue Background

Dark Blue Background

Dark Blue Background

Dark Blue Background

Dark Blue Background - Centred

Dark Blue Background - Centred

Dark Blue Background - Centred

Dark Blue Background - Centred

Dark Blue Background - Centred

Light Blue Background

Light Blue Background

Light Blue Background

Light Blue Background

Light Blue Background

Light Blue Background - Centred

Light Blue Background - Centred

Light Blue Background - Centred

Light Blue Background - Centred

Light Blue Background - Centred

Grey Background

Grey Background

Grey Background

Grey Background

Grey Background

Grey Background - Centred

Grey Background - Centred

Grey Background - Centred

Grey Background - Centred

Grey Background - Centred

Title with Text (Grey Background)

It is always recommended to use heading three for anything beyond two columns. The maximum limit of characters or lines allowed for the text is displayed.

No Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

No Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

No Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

No Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

No Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

White Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

White Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

White Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

White Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

White Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Dark Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Dark Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Dark Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Dark Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Dark Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Light Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Light Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Light Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Light Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Light Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Grey Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Grey Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Grey Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Grey Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Grey Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title with Text (White Background)

It is always recommended to use heading three for anything beyond two columns. The maximum limit of characters or lines allowed for the text is displayed.

No Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

No Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

No Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

No Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

No Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

White Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

White Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

White Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

White Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

White Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Dark Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Dark Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Dark Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Dark Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Dark Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Light Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Light Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Light Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Light Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Light Blue Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Grey Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Grey Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Grey Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Grey Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Grey Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.