Product Stack

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.

MVP Product Stacks with Overflow (refresh the page if they look broken)

<div data-toggle="dds__product-stack" id="productstack1"> <div class="dds__ps-overflow-controls"> <div class="dds__items-view"></div> <button role="button" type="button" class="dds__btn dds__btn-primary dds__text-truncate dds__overflow-control-left" data-toggle="dds__product-stack-control-left" > <svg class="dds__chevron-left" aria-hidden="true" focusable="false"> <use xlink:href="#dds__chevron-left"></use> </svg> <span class="dds__ps-btn-text">Previous</span> </button> <button role="button" type="button" class="dds__btn dds__btn-primary dds__text-truncate dds__overflow-control-right" data-toggle="dds__product-stack-control-right" > <span class="dds__ps-btn-text">Next</span> <svg class="dds__chevron-right" aria-hidden="true" focusable="false"> <use xlink:href="#dds__chevron-right"></use> </svg> </button> </div> <ul class="dds__product-stack-wrapper"> <li class="dds__col-9 dds__col-sm-9 dds__col-md-4 dds__col-lg-3"> <ul class="dds__product-stack"> <li class="dds__ps-image"> <a type="img" href="#" title="Product title"> <img src="//uicore.dellcdn.com/site/1.6.1/5c76c529d2ffcf0165d4365b/5e95ba50c9fce1d0fd34e320_PS-xps-13.png" alt="product title" /> </a> </li> <li class="dds__ps-title"> <h4> <a href="#">Product Title Product Title</a> </h4> </li> <li class="dds__ps-base-price"> <div> <s class="dds__ps-price-original">$0,000.00</s> <strong class="dds__ps-price-adjusted">$0,000.00</strong> </div> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-details"> <ul class="dds__list-group"> <li class="dds__list-group-item-unordered"> Organic lyft forage poke farm-to-table, selfies listicle cred truffaut. </li> <li class="dds__list-group-item-unordered"> Venmo biodiesel tote bag locavore williamsburg adaptogen. </li> <li class="dds__list-group-item-unordered">Cronut kickstarter next level</li> <li class="dds__list-group-item-unordered">Sartorial aesthetic vice paleo cloud bread.</li> <li class="dds__list-group-item-unordered"> Biodiesel artisan messenger bag asymmetrical organic bitters. </li> </ul> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-description"> <p>Product description in paragraph format product description in paragraph format.</p> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-price-attributes"> <div class="dds__ps-price-attribute"> <span class="dds__ps-tooltip" data-toggle="dds__tooltip" data-options='{"data_placement":"right", "data_title":"Est. Value is Dell’s estimate of product value based on industry data, including the prices at which third-party retailers have offered or valued the same or comparable products, in its most recent survey of major online and/or off-line retailers. Third-party retailer data may not be based on actual sales."}' tabindex="0" ><small>Est. value</small></span > <small><s>$0,000.00</s></small> </div> <div class="dds__ps-price-attribute"> <button role="button" class="dds__btn dds__btn-link" data-toggle="dds__modal" data-target="#examplePSModal" > <small>Total Savings</small> </button> <small>$000.00</small> </div> <div class="dds__ps-price-attribute"> <span ><small><strong>Standard Delivery</strong></small></span > <small class="dds__ps-tooltip" data-toggle="dds__tooltip" data-options='{"data_placement":"right", "data_title":"Exceptions to included shipping prices may apply for remote locations."}' tabindex="0" ><strong>FREE</strong></small > </div> <div class="dds__ps-price-attribute"> <span><strong>Dell Price</strong></span> <strong>$0,000.00</strong> </div> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-button"> <button role="button" type="button" class="dds__btn dds__btn-purchase dds__text-truncate"> Customize & Buy </button> </li> </ul> </li> <li class="dds__col-9 dds__col-sm-9 dds__col-md-4 dds__col-lg-3"> <ul class="dds__product-stack"> <li class="dds__ps-image"> <a type="img" href="#" title="Product title"> <img src="//uicore.dellcdn.com/site/1.6.1/5c76c529d2ffcf0165d4365b/5e95ba50c9fce1d0fd34e320_PS-xps-13.png" alt="product title" /> </a> </li> <li class="dds__ps-title"> <h4> <a href="#">Product Title Product Title</a> </h4> </li> <li class="dds__ps-base-price"> <div> <s class="dds__ps-price-original">$0,000.00</s> <strong class="dds__ps-price-adjusted">$0,000.00</strong> </div> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-details"> <ul class="dds__list-group"> <li class="dds__list-group-item-unordered"> Organic lyft forage poke farm-to-table, selfies listicle cred truffaut. </li> <li class="dds__list-group-item-unordered"> Venmo biodiesel tote bag locavore williamsburg adaptogen. Hexagon tousled cronut iceland enamel pin adaptogen master cleanse quinoa activated church-key brooklyn beard butcher. </li> <li class="dds__list-group-item-unordered">Cronut kickstarter next level</li> <li class="dds__list-group-item-unordered">Sartorial aesthetic vice paleo cloud bread.</li> <li class="dds__list-group-item-unordered"> Biodiesel artisan messenger bag asymmetrical organic bitters. </li> </ul> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-description"> <p>Product description in paragraph format product description in paragraph format.</p> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-price-attributes"> <div class="dds__ps-price-attribute"> <span><small>List Price</small></span> <small><s>$0,000.00</s></small> </div> <div class="dds__ps-price-attribute"> <button role="button" class="dds__btn dds__btn-link" data-toggle="dds__modal" data-target="#examplePSModal1" > <small>Total Savings</small> </button> <small>$00.00 (00% off)</small> </div> <div class="dds__ps-price-attribute"> <span ><small><strong>Shipping</strong></small></span > <button class="dds__btn-link" data-toggle="dds__popover" data-placement="right" aria-haspopup="dialog" tabindex="0" > <small>Free</small> </button> </div> <div class="dds__ps-price-attribute"> <span><strong>Dell Price</strong></span> <strong>$0,000.00</strong> </div> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-button"> <button role="button" type="button" class="dds__btn dds__btn-purchase dds__text-truncate"> View Details </button> </li> </ul> </li> <li class="dds__col-9 dds__col-sm-9 dds__col-md-4 dds__col-lg-3"> <ul class="dds__product-stack"> <li class="dds__ps-image"> <a type="img" href="#" title="Product title"> <img src="//uicore.dellcdn.com/site/1.6.1/5c76c529d2ffcf0165d4365b/5e95ba50c9fce1d0fd34e320_PS-xps-13.png" alt="product title" /> </a> </li> <li class="dds__ps-title"> <h4> <a href="#">Product Title Product Title</a> </h4> </li> <li class="dds__ps-base-price"> <div> <s class="dds__ps-price-original">$0,000.00</s> <strong class="dds__ps-price-adjusted">$0,000.00</strong> </div> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-details"> <ul class="dds__list-group"> <li class="dds__list-group-item-unordered">Techy Spechy 1.</li> <li class="dds__list-group-item-unordered">Techy Spechy 2.</li> <li class="dds__list-group-item-unordered">Techy Spechy 3.</li> <li class="dds__list-group-item-unordered">Techy Spechy 4.</li> <li class="dds__list-group-item-unordered">Techy Spechy 5.</li> </ul> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-description"> <p>Product description in paragraph format product description in paragraph format.</p> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-price-attributes"> <div class="dds__ps-price-attribute"> <span><small>List Price</small></span> <small><s>$0,000.00</s></small> </div> <div class="dds__ps-price-attribute"> <span><small>Total Savings</small></span> <small>$00.00</small> </div> <div class="dds__ps-price-attribute"> <span ><small><strong>Standard Delivery</strong></small></span > <small><strong>Free</strong></small> </div> <div class="dds__ps-price-attribute"> <span><strong>Dell Price</strong></span> <strong>$0,000.00</strong> </div> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-button"> <button role="button" type="button" class="dds__btn dds__btn-purchase dds__text-truncate"> Customize & Buy </button> <button role="button" type="button" class="dds__btn dds__btn-secondary dds__text-truncate"> Add to Cart </button> </li> </ul> </li> <li class="dds__col-9 dds__col-sm-9 dds__col-md-4 dds__col-lg-3"> <ul class="dds__product-stack"> <li class="dds__ps-image"> <a type="img" href="#" title="Product title"> <img src="//uicore.dellcdn.com/site/1.6.1/5c76c529d2ffcf0165d4365b/5e95ba50c9fce1d0fd34e320_PS-xps-13.png" alt="product title" /> </a> </li> <li class="dds__ps-title"> <h4> <a href="#">Product Title Product Title</a> </h4> </li> <li class="dds__ps-base-price"> <div> <s class="dds__ps-price-original">$0,000.00</s> <strong class="dds__ps-price-adjusted">$0,000.00</strong> </div> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-details"> <ul class="dds__list-group"> <li class="dds__list-group-item-unordered"> Organic lyft forage poke farm-to-table, selfies listicle cred truffaut. </li> <li class="dds__list-group-item-unordered"> Venmo biodiesel tote bag locavore williamsburg adaptogen. Hexagon tousled cronut iceland enamel pin adaptogen master cleanse quinoa activated church-key brooklyn beard butcher. </li> <li class="dds__list-group-item-unordered">Cronut kickstarter next level</li> <li class="dds__list-group-item-unordered">Sartorial aesthetic vice paleo cloud bread.</li> <li class="dds__list-group-item-unordered"> Biodiesel artisan messenger bag asymmetrical organic bitters. </li> </ul> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-description"> <p>Product description in paragraph format product description in paragraph format.</p> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-price-attributes"> <div class="dds__ps-price-attribute"> <span class="dds__ps-tooltip" data-toggle="dds__tooltip" data-options='{"data_placement":"right", "data_title":"Est. Value is Dell’s estimate of product value based on industry data, including the prices at which third-party retailers have offered or valued the same or comparable products, in its most recent survey of major online and/or off-line retailers. Third-party retailer data may not be based on actual sales."}' tabindex="0" ><small>Est. value</small></span > <small><s>$0,000.00</s></small> </div> <div class="dds__ps-price-attribute dds__text-berry"> <small>Save</small> <small>$00.00 (00% off)</small> </div> <div class="dds__ps-price-attribute"> <span ><small><strong>Shipping</strong></small></span > <small>FREE</small> </div> <div class="dds__ps-price-attribute"> <span><strong>Dell Price</strong></span> <strong>$0,000.00</strong> </div> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-button"> <button role="button" type="button" class="dds__btn dds__btn-purchase dds__text-truncate"> View Details </button> </li> </ul> </li> <li class="dds__col-9 dds__col-sm-9 dds__col-md-4 dds__col-lg-3"> <ul class="dds__product-stack"> <li class="dds__ps-image"> <a type="img" href="#" title="Product title"> <img src="//uicore.dellcdn.com/site/1.6.1/5c76c529d2ffcf0165d4365b/5e95ba50c9fce1d0fd34e320_PS-xps-13.png" alt="product title" /> </a> </li> <li class="dds__ps-title"> <h4> <a href="#">Product Title Product Title</a> </h4> </li> <li class="dds__ps-base-price"> <div> <s class="dds__ps-price-original">$0,000.00</s> <strong class="dds__ps-price-adjusted">$0,000.00</strong> </div> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-details"> <ul class="dds__list-group"> <li class="dds__list-group-item-unordered"> Organic lyft forage poke farm-to-table, selfies listicle cred truffaut. </li> <li class="dds__list-group-item-unordered"> Venmo biodiesel tote bag locavore williamsburg adaptogen. Hexagon tousled cronut iceland enamel pin adaptogen master cleanse quinoa activated church-key brooklyn beard butcher. </li> <li class="dds__list-group-item-unordered">Cronut kickstarter next level</li> <li class="dds__list-group-item-unordered">Sartorial aesthetic vice paleo cloud bread.</li> <li class="dds__list-group-item-unordered"> Biodiesel artisan messenger bag asymmetrical organic bitters. </li> </ul> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-description"> <p>Product description in paragraph format product description in paragraph format.</p> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-price-attributes"> <p><strong>$00.00/month</strong></p> <span>for <a href="#">00 months**</a></span> </li> <hr class="dds__ps-hr" /> <li class="dds__ps-button"> <button role="button" type="button" class="dds__btn dds__btn-purchase dds__text-truncate"> View Details </button> </li> </ul> </li> </ul> <div class="dds__ps-overflow-controls"> <div class="dds__items-view"></div> <button role="button" type="button" class="dds__btn dds__btn-primary dds__text-truncate dds__overflow-control-left" data-toggle="dds__product-stack-control-left" > <svg class="dds__chevron-left" aria-hidden="true" focusable="false"> <use xlink:href="#dds__chevron-left"></use> </svg> <span class="dds__ps-btn-text">Previous</span> </button> <button role="button" type="button" class="dds__btn dds__btn-primary dds__text-truncate dds__overflow-control-right" data-toggle="dds__product-stack-control-right" > <span class="dds__ps-btn-text">Next</span> <svg class="dds__chevron-right" aria-hidden="true" focusable="false"> <use xlink:href="#dds__chevron-right"></use> </svg> </button> </div>
</div> <!-- OPTIONAL MODAL FOR PRODUCT STACK -->
<div id="examplePSModal" tabindex="-1" class="dds__modal dds__fade" role="dialog" aria-labelledby="TotalSavingsDetails"> <div class="dds__modal-dialog" role="document"> <div class="dds__modal-content"> <div class="dds__modal-header"> <h3 class="dds__modal-title" id="TotalSavingsDetails">Total Savings Details</h3> </div> <button class="dds__close" data-dismiss="dds__modal" aria-label="Close"> <span class="dds__icons dds__close-x" aria-hidden="true"></span> </button> <div class="dds__modal-body"> <p>Limited Time Offer!</p> <small >Limited Time Offer! PRICE GUARANTEE does not apply to retail or reseller offers, Dell Outlet, affiliate websites, coupons, auctions or quotes from Dell sales representatives. You must present a valid E-value code or saved cart image with lower price to Dell MPP sales specialist on day of purchase prior to your transaction.</small > </div> </div> </div>
</div>
<div id="examplePSModal1" tabindex="-1" class="dds__modal dds__fade" role="dialog" aria-labelledby="TotalSavingsDetails2"
> <div class="dds__modal-dialog" role="document"> <div class="dds__modal-content"> <div class="dds__modal-header"> <h3 class="dds__modal-title" id="TotalSavingsDetails2">Total Savings Details</h3> </div> <button class="dds__close" data-dismiss="dds__modal" aria-label="Close"> <span class="dds__icons dds__close-x" aria-hidden="true"></span> </button> <div class="dds__modal-body"> <p>Limited Time Offer!</p> <small >Limited Time Offer! PRICE GUARANTEE does not apply to retail or reseller offers, Dell Outlet, affiliate websites, coupons, auctions or quotes from Dell sales representatives. You must present a valid E-value code or saved cart image with lower price to Dell MPP sales specialist on day of purchase prior to your transaction.</small > </div> </div> </div>
</div>

