Cart

Shopping Cart with Groups

A shopping cart to show all added items with groups and appropriate subtotals.

Recurring Monthly

HD DVR

Unit Price

$110.00

$100.00

Savings

$10.00

Wireless Gateway

Unit Price

$100.00

Who names something this long? Someone will.

$100.00

That's pricy.

$22,000,000

Savings

$10.00

Subtotal

$1,034.00

One time

HD DVR

Unit Price

$110.00

$100.00

Savings

$10.00

Wireless Gateway

Unit Price

$100.00

Who names something this long? Someone will.

$100.00

That's pricy.

$22,000,000

Savings

$10.00

Subtotal

$1,034.00

Summary

Recurring Monthly

$100.00

One-time

$100.00

Savings

$10.00

Discounts

$10.00

Subtotal

$1,034.00

Shipping

$10.00

Taxes

$28.98

Total

$228.98

Does not include taxes

HTML

<div class="t-content">
    <div class="c-cart" style="width: 330px; height: 550px;">
        <div class="c-cart-content">
            <div class="c-cartGroup">
                <div class="c-cartGroup-title">Recurring Monthly</div>
                <div class="c-cartGroup-content">
                    <div class="c-cartItem">
                        <div class="c-cartItem-title">HD DVR</div>
                        <div class="c-cartItem-price c-cartPrice">
                            <div class="c-cartPrice-label">Unit Price</div>
                            <div class="c-cartPrice-price is-updated">$110.00</div>
                            <div class="c-cartPrice-price">$100.00</div>
                        </div>
                        <div class="c-cartItem-price c-cartSavings">
                            <div class="c-cartSavings-label">Savings</div>
                            <div class="c-cartSavings-price">$10.00</div>
                        </div>
                    </div>
                    <div class="c-cartItem">
                        <div class="c-cartItem-title">Wireless Gateway</div>
                        <div class="c-cartItem-price c-cartPrice">
                            <div class="c-cartPrice-label">Unit Price</div>
                            <div class="c-cartPrice-price">$100.00</div>
                        </div>
                        <div class="c-cartItem-price c-cartPrice">
                            <div class="c-cartPrice-label">Who names something this long? Someone will.</div>
                            <div class="c-cartPrice-price">$100.00</div>
                        </div>
                        <div class="c-cartItem-price c-cartPrice">
                            <div class="c-cartPrice-label">That's pricy.</div>
                            <div class="c-cartPrice-price">$22,000,000</div>
                        </div>
                    </div>
                </div>
                <div class="c-cartGroup-totals">
                    <div class="c-cartGroup-amount c-cartSavings">
                        <div class="c-cartSavings-label">Savings</div>
                        <div class="c-cartSavings-price">$10.00</div>
                    </div>
                    <div class="c-cartGroup-amount c-cartSubtotal">
                        <div class="c-cartSubtotal-label">Subtotal</div>
                        <div class="c-cartSubtotal-price">$1,034.00</div>
                    </div>
                </div>
            </div>
            <div class="c-cartGroup">
                <div class="c-cartGroup-title">One time</div>
                <div class="c-cartGroup-content">
                    <div class="c-cartItem">
                        <div class="c-cartItem-title">HD DVR</div>
                        <div class="c-cartItem-price c-cartPrice">
                            <div class="c-cartPrice-label">Unit Price</div>
                            <div class="c-cartPrice-price is-updated">$110.00</div>
                            <div class="c-cartPrice-price">$100.00</div>
                        </div>
                        <div class="c-cartItem-price c-cartSavings">
                            <div class="c-cartSavings-label">Savings</div>
                            <div class="c-cartSavings-price">$10.00</div>
                        </div>
                    </div>
                    <div class="c-cartItem">
                        <div class="c-cartItem-title">Wireless Gateway</div>
                        <div class="c-cartItem-price c-cartPrice">
                            <div class="c-cartPrice-label">Unit Price</div>
                            <div class="c-cartPrice-price">$100.00</div>
                        </div>
                        <div class="c-cartItem-price c-cartPrice">
                            <div class="c-cartPrice-label">Who names something this long? Someone will.</div>
                            <div class="c-cartPrice-price">$100.00</div>
                        </div>
                        <div class="c-cartItem-price c-cartPrice">
                            <div class="c-cartPrice-label">That's pricy.</div>
                            <div class="c-cartPrice-price">$22,000,000</div>
                        </div>
                    </div>
                </div>
                <div class="c-cartGroup-totals">
                    <div class="c-cartGroup-amount c-cartSavings">
                        <div class="c-cartSavings-label">Savings</div>
                        <div class="c-cartSavings-price">$10.00</div>
                    </div>
                    <div class="c-cartGroup-amount c-cartSubtotal">
                        <div class="c-cartSubtotal-label">Subtotal</div>
                        <div class="c-cartSubtotal-price">$1,034.00</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-cart-footer c-cartSummary">
            <div class="c-cartSummary-title">Summary</div>
            <div class="c-cartSummary-amount c-cartPrice">
                <div class="c-cartPrice-label">Recurring Monthly</div>
                <div class="c-cartPrice-price">$100.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartPrice">
                <div class="c-cartPrice-label">One-time</div>
                <div class="c-cartPrice-price">$100.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartSavings">
                <div class="c-cartSavings-label">Savings</div>
                <div class="c-cartSavings-price">$10.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartDiscount is-discounted">
                <div class="c-cartDiscount-label">Discounts</div>
                <div class="c-cartDiscount-price">$10.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartSubtotal">
                <div class="c-cartSubtotal-label">Subtotal</div>
                <div class="c-cartSubtotal-price">$1,034.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartMisc">
                <div class="c-cartMisc-label">Shipping</div>
                <div class="c-cartMisc-price">$10.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartTaxes">
                <div class="c-cartTaxes-label">Taxes</div>
                <div class="c-cartTaxes-price">$28.98</div>
            </div>
            <div class="c-cartSummary-amount c-cartTotal">
                <div class="c-cartTotal-label">Total</div>
                <div class="c-cartTotal-price">$228.98</div>
            </div>
            <div class="c-cartSummary-caveat">
                Does not include taxes
            </div>
        </div>
    </div>
