Three-Column with Text | Ontario Institute for Studies in Education

Using Three-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.

Three-column cards are a useful design element that can help to link three similar ideas, reduce the length of a webpage, or embed video and images with text. They can also be used to give a button-like styling to content.

Although three-column cards are commonly used across many websites, sometimes one of the three boxes may appear heavier or busier than the other two. To ensure consistency when using the Title with Text option, it's recommended to limit the text in each box to a maximum of 300 characters, including spaces. Additionally, it's best to avoid exceeding 350 characters to ensure a better user experience on mobile devices.

Title Only (Grey Background)

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

No Background

No Background - Centred

White Background

White Background - Centred

Dark Blue Background

Dark Blue Background - Centred

Light Blue Background

Light Blue Background - Centred

Grey Background

Title Only (White Background)

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

No Background

No Background - Centred

White Background

White Background - Centred

Dark Blue Background

Dark Blue Background - Centred

Light Blue Background

Light Blue Background - Centred

Grey Background

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. Ut fringilla magna leo, sed dignissim quam pretium consequat. Sed sed leo eget ex dapibus elementum. Praesent posuere dolor a mauris aliquam feugiat. Cras sagittis diam vel tellus aliquet, nec vehicula nibh feugiat.

No Background

White Background

Dark Blue Background

Light Blue Background

Grey Background

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.