Cards and Card Sections
- Mike McCaffrey
- Kristina Kaminski
The heading should be the first element in the card link, so it is read to screenreaders first, and flex should be used to reorder the element if there needs to be a different visual order.
Card Sections
Card sections are usually comprised of an <h2> heading, a group of cards, and sometimes a "view more" link.
Headings provide semantic context to the content within a section. Even if the design of a card section doesn't visibly present a heading, it's still important to include one for contextual clarity, which can be visually hidden if needed.
Cards
A card is a component that displays content and actions centred around a single topic in an organized and visually appealing way.
To guarantee screen readers read card content in the correct order, follow the Structure guidelines provided below. This sequence ensures a clear and logical flow of information within the card, making it easier for users to understand and interact with the content.
If there's a need to change the visual order, utilize the "flex" property for reordering the elements.
Structure
Heading - The primary heading/title of the card for context, usually placed in a
<h3>heading.Description - The core information.
Media - Image or graphic related to the content.
Meta Data - Additional information such as dates, authors, categories, or terms.
*CTA Link(s) - Call to action link(s). See note below.
*Note: If the card is already contained within a link, refrain from inserting another link inside the card unless the additional link serves a purely decorative purpose. We should avoid stacking one link on top of another, as it can lead to confusion. When one link is nested within another, it creates ambiguity for both users and web browsers.
Resources
How to reorder elements using flex Ordering flex items - CSS: Cascading Style Sheets | MDN