</div>

Shopping Cart With Simple Items

For when you only need simple shopping cart items (non grouped).

Some Streaming Video

This is a fairly long but realistic length pricing plan name.

$100.00

Qty: 1

$110.00

Some cart item with details

Pricing plan

$299.00

Qty: 1

Subtotal

$1,034.00

Discounts

$10.00

Shipping

$10.00

Taxes

$28.98

Total

$228.98

HTML

<div class="t-content">
    <div class="c-cart" style="width: 330px; height: 550px;">
        <div class="c-cart-content">
            <div class="c-cartItem">
                <div class="c-cartItem-titleBar">
                    <div class="c-cartItem-title">Some Streaming Video</div>
                    <div class="c-cartItem-actions">
                        <div class="c-cartItem-action c-button c-button--icon u-mh u-mv-">
                            <inv-icon glyph="'ellipsis-h'"></inv-icon>
                        </div>
                    </div>
                </div>
                <div class="c-cartItem-price c-cartPrice c-cartPrice--long">
                    <div class="c-cartPrice-label">This is a fairly long but realistic length pricing plan name.</div>
                    <div class="c-cartPrice-price">$100.00</div>
                </div>
                <div class="c-cartItem-price c-cartMeta c-cartMeta--long">
                    <div class="c-cartMeta-label">
                        <div class="c-cartMeta-item">Qty: 1</div>
                    </div>
                    <div class="c-cartMeta-price is-discounted">$110.00</div>
                </div>
            </div>
            <div class="c-cartItem">
                <div class="c-cartItem-titleBar">
                    <div class="c-cartItem-title">Some cart item with details</div>
                    <div class="c-cartItem-actions">
                        <div class="c-cartItem-action c-button c-button--icon u-mh u-mv-">
                            <inv-icon glyph="'ellipsis-h'"></inv-icon>
                        </div>
                    </div>
                </div>
                <div class="c-cartItem-price c-cartPrice c-cartPrice--long">
                    <div class="c-cartPrice-label">Pricing plan</div>
                    <div class="c-cartPrice-price">$299.00</div>
                </div>
                <div class="c-cartItem-price c-cartMeta c-cartMeta--long">
                    <div class="c-cartMeta-label">
                        <div class="c-cartMeta-item">Qty: 1</div>
                    </div>
                </div>
                <button class="c-link is-disabled u-ph+" disabled>Show Details</button>
            </div>
        </div>
        <div class="c-cart-footer c-cartSummary">
            <div class="c-cartSummary-amount c-cartSubtotal">
                <div class="c-cartSubtotal-label">Subtotal</div>
                <div class="c-cartSubtotal-price">$1,034.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartDiscount is-discounted">
                <div class="c-cartDiscount-label">Discounts</div>
                <div class="c-cartDiscount-price">$10.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartMisc">
                <div class="c-cartMisc-label">Shipping</div>
                <div class="c-cartMisc-price">$10.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartTaxes">
                <div class="c-cartTaxes-label">Taxes</div>
                <div class="c-cartTaxes-price">$28.98</div>
            </div>
            <div class="c-cartSummary-amount c-cartTotal">
                <div class="c-cartTotal-label">Total</div>
                <div class="c-cartTotal-price">$228.98</div>
            </div>
        </div>
    </div>
