Cards
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.
Coded Components
Helper classes: Looking for a complete list of helper classes for these components?View helper classes
Redlines: We don't include redline comps because it's always more accurate to use developer tools to inspect the coded components, or a plugin such as the Prism Redline Tool.
Horizontal Card
2-Up Horizontal Cards
4-Up Horizontal Cards
Consumer Product Card
Multi Content Card
Value Propositions
No items found.
No items found.
Heading
No items found.
Usage
Overview
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:
- Image (static image, video thumbnail or inline video player). Click the image to navigate or play a video.
- Icon (see value propositions).
- Title (typically a clickable link or button styled as a link, but may also be static text).
- Subheading or Description (color varies by card type).
- Button (produces the same result as clicking the image).
- Dropdown Button (containing more links and/or actions).
- Link List (links and/or buttons styled as links).
- Show More/Less (if a link list is too long).
- Updated Status (static text that shows when a target resource was last updated).
On smaller breakpoints, any buttons in a card are replaced with links. When this happens...
- If it was a link styled as a button then it becomes a link.
- If it was an actual button then it becomes a button styled as a link.
In right-to-left languages, the order and alignment of card elements is reversed.
Card Body
Horizontal Cards and Consumer Product Cards
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.
Multi Content Cards
The card body is always displayed beneath the image.
Side-by-Side
The card body location is based upon its orientation and alignment:
- To the right of the image in a left aligned horizontal card.
- To the left of the image in a right aligned horizontal card.
- Beneath the image in vertically oriented card.
On smaller breakpoints, side by side cards become vertically oriented.
Marketing Cards
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.
Value Propositions
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.
Do's and Don'ts
Do.
Don't.
Do.
Don't.
Do.
Don't.
Common Button Labels and Usage
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.
Button
Label:
Corresponding Action:
Add to
Cart
Search
Cancel
Save
Edit
Delete
Continue
Next/Previous
Submit
Select
Sign
In/Sign Out
View
Details
Ok/Cancel
Learn
More
Close
Takes
users to Cart page, with item added
Used
for search buttons
Takes
users back to entry point for a task
Used to
save an item
Navigates users to change an item
Deletes
an item on the page, usually with a verification step
Used as
progression
Used
as forward and backward navigation (Next is primary, Previous is secondary)
Used
to submit a task or info
Used
for choosing items in a task flow
Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout
Used
instead of “Select” in cases of product details or within learn content
For
use in modal verification steps when more specific CTAs will not fit due to space
Used
to link users to more learning content or contextual help
Used
within modal windows
Accessibility
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.