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.

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

Types

Variants

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