</div>

Shopping Cart With Pre-Order Items

A shopping cart with a pre-order items.

Some Streaming Video

Available 03/09/2016 10:00 AM

This is a fairly long but realistic length pricing plan name.

$100.00

Qty: 1

$110.00

Some cart item with details

Available 11/28/2011 08:00 AM

Pricing plan

$299.00

Qty: 1

Subtotal

$1,034.00

Discounts

$10.00

Shipping

$10.00

Taxes

$28.98

Total

$228.98

HTML

<div class="t-content">
    <div class="c-cart" style="width: 330px; height: 550px;">
        <div class="c-cart-content">
            <div class="c-cartItem">
                <div class="c-cartItem-titleBar">
                    <div class="c-cartItem-title">Some Streaming Video</div>
                    <div class="c-cartItem-actions">
                        <div class="c-cartItem-action c-button c-button--icon u-mh u-mv-">
                            <inv-icon glyph="'ellipsis-h'"></inv-icon>
                        </div>
                    </div>
                </div>
                <div class="c-cartItem-availability c-productAvailability">
                    <div class="c-productAvailability-text">
                        Available 03/09/2016 10:00 AM
                    </div>
                </div>
                <div class="c-cartItem-price c-cartPrice c-cartPrice--long">
                    <div class="c-cartPrice-label">This is a fairly long but realistic length pricing plan name.</div>
                    <div class="c-cartPrice-price">$100.00</div>
                </div>
                <div class="c-cartItem-price c-cartMeta c-cartMeta--long">
                    <div class="c-cartMeta-label">
                        <div class="c-cartMeta-item">Qty: 1</div>
                    </div>
                    <div class="c-cartMeta-price is-discounted">$110.00</div>
                </div>
            </div>
            <div class="c-cartItem">
                <div class="c-cartItem-titleBar">
                    <div class="c-cartItem-title">Some cart item with details</div>
                    <div class="c-cartItem-actions">
                        <div class="c-cartItem-action c-button c-button--icon u-mh u-mv-">
                            <inv-icon glyph="'ellipsis-h'"></inv-icon>
                        </div>
                    </div>
                </div>
                <div class="c-cartItem-availability c-productAvailability">
                    <div class="c-productAvailability-text">
                        Available 11/28/2011 08:00 AM
                    </div>
                </div>
                <div class="c-cartItem-price c-cartPrice c-cartPrice--long">
                    <div class="c-cartPrice-label">Pricing plan</div>
                    <div class="c-cartPrice-price">$299.00</div>
                </div>
                <div class="c-cartItem-price c-cartMeta c-cartMeta--long">
                    <div class="c-cartMeta-label">
                        <div class="c-cartMeta-item">Qty: 1</div>
                    </div>
                </div>
                <button class="c-link is-disabled u-ph+" disabled>Show Details</button>
            </div>
        </div>
        <div class="c-cart-footer c-cartSummary">
            <div class="c-cartSummary-amount c-cartSubtotal">
                <div class="c-cartSubtotal-label">Subtotal</div>
                <div class="c-cartSubtotal-price">$1,034.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartDiscount is-discounted">
                <div class="c-cartDiscount-label">Discounts</div>
                <div class="c-cartDiscount-price">$10.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartMisc">
                <div class="c-cartMisc-label">Shipping</div>
                <div class="c-cartMisc-price">$10.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartTaxes">
                <div class="c-cartTaxes-label">Taxes</div>
                <div class="c-cartTaxes-price">$28.98</div>
            </div>
            <div class="c-cartSummary-amount c-cartTotal">
                <div class="c-cartTotal-label">Total</div>
                <div class="c-cartTotal-price">$228.98</div>
            </div>
        </div>
    </div>
