Two-Column with Text
Using Two-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.
Two-column cards are a useful element to improve the way content appears on a website. They enable easy comparison between two pieces of text, help to shorten longer pieces of information, add a visual element to websites, separate similar content into distinct areas, and reduce the vertical length of a webpage.
Two-column cards are ideal for displaying videos and images. The Title with Text option allows up to 560 characters, including spaces, but it's recommended to stay under 600 characters for mobile-friendliness.
Title Only (Grey Background)
It is always recommended to use heading three, unless you are not using a section title.
No Background - Heading 3
No Background - Heading 2
No Background - Heading 3 Centred
No Background - Heading 2 Centred
White Background - Heading 3
White Background - Heading 2
White Background - Heading 3 Centred
White Background - Heading 2 Centred
Dark Blue Background - Heading 3
Dark Blue Background - Heading 2
Dark Blue Background - Heading 3 Centred
Dark Blue Background - Heading 2 Centred
Light Blue Background - Heading 3
Light Blue Background - Heading 2
Light Blue Background - Heading 3 Centred
Light Blue Background - Heading 2 Centred
Grey Background - Heading 3
Grey Background - Heading 2
Grey Background - Heading 3 Centred
Grey Background - Heading 2 Centred
Title Only (White Background)
It is always recommended to use heading three, unless you are not using a section title.
No Background - Heading 3
No Background - Heading 2
No Background - Heading 3 Centred
No Background - Heading 2 Centred
White Background - Heading 3
White Background - Heading 2
White Background - Heading 3 Centred
White Background - Heading 2 Centred
Dark Blue Background - Heading 3
Dark Blue Background - Heading 2
Dark Blue Background - Heading 3 Centred
Dark Blue Background - Heading 2 Centred
Light Blue Background - Heading 3
Light Blue Background - Heading 2
Light Blue Background - Heading 3 Centred
Light Blue Background - Heading 2 Centred
Grey Background - Heading 3
Grey Background - Heading 2
Grey Background - Heading 3 Centred
Grey Background - Heading 2 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 - Heading 3
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
No Background - Heading 2
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
White Background - Heading 3
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
White Background - Heading 2
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
Dark Blue Background - Heading 3
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
Dark Blue Background - Heading 2
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
Light Blue Background - Heading 3
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
Light Blue Background - Heading 2
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
Grey Background - Heading 3
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
Grey Background - Heading 2
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
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 - Heading 3
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
No Background - Heading 2
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
White Background - Heading 3
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
White Background - Heading 2
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
Dark Blue Background - Heading 3
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
Dark Blue Background - Heading 2
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
Light Blue Background - Heading 3
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
Light Blue Background - Heading 2
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
Grey Background - Heading 3
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
Grey Background - Heading 2
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. Praesent pretium eu quam sit amet vestibulum. Duis quis consequat lacus. Proin venenatis pharetra pretium. Morbi non finibus eros. Vestibulum sed rhoncus velit, nec aliquet elit. Sed luctus finibus turpis, a cursus nunc maximus eu. Donec nec ante ac odio aliquet cursus eget eget turpis.
