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.

All cards must have at least one CTA (link or button).

Card features may include:

  • Background Image (static image, video thumbnail or inline video player)
  • Icon
  • Title
  • Subheading or Description
  • Button

In right-to-left languages, the order and alignment of card elements is reversed.

Cards should not be used for marketing promotions.

Card Body

For 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.

For multi content cards, the card body is always displayed beneath the image.

Value Proposition

The proposition row is displayed flex-width and immediately preceding the footer.

On smaller breakpoints, the 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.

To be determined.