No items found.

Heading

No items found.

Usage

Product stacks are ever evolving components. We recommend that you communicate with individual product teams to understand how they are using their product stacks.

A product stack displays curated, at-a-glance details about a product or offering.

Several stacks are shown at once on larger breakpoints, while fewer are shown on smaller breakpoints.

Items are cycled using Previous and Next buttons that appear both preceding and following the carousel stacks.

A label "X-Y of Y" adjacent to the Previous and Next buttons indicates which stacks are in view.

As screen width narrows, less stacks become visible and the right-most stack clips at the right edge of the container. A horizontal scroll bar is introduced for accessing the overflow content.

For additional rules and guidelines, please see the product stack guide.

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 W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.

See carousels and pagination for accessibility info regarding the Previous and Next buttons.

See checkboxes for accessibility info regarding the Add to Compare checkbox (CTA Substack).

See notifications for accessibility info regarding the marketing notification (Stack Label).

See cards and links for accessibility info regarding the image (Asset Substack), Product Title, Financing/Lease Subprocess, and star Ratings Substack.

For the Tech Specs charts and star Ratings Substack, see:

See typography for accessibility info regarding the Featured Spec, Product Blurb, Pricing Substack, and e-Value Code.

See modals for accessibility info regarding the Special Offers, Pricing Substack, Financing/Lease Subprocess, and ship date (Pricing Substack).

See popovers for accessibility info regarding the Pricing Substack, and Dell Advantage.

See buttons for accessibility info regarding the buttons (CTA Substack).