</div>

Shopping Cart with Transition Items

A shopping cart to indicate transition (addition and/or removal) items.

Recurring Monthly

HD DVR

Unit Price

$110.00

$100.00

Savings

$10.00

Wireless Gateway

Unit Price

$100.00

Who names something this long? Someone will.

$100.00

That's pricy.

$22,000,000

Savings

$10.00

Subtotal

$1,034.00

One time

HD DVR

Unit Price

$110.00

$100.00

Savings

$10.00

Wireless Gateway

Unit Price

$100.00

Who names something this long? Someone will.

$100.00

That's pricy.

$22,000,000

Savings

$10.00

Subtotal

$1,034.00

Summary

Recurring Monthly

$100.00

One-time

$100.00

Savings

$10.00

Subtotal

$1,034.00

Taxes

$28.98

Total

$228.98

Does not include taxes

HTML

<div class="t-content">
    <div class="c-cart c-cart--transition" style="width: 330px; height: 550px;">
        <div class="c-cart-content">
            <div class="c-cartGroup">
                <div class="c-cartGroup-title">Recurring Monthly</div>
                <div class="c-cartGroup-content">
                    <div class="c-cartItem is-addition u-pl+">
                        <div class="c-cartItem-title">HD DVR</div>
                        <div class="c-cartItem-price c-cartPrice">
                            <div class="c-cartPrice-label">Unit Price</div>
                            <div class="c-cartPrice-price is-updated">$110.00</div>
                            <div class="c-cartPrice-price">$100.00</div>
                        </div>
                        <div class="c-cartItem-price c-cartSavings">
                            <div class="c-cartSavings-label">Savings</div>
                            <div class="c-cartSavings-price">$10.00</div>
                        </div>
                    </div>
                    <div class="c-cartItem is-removal u-pl+">
                        <div class="c-cartItem-title">Wireless Gateway</div>
                        <div class="c-cartItem-price c-cartPrice">
                            <div class="c-cartPrice-label">Unit Price</div>
                            <div class="c-cartPrice-price">$100.00</div>
                        </div>
                        <div class="c-cartItem-price c-cartPrice">
                            <div class="c-cartPrice-label">Who names something this long? Someone will.</div>
                            <div class="c-cartPrice-price">$100.00</div>
                        </div>
                        <div class="c-cartItem-price c-cartPrice">
                            <div class="c-cartPrice-label">That's pricy.</div>
                            <div class="c-cartPrice-price">$22,000,000</div>
                        </div>
                    </div>
                </div>
                <div class="c-cartGroup-totals">
                    <div class="c-cartGroup-amount c-cartSavings">
                        <div class="c-cartSavings-label">Savings</div>
                        <div class="c-cartSavings-price">$10.00</div>
                    </div>
                    <div class="c-cartGroup-amount c-cartSubtotal">
                        <div class="c-cartSubtotal-label">Subtotal</div>
                        <div class="c-cartSubtotal-price">$1,034.00</div>
                    </div>
                </div>
            </div>
            <div class="c-cartGroup">
                <div class="c-cartGroup-title">One time</div>
                <div class="c-cartGroup-content">
                    <div class="c-cartItem is-addition u-pl+">
                        <div class="c-cartItem-title">HD DVR</div>
                        <div class="c-cartItem-price c-cartPrice">
                            <div class="c-cartPrice-label">Unit Price</div>
                            <div class="c-cartPrice-price is-updated">$110.00</div>
                            <div class="c-cartPrice-price">$100.00</div>
                        </div>
                        <div class="c-cartItem-price c-cartSavings">
                            <div class="c-cartSavings-label">Savings</div>
                            <div class="c-cartSavings-price">$10.00</div>
                        </div>
                    </div>
                    <div class="c-cartItem u-pl+">
                        <div class="c-cartItem-title">Wireless Gateway</div>
                        <div class="c-cartItem-price c-cartPrice">
                            <div class="c-cartPrice-label">Unit Price</div>
                            <div class="c-cartPrice-price">$100.00</div>
                        </div>
                        <div class="c-cartItem-price c-cartPrice">
                            <div class="c-cartPrice-label">Who names something this long? Someone will.</div>
                            <div class="c-cartPrice-price">$100.00</div>
                        </div>
                        <div class="c-cartItem-price c-cartPrice">
                            <div class="c-cartPrice-label">That's pricy.</div>
                            <div class="c-cartPrice-price">$22,000,000</div>
                        </div>
                    </div>
                </div>
                <div class="c-cartGroup-totals">
                    <div class="c-cartGroup-amount c-cartSavings">
                        <div class="c-cartSavings-label">Savings</div>
                        <div class="c-cartSavings-price">$10.00</div>
                    </div>
                    <div class="c-cartGroup-amount c-cartSubtotal">
                        <div class="c-cartSubtotal-label">Subtotal</div>
                        <div class="c-cartSubtotal-price">$1,034.00</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-cart-footer c-cartSummary">
            <div class="c-cartSummary-title">Summary</div>
            <div class="c-cartSummary-amount c-cartPrice">
                <div class="c-cartPrice-label">Recurring Monthly</div>
                <div class="c-cartPrice-price">$100.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartPrice">
                <div class="c-cartPrice-label">One-time</div>
                <div class="c-cartPrice-price">$100.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartSavings">
                <div class="c-cartSavings-label">Savings</div>
                <div class="c-cartSavings-price">$10.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartSubtotal">
                <div class="c-cartSubtotal-label">Subtotal</div>
                <div class="c-cartSubtotal-price">$1,034.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartTaxes">
                <div class="c-cartTaxes-label">Taxes</div>
                <div class="c-cartTaxes-price">$28.98</div>
            </div>
            <div class="c-cartSummary-amount c-cartTotal">
                <div class="c-cartTotal-label">Total</div>
                <div class="c-cartTotal-price">$228.98</div>
            </div>
            <div class="c-cartSummary-caveat">
                Does not include taxes
            </div>
        </div>
    </div>
