Five-Column with Text
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.