Cards are used to entice users to navigate from one area of the site to another. The goal is to quickly get users to relevant content that is of interest to them.
Card placement is generally lower on a page and they should not be confused with banners.
Cards should not be used for static marketing promotions, but rather for navigation and page actions.
All cards must include at least one CTA (link or button).
Card features may include:
On smaller breakpoints, any buttons in a card are replaced with links. When this happens...
In right-to-left languages, the order and alignment of card elements is reversed.
On larger breakpoints the card body is overlaid on top of the background image.
On smaller breakpoints the card body is displayed beneath the image.
The card body is always displayed beneath the image.
The card body location is based upon its orientation and alignment:
On smaller breakpoints, side by side cards become vertically oriented.
The content always consists of text on the left and an image on the right, even if the image has opacity 0% (i.e. it's an invisible placeholder).
The card and its content takes up only 6 columns on larger breakpoints, and the entire 12 columns on smaller breakpoints.
A value proposition row is displayed flex-width and immediately preceding the footer.
On smaller breakpoints, the value prop row transforms into a vertical list.
Title case, 2-3 words maximum.
Do not combine actions in a label (exception: "Customize & Buy").
If standard labels don't fit the button's purpose, align label with the task the user is attempting.
Please refer to the Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information regarding call-to-action labels and usage.
To be determined.
The A11Y Style Guide has excellent examples of markup for cards.
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.
Cards are composites of sub-elements, for which accessibility guidelines are documented individually. See also:
Please also refer to keyboard navigation inside components from WAI-ARIA practices 1.1.
Please also refer to these recommendations for composites from WAI-ARIA 1.1.
You may also refer to these tutorials for functional images from Web Accessibility Tutorials.