Product Stacks

A vertical stack of individual elements that provides details about a product or offering based on its location within the purchase path. A product stack is rules-based and has a specific order in which elements should appear, with some of them being required.

Design System Guidelines

Product Stack with MVP Sub-Elements (Carousel)

This variation includes the Design System team's recommended elements for MVP implementation.

In this variation, overflow places the stacks within a carousel.

This variation uses < Previous and Next > controls, in addition to a horizontal scroll bar, for scrolling left/right through the carousel.

To give rows the same height at each breakpoint, find the tallest cell in the row and set the dds__ps-row-# height to that cell's content.

• • 

  • Product title product title product title

  • $0,000.00
    $0,000.00
  • • Tech spec in bullet list format
    • Tech spec in bullet list format
    • Tech spec in bullet list format

  • Product description in paragraph format product description in paragraph format.

  • Est. value

    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.

    $0,000.00
    Total Savings

    $00.00
    Standard Delivery

    Free

    Exceptions to included shipping may apply for remote locations.

    Dell Price

    $0,000,00
  • Customize & Buy
• • 

  • Product title

  • $0,000.00
    $0,000.00
  • • Tech spec in bullet list format
    • Tech spec in bullet list format
    • Tech spec in bullet list format
    • Tech spec in bullet list format

  • Product description in paragraph format product description in paragraph format product description in paragraph format.

  • List Price

    $0,000.00
    Total Savings

    $00.00 (00% off)
    Shipping

    Popover header

    Popover content popover content popover content.

    Free
    Dell Price

    $0,000,00
  • View Details
• • 

  • Product title product title product title

  • $0,000.00
    $0,000.00
  • • Tech spec in bullet list format
    • Tech spec in bullet list format
    • Tech spec in bullet list format

  • Product description in paragraph format product description in paragraph format.

  • List Price

    $0,000.00
    Total Savings

    $00.00
    Standard Delivery

    Free
    Dell Price

    $0,000,00
  • Customize & BuyAdd to Cart
• • 

  • Product title

  • $0,000.00
    $0,000.00
  • • Tech spec in bullet list format
    • Tech spec in bullet list format
    • Tech spec in bullet list format
    • Tech spec in bullet list format

  • Product description in paragraph format product description in paragraph format product description in paragraph format.

  • Est. value

    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.

    $0,000.00
    Save

    $00.00 (00% off)
    Shipping

    FREE
    Dell Price

    $0,000,00
  • View Details
• • 

  • Product title product title product title

  • $0,000.00
    $0,000.00
  • • Tech spec in bullet list format
    • Tech spec in bullet list format
    • Tech spec in bullet list format

  • Product description in paragraph format product description in paragraph format.

  • $00.00/month

    for 00 months**
  • View Details

Product Stack with MVP Sub-Elements (Accordion)

This variation includes the Design System team's recommended elements for MVP implementation.

In this variation, the stacks are in a grid on larger breakpoints, and are in a vertical list on smaller breakpoints.

On smaller breakpoints, this variation uses a secondary accordion within each stack to show/hide more details.

Product Stack with All Sub-Elements

This variation is for testing all sub-elements within a single instance and would not likely appear on Dell.com. Simply remove rows that don't apply.

Due to Webflow limitations, you might see unexpected behavior for the Add to Compare element unless you click directly on the input box.