</div>

Shopping Cart with Split Summary

A shopping cart with split summary to indicate more than one transaction.

Subscription 11

333053 Subscription

$2.00

Qty: 1

Hourly Subscription Auto Renewal

Hourly Neutral

$4.00

Qty: 1

Summary

Current Subscription

$2.00

Credit

$1.00

Updated Subscription

$4.00

Discount(s)

$0.00

Taxes

$0.41

Total

$4.41

HTML

<div class="t-content">
    <div class="c-cart c-cart--transition" style="width: 330px; height: 550px;">
        <div class="c-cart-content">
            <div class="c-cartItem is-removal u-pl+">
                <div class="c-cartItem-content">
                    <div class="c-cartItem-titleBar">
                        <div class="c-cartItem-title">Subscription 11</div>
                    </div>
                    <div class="c-cartItem-price c-cartPrice c-cartPrice--long">
                        <div class="c-cartPrice-label">333053 Subscription</div>
                        <div class="c-cartPrice-price">$2.00</div>
                    </div>
                    <div class="c-cartItem-price c-cartMeta c-cartMeta--long">
                        <div class="c-cartMeta-label">
                            <div class="c-cartMeta-item">
                                <span>Qty:</span>
                                <span>1</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="c-cartItem is-addition u-pl+">
                <div class="c-cartItem-content">
                    <div class="c-cartItem-titleBar">
                        <div class="c-cartItem-title">Hourly Subscription Auto Renewal</div>
                    </div>
                    <div class="c-cartItem-price c-cartPrice c-cartPrice--long">
                        <div class="c-cartPrice-label">Hourly Neutral</div>
                        <div class="c-cartPrice-price">$4.00</div>
                    </div>
                    <div class="c-cartItem-price c-cartMeta c-cartMeta--long">
                        <div class="c-cartMeta-label">
                            <div class="c-cartMeta-item">
                                <span>Qty:</span>
                                <span>1</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-cart-footer c-cartSummary">
            <div class="c-cartSummary-title">Summary</div>
            <div class="c-cartSummary-amount c-cartPrice">
                <div class="c-cartPrice-label">Current Subscription</div>
                <div class="c-cartPrice-price c-cartPrice-price--replace">$2.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartCredit is-credited">
                <div class="c-cartCredit-label">Credit</div>
                <div class="c-cartCredit-price">$1.00</div>
            </div>
            <div class="c-divider"></div>
            <div class="c-cartSummary-amount c-cartSavings">
                <div class="c-cartSavings-label">Updated Subscription</div>
                <div class="c-cartSavings-price">$4.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartDiscount is-discounted">
                <div class="c-cartDiscount-label">Discount(s)</div>
                <div class="c-cartDiscount-price">$0.00</div>
            </div>
            <div class="c-cartSummary-amount c-cartTaxes">
                <div class="c-cartTaxes-label">Taxes</div>
                <div class="c-cartTaxes-price">$0.41</div>
            </div>
            <div class="c-cartSummary-amount c-cartTotal">
                <div class="c-cartTotal-label">Total</div>
                <div class="c-cartTotal-price">$4.41</div>
            </div>
        </div>
    </div>
