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

Cards

Horizontal Card

<div class="dds__col-sm-12 dds__col-md-8 dds__col-lg-8 dds__mb-8"> <div class="dds__card dds__mt-5 dds__mb-5"> <img class="dds__card-img-top dds__img-fluid" src="//placehold.it/750x275?text=750%20X%20275" alt="Card image caption"> <div class="dds__card-body"> <a class="dds__card-link" href="javascript:;" aria-label="A useful link description goes here">Lorem ipsum dolor amet health goth mlkshk tbh sartorial snackwave, eu mustache truffaut hot chicken flexitarian +1.</a> </div>
</div></div>

2-Up Horizontal Cards

<div class="dds__col-sm-12 dds__col-md-6 dds__col-lg-6 dds__mb-6"> <div class="dds__card dds__mt-5 dds__mb-5"> <img class="dds__card-img-top dds__img-fluid" src="//placehold.it/750x275?text=750%20X%20275" alt="Card image caption"> <div class="dds__card-body"> <a class="dds__card-link" href="javascript:;" aria-label="A useful link description goes here">Lorem ipsum dolor amet health goth mlkshk tbh sartorial snackwave, eu mustache truffaut hot chicken flexitarian +1.</a> </div>
</div> </div> <div class="dds__col-sm-12 dds__col-md-6 dds__col-lg-6 dds__mb-6"> <div class="dds__card dds__mt-5 dds__mb-5"> <img class="dds__card-img-top dds__img-fluid" src="//placehold.it/750x275?text=750%20X%20275" alt="Card image caption"> <div class="dds__card-body"> <a class="dds__card-link" href="javascript:;" aria-label="A useful link description goes here">Lorem ipsum dolor amet health goth mlkshk tbh sartorial snackwave, eu mustache truffaut hot chicken flexitarian +1.</a> </div>
</div> </div>

4-Up Horizontal Cards

<div class="dds__col-sm-12 dds__col-md-6 dds__col-lg-6 dds__col-xl-3 dds__mb-3"> <div class="dds__card dds__mt-5 dds__mb-5"> <img class="dds__card-img-top dds__img-fluid" src="//placehold.it/750x275?text=750%20X%20275" alt="Card image caption"> <div class="dds__card-body"> <a class="dds__card-link" href="javascript:;" aria-label="A useful link description goes here">Lorem ipsum dolor amet health goth mlkshk tbh sartorial snackwave, eu mustache truffaut hot chicken flexitarian +1.</a> </div>
</div> </div><div class="dds__col-sm-12 dds__col-md-6 dds__col-lg-6 dds__col-xl-3 dds__mb-3"> <div class="dds__card dds__mt-5 dds__mb-5"> <img class="dds__card-img-top dds__img-fluid" src="//placehold.it/750x275?text=750%20X%20275" alt="Card image caption"> <div class="dds__card-body"> <a class="dds__card-link" href="javascript:;" aria-label="A useful link description goes here">Lorem ipsum dolor amet health goth mlkshk tbh sartorial snackwave, eu mustache truffaut hot chicken flexitarian +1.</a> </div>
</div> </div> <div class="dds__col-sm-12 dds__col-md-6 dds__col-lg-6 dds__col-xl-3 dds__mb-3"> <div class="dds__card dds__mt-5 dds__mb-5"> <img class="dds__card-img-top dds__img-fluid" src="//placehold.it/750x275?text=750%20X%20275" alt="Card image caption"> <div class="dds__card-body"> <a class="dds__card-link" href="javascript:;" aria-label="A useful link description goes here">Lorem ipsum dolor amet health goth mlkshk tbh sartorial snackwave, eu mustache truffaut hot chicken flexitarian +1.</a> </div>
</div> </div> <div class="dds__col-sm-12 dds__col-md-6 dds__col-lg-6 dds__col-xl-3 dds__mb-3"> <div class="dds__card dds__mt-5 dds__mb-5"> <img class="dds__card-img-top dds__img-fluid" src="//placehold.it/750x275?text=750%20X%20275" alt="Card image caption"> <div class="dds__card-body"> <a class="dds__card-link" href="javascript:;" aria-label="A useful link description goes here">Lorem ipsum dolor amet health goth mlkshk tbh sartorial snackwave, eu mustache truffaut hot chicken flexitarian +1.</a> </div>
</div> </div>

Consumer Product Card

<div class="dds__col-sm-12 dds__col-md-12 dds__col-lg-12 dds__col-xl-6 dds__px-0 dds__mb-5"> <div class="dds__consumer-product-card"> <a href="https://www.dell.com/" role="none" tabindex="-1"> <img class="dds__card-img-top dds__img-fluid" src="//placehold.it/750x275?text=750%20X%20275" alt="Card image caption"></img> </a> <div class="dds__card-body"> <a href="javascript:;" class="dds__d-block" aria-label="A useful link description goes here"> <h5> Lorem ipsum dolor sit am. </h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros</p> </a> <a href="javascript:;" class="dds__btn dds__btn-primary" aria-label="A useful link description goes here">Sample CTA</a> </div>
</div> </div>

Multi Content Card

<div class="dds__col-sm-12 dds__col-md-6 dds__col-lg-6 dds__mb-6"> <div class="dds__card"> <img src="//placehold.it/750x275?text=750%20X%20275" alt="Card image caption" class="dds__card-img-top"> <div class="dds__card-body"> <h5 class="dds__card-title">Card title</h5> <p class="dds__card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> <ul class="dds__list-group dds__list-group-flush"> <li class="dds__list-group-item">Cras justo odio</li> <li class="dds__list-group-item">Dapibus ac facilisis in</li> <li class="dds__list-group-item">Vestibulum at eros</li> </ul> <ul class="dds__card-body dds__list-inline"> <li class="dds__list-inline-item"> <a href="#">Card link</a> </li> <li class="dds__list-inline-item"> <a href="#">Second link</a> </li> <li class="dds__list-inline-item"> <a href="#">Third link</a> </li> </ul>
</div> </div>

Value Propositions

Value Propositions

<div class="dds__value-prop dds__d-flex dds__flex-row dds__flex-wrap"> <a class="dds__btn-link dds__col-sm-12 dds__col-md-4 dds__col-lg-4" href=""> <i class="dds__icons dds__calculator dds__align-self-center" aria-hidden="true"></i> <div class="dds__value-prop-text"> <h5>Quick. Simple. Financing.</h5> <p>Financing for qualified customers with Dell Preferred Account.</p> </div> </a> <a class="dds__btn-link dds__col-sm-12 dds__col-md-4 dds__col-lg-4" href=""> <i class="dds__icons dds__shipping dds__align-self-center" aria-hidden="true"></i> <div class="dds__value-prop-text"> <h5>Free Shipping &amp; Price Match Guarantee</h5> <p>Enjoy free shipping, easy returns, and price match guarantee.</p> </div> </a> <a class="dds__btn-link dds__col-sm-12 dds__col-md-4 dds__col-lg-4" href=""> <i class="dds__icons dds__star dds__align-self-center" aria-hidden="true"></i> <div class="dds__value-prop-text"> <h5>Dell Rewards</h5> <p>Join for free and get up to 6% back in rewards and free expedited delivery.*</p> </div> </a>
</div>

No items found.

No items found.

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.