One-Column with Text
Using One-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.
One-column cards often highlight essential content, display alert messages and disclaimers, or supplement a body of text that users must read and understand. While no character limits exist for one-column cards, they should not include multimedia, such as images or videos.
Title Only (Grey Background)
Dark Blue with Title (Heading 2)
Dark Blue with Title (Heading 3)
Dark Blue with Centred Title (Heading 2)
Dark Blue with Centred Title (Heading 3)
Light Blue with Title (Heading 2)
Light Blue with Title (Heading 3)
Light Blue with Centred Title (Heading 2)
Light Blue with Centred Title (Heading 3)
White with Title (Heading 2)
White with Title (Heading 3)
White with Title (Heading 2)
White with Title (Heading 3)
Title Only (White Background)
Dark Blue with Title (Heading 2)
Dark Blue with Title (Heading 3)
Dark Blue with Centred Title (Heading 2)
Dark Blue with Centred Title (Heading 3)
Light Blue with Title (Heading 2)
Light Blue with Title (Heading 3)
Light Blue with Centred Title (Heading 2)
Light Blue with Centred Title (Heading 3)
White with Title (Heading 2)
White with Title (Heading 3)
White with Title (Heading 2)
White with Title (Heading 3)
Title & Description (Grey Background)
Dark Blue One Column Card (Heading 2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna sapien, euismod vitae ultricies vitae, aliquet a ipsum. Duis in pulvinar dolor. Etiam pharetra condimentum ante vitae suscipit. Nunc in turpis quis augue sollicitudin aliquet. Nulla vestibulum scelerisque eleifend. Maecenas auctor nibh at odio vehicula dignissim. Donec posuere hendrerit placerat. Vestibulum sed arcu consectetur, fringilla turpis nec, varius dolor. Cras vel sem auctor, ultrices nisi ut, semper nulla. Donec ut orci sed nulla tempus convallis ac finibus arcu. Cras maximus, augue ac tristique sollicitudin, eros mi dictum erat, lacinia facilisis massa mi eget lectus. Nunc consequat est at orci rhoncus, eu eleifend ligula pulvinar. Cras sit amet diam nec enim ultricies blandit. Sed porttitor sagittis mi, ut fringilla leo hendrerit lacinia. Aliquam maximus quis sapien eu maximus.
Dark Blue One Column Card (Heading 3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna sapien, euismod vitae ultricies vitae, aliquet a ipsum. Duis in pulvinar dolor. Etiam pharetra condimentum ante vitae suscipit. Nunc in turpis quis augue sollicitudin aliquet. Nulla vestibulum scelerisque eleifend. Maecenas auctor nibh at odio vehicula dignissim. Donec posuere hendrerit placerat. Vestibulum sed arcu consectetur, fringilla turpis nec, varius dolor. Cras vel sem auctor, ultrices nisi ut, semper nulla. Donec ut orci sed nulla tempus convallis ac finibus arcu. Cras maximus, augue ac tristique sollicitudin, eros mi dictum erat, lacinia facilisis massa mi eget lectus. Nunc consequat est at orci rhoncus, eu eleifend ligula pulvinar. Cras sit amet diam nec enim ultricies blandit. Sed porttitor sagittis mi, ut fringilla leo hendrerit lacinia. Aliquam maximus quis sapien eu maximus.
Light Blue One Column Card (Heading 2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna sapien, euismod vitae ultricies vitae, aliquet a ipsum. Duis in pulvinar dolor. Etiam pharetra condimentum ante vitae suscipit. Nunc in turpis quis augue sollicitudin aliquet. Nulla vestibulum scelerisque eleifend. Maecenas auctor nibh at odio vehicula dignissim. Donec posuere hendrerit placerat. Vestibulum sed arcu consectetur, fringilla turpis nec, varius dolor. Cras vel sem auctor, ultrices nisi ut, semper nulla. Donec ut orci sed nulla tempus convallis ac finibus arcu. Cras maximus, augue ac tristique sollicitudin, eros mi dictum erat, lacinia facilisis massa mi eget lectus. Nunc consequat est at orci rhoncus, eu eleifend ligula pulvinar. Cras sit amet diam nec enim ultricies blandit. Sed porttitor sagittis mi, ut fringilla leo hendrerit lacinia. Aliquam maximus quis sapien eu maximus.
Light Blue One Column Card (Heading 3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna sapien, euismod vitae ultricies vitae, aliquet a ipsum. Duis in pulvinar dolor. Etiam pharetra condimentum ante vitae suscipit. Nunc in turpis quis augue sollicitudin aliquet. Nulla vestibulum scelerisque eleifend. Maecenas auctor nibh at odio vehicula dignissim. Donec posuere hendrerit placerat. Vestibulum sed arcu consectetur, fringilla turpis nec, varius dolor. Cras vel sem auctor, ultrices nisi ut, semper nulla. Donec ut orci sed nulla tempus convallis ac finibus arcu. Cras maximus, augue ac tristique sollicitudin, eros mi dictum erat, lacinia facilisis massa mi eget lectus. Nunc consequat est at orci rhoncus, eu eleifend ligula pulvinar. Cras sit amet diam nec enim ultricies blandit. Sed porttitor sagittis mi, ut fringilla leo hendrerit lacinia. Aliquam maximus quis sapien eu maximus.
Grey One Column Card (Heading 2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna sapien, euismod vitae ultricies vitae, aliquet a ipsum. Duis in pulvinar dolor. Etiam pharetra condimentum ante vitae suscipit. Nunc in turpis quis augue sollicitudin aliquet. Nulla vestibulum scelerisque eleifend. Maecenas auctor nibh at odio vehicula dignissim. Donec posuere hendrerit placerat. Vestibulum sed arcu consectetur, fringilla turpis nec, varius dolor. Cras vel sem auctor, ultrices nisi ut, semper nulla. Donec ut orci sed nulla tempus convallis ac finibus arcu. Cras maximus, augue ac tristique sollicitudin, eros mi dictum erat, lacinia facilisis massa mi eget lectus. Nunc consequat est at orci rhoncus, eu eleifend ligula pulvinar. Cras sit amet diam nec enim ultricies blandit. Sed porttitor sagittis mi, ut fringilla leo hendrerit lacinia. Aliquam maximus quis sapien eu maximus.
Grey One Column Card (Heading 3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna sapien, euismod vitae ultricies vitae, aliquet a ipsum. Duis in pulvinar dolor. Etiam pharetra condimentum ante vitae suscipit. Nunc in turpis quis augue sollicitudin aliquet. Nulla vestibulum scelerisque eleifend. Maecenas auctor nibh at odio vehicula dignissim. Donec posuere hendrerit placerat. Vestibulum sed arcu consectetur, fringilla turpis nec, varius dolor. Cras vel sem auctor, ultrices nisi ut, semper nulla. Donec ut orci sed nulla tempus convallis ac finibus arcu. Cras maximus, augue ac tristique sollicitudin, eros mi dictum erat, lacinia facilisis massa mi eget lectus. Nunc consequat est at orci rhoncus, eu eleifend ligula pulvinar. Cras sit amet diam nec enim ultricies blandit. Sed porttitor sagittis mi, ut fringilla leo hendrerit lacinia. Aliquam maximus quis sapien eu maximus.
White One Column Card (Heading 2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna sapien, euismod vitae ultricies vitae, aliquet a ipsum. Duis in pulvinar dolor. Etiam pharetra condimentum ante vitae suscipit. Nunc in turpis quis augue sollicitudin aliquet. Nulla vestibulum scelerisque eleifend. Maecenas auctor nibh at odio vehicula dignissim. Donec posuere hendrerit placerat. Vestibulum sed arcu consectetur, fringilla turpis nec, varius dolor. Cras vel sem auctor, ultrices nisi ut, semper nulla. Donec ut orci sed nulla tempus convallis ac finibus arcu. Cras maximus, augue ac tristique sollicitudin, eros mi dictum erat, lacinia facilisis massa mi eget lectus. Nunc consequat est at orci rhoncus, eu eleifend ligula pulvinar. Cras sit amet diam nec enim ultricies blandit. Sed porttitor sagittis mi, ut fringilla leo hendrerit lacinia. Aliquam maximus quis sapien eu maximus.
White One Column Card (Heading 3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna sapien, euismod vitae ultricies vitae, aliquet a ipsum. Duis in pulvinar dolor. Etiam pharetra condimentum ante vitae suscipit. Nunc in turpis quis augue sollicitudin aliquet. Nulla vestibulum scelerisque eleifend. Maecenas auctor nibh at odio vehicula dignissim. Donec posuere hendrerit placerat. Vestibulum sed arcu consectetur, fringilla turpis nec, varius dolor. Cras vel sem auctor, ultrices nisi ut, semper nulla. Donec ut orci sed nulla tempus convallis ac finibus arcu. Cras maximus, augue ac tristique sollicitudin, eros mi dictum erat, lacinia facilisis massa mi eget lectus. Nunc consequat est at orci rhoncus, eu eleifend ligula pulvinar. Cras sit amet diam nec enim ultricies blandit. Sed porttitor sagittis mi, ut fringilla leo hendrerit lacinia. Aliquam maximus quis sapien eu maximus.
Title & Description (White Background)
Dark Blue One Column Card (Heading 2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna sapien, euismod vitae ultricies vitae, aliquet a ipsum. Duis in pulvinar dolor. Etiam pharetra condimentum ante vitae suscipit. Nunc in turpis quis augue sollicitudin aliquet. Nulla vestibulum scelerisque eleifend. Maecenas auctor nibh at odio vehicula dignissim. Donec posuere hendrerit placerat. Vestibulum sed arcu consectetur, fringilla turpis nec, varius dolor. Cras vel sem auctor, ultrices nisi ut, semper nulla. Donec ut orci sed nulla tempus convallis ac finibus arcu. Cras maximus, augue ac tristique sollicitudin, eros mi dictum erat, lacinia facilisis massa mi eget lectus. Nunc consequat est at orci rhoncus, eu eleifend ligula pulvinar. Cras sit amet diam nec enim ultricies blandit. Sed porttitor sagittis mi, ut fringilla leo hendrerit lacinia. Aliquam maximus quis sapien eu maximus.
Dark Blue One Column Card (Heading 3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna sapien, euismod vitae ultricies vitae, aliquet a ipsum. Duis in pulvinar dolor. Etiam pharetra condimentum ante vitae suscipit. Nunc in turpis quis augue sollicitudin aliquet. Nulla vestibulum scelerisque eleifend. Maecenas auctor nibh at odio vehicula dignissim. Donec posuere hendrerit placerat. Vestibulum sed arcu consectetur, fringilla turpis nec, varius dolor. Cras vel sem auctor, ultrices nisi ut, semper nulla. Donec ut orci sed nulla tempus convallis ac finibus arcu. Cras maximus, augue ac tristique sollicitudin, eros mi dictum erat, lacinia facilisis massa mi eget lectus. Nunc consequat est at orci rhoncus, eu eleifend ligula pulvinar. Cras sit amet diam nec enim ultricies blandit. Sed porttitor sagittis mi, ut fringilla leo hendrerit lacinia. Aliquam maximus quis sapien eu maximus.
Light Blue One Column Card (Heading 2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna sapien, euismod vitae ultricies vitae, aliquet a ipsum. Duis in pulvinar dolor. Etiam pharetra condimentum ante vitae suscipit. Nunc in turpis quis augue sollicitudin aliquet. Nulla vestibulum scelerisque eleifend. Maecenas auctor nibh at odio vehicula dignissim. Donec posuere hendrerit placerat. Vestibulum sed arcu consectetur, fringilla turpis nec, varius dolor. Cras vel sem auctor, ultrices nisi ut, semper nulla. Donec ut orci sed nulla tempus convallis ac finibus arcu. Cras maximus, augue ac tristique sollicitudin, eros mi dictum erat, lacinia facilisis massa mi eget lectus. Nunc consequat est at orci rhoncus, eu eleifend ligula pulvinar. Cras sit amet diam nec enim ultricies blandit. Sed porttitor sagittis mi, ut fringilla leo hendrerit lacinia. Aliquam maximus quis sapien eu maximus.
Light Blue One Column Card (Heading 3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna sapien, euismod vitae ultricies vitae, aliquet a ipsum. Duis in pulvinar dolor. Etiam pharetra condimentum ante vitae suscipit. Nunc in turpis quis augue sollicitudin aliquet. Nulla vestibulum scelerisque eleifend. Maecenas auctor nibh at odio vehicula dignissim. Donec posuere hendrerit placerat. Vestibulum sed arcu consectetur, fringilla turpis nec, varius dolor. Cras vel sem auctor, ultrices nisi ut, semper nulla. Donec ut orci sed nulla tempus convallis ac finibus arcu. Cras maximus, augue ac tristique sollicitudin, eros mi dictum erat, lacinia facilisis massa mi eget lectus. Nunc consequat est at orci rhoncus, eu eleifend ligula pulvinar. Cras sit amet diam nec enim ultricies blandit. Sed porttitor sagittis mi, ut fringilla leo hendrerit lacinia. Aliquam maximus quis sapien eu maximus.
Grey One Column Card (Heading 2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna sapien, euismod vitae ultricies vitae, aliquet a ipsum. Duis in pulvinar dolor. Etiam pharetra condimentum ante vitae suscipit. Nunc in turpis quis augue sollicitudin aliquet. Nulla vestibulum scelerisque eleifend. Maecenas auctor nibh at odio vehicula dignissim. Donec posuere hendrerit placerat. Vestibulum sed arcu consectetur, fringilla turpis nec, varius dolor. Cras vel sem auctor, ultrices nisi ut, semper nulla. Donec ut orci sed nulla tempus convallis ac finibus arcu. Cras maximus, augue ac tristique sollicitudin, eros mi dictum erat, lacinia facilisis massa mi eget lectus. Nunc consequat est at orci rhoncus, eu eleifend ligula pulvinar. Cras sit amet diam nec enim ultricies blandit. Sed porttitor sagittis mi, ut fringilla leo hendrerit lacinia. Aliquam maximus quis sapien eu maximus.
Grey One Column Card (Heading 3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna sapien, euismod vitae ultricies vitae, aliquet a ipsum. Duis in pulvinar dolor. Etiam pharetra condimentum ante vitae suscipit. Nunc in turpis quis augue sollicitudin aliquet. Nulla vestibulum scelerisque eleifend. Maecenas auctor nibh at odio vehicula dignissim. Donec posuere hendrerit placerat. Vestibulum sed arcu consectetur, fringilla turpis nec, varius dolor. Cras vel sem auctor, ultrices nisi ut, semper nulla. Donec ut orci sed nulla tempus convallis ac finibus arcu. Cras maximus, augue ac tristique sollicitudin, eros mi dictum erat, lacinia facilisis massa mi eget lectus. Nunc consequat est at orci rhoncus, eu eleifend ligula pulvinar. Cras sit amet diam nec enim ultricies blandit. Sed porttitor sagittis mi, ut fringilla leo hendrerit lacinia. Aliquam maximus quis sapien eu maximus.
White One Column Card (Heading 2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna sapien, euismod vitae ultricies vitae, aliquet a ipsum. Duis in pulvinar dolor. Etiam pharetra condimentum ante vitae suscipit. Nunc in turpis quis augue sollicitudin aliquet. Nulla vestibulum scelerisque eleifend. Maecenas auctor nibh at odio vehicula dignissim. Donec posuere hendrerit placerat. Vestibulum sed arcu consectetur, fringilla turpis nec, varius dolor. Cras vel sem auctor, ultrices nisi ut, semper nulla. Donec ut orci sed nulla tempus convallis ac finibus arcu. Cras maximus, augue ac tristique sollicitudin, eros mi dictum erat, lacinia facilisis massa mi eget lectus. Nunc consequat est at orci rhoncus, eu eleifend ligula pulvinar. Cras sit amet diam nec enim ultricies blandit. Sed porttitor sagittis mi, ut fringilla leo hendrerit lacinia. Aliquam maximus quis sapien eu maximus.
White One Column Card (Heading 3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus urna sapien, euismod vitae ultricies vitae, aliquet a ipsum. Duis in pulvinar dolor. Etiam pharetra condimentum ante vitae suscipit. Nunc in turpis quis augue sollicitudin aliquet. Nulla vestibulum scelerisque eleifend. Maecenas auctor nibh at odio vehicula dignissim. Donec posuere hendrerit placerat. Vestibulum sed arcu consectetur, fringilla turpis nec, varius dolor. Cras vel sem auctor, ultrices nisi ut, semper nulla. Donec ut orci sed nulla tempus convallis ac finibus arcu. Cras maximus, augue ac tristique sollicitudin, eros mi dictum erat, lacinia facilisis massa mi eget lectus. Nunc consequat est at orci rhoncus, eu eleifend ligula pulvinar. Cras sit amet diam nec enim ultricies blandit. Sed porttitor sagittis mi, ut fringilla leo hendrerit lacinia. Aliquam maximus quis sapien eu maximus.