</div>

Shopping Cart Summary Definition List

For when a shopping cart summary is used in connection with other definition lists (e.g. an order summary page).

Summary

Recurring Monthly

$100.00

One-time

$100.00

Savings

$10.00

Subtotal

$1,034.00

Taxes

$28.98

Total

$228.98

Does not include taxes

HTML

<div class="t-content">
    <div class="c-cartSummary c-cartSummary--definitions">
        <div class="c-cartSummary-title">Summary</div>
        <div class="c-cartSummary-amount c-cartPrice">
            <div class="c-cartPrice-label">Recurring Monthly</div>
            <div class="c-cartPrice-price">$100.00</div>
        </div>
        <div class="c-cartSummary-amount c-cartPrice">
            <div class="c-cartPrice-label">One-time</div>
            <div class="c-cartPrice-price">$100.00</div>
        </div>
        <div class="c-cartSummary-amount c-cartSavings">
            <div class="c-cartSavings-label">Savings</div>
            <div class="c-cartSavings-price">$10.00</div>
        </div>
        <div class="c-cartSummary-amount c-cartSubtotal">
            <div class="c-cartSubtotal-label">Subtotal</div>
            <div class="c-cartSubtotal-price">$1,034.00</div>
        </div>
        <div class="c-cartSummary-amount c-cartTaxes">
            <div class="c-cartTaxes-label">Taxes</div>
            <div class="c-cartTaxes-price">$28.98</div>
        </div>
        <div class="c-cartSummary-amount c-cartTotal">
            <div class="c-cartTotal-label">Total</div>
            <div class="c-cartTotal-price">$228.98</div>
        </div>
        <div class="c-cartSummary-caveat">
            Does not include taxes
        </div>
    </div>
</div>