SMB ATG UTK 1.0.1-7

Product Cards

Product cards must always sit on a light gray background color, which is handled by adding the the class of .body-bg-alt to the surrounding content wrapper.

Proprietor Duplicate Portable Business Check
From $0.18 ea.
Laser Multi-Purpose Check, 3/sheet
From $0.18 ea.
More colors available
Proprietor Duplicate Portable Business Check
From $0.18 ea.
Laser Multi-Purpose Check, 3/sheet
From $0.18 ea.
More colors available
Proprietor Duplicate Portable Business Check
From $0.18 ea.
Laser Multi-Purpose Check, 3/sheet
From $0.18 ea.
More colors available
Proprietor Duplicate Portable Business Check
From $0.18 ea.
Laser Multi-Purpose Check, 3/sheet
From $0.18 ea.
More colors available

PDP Product Carousel Cards

You may also like

  • Product Image
    Budget Mug - 11 oz.
    as low as
    $3.24
  • Product Image
    Large Color Bistro with Accent Mug - 22 oz.
    as low as
    $5.72
  • Product Image
    KOOZIE® 2-in-1 Kooler with Cool Gear™ Container with padded interior and a long title like this interior and a long title like this interior and a long title like this
    as low as
    $3.83
  • Product Image
    Reactive Glaze Mug - 15 oz. interior and a long title like this interior and a long title like this interior and a long title like this
    as low as
    $3.89

Narrowly-contained cards — (testing purposes)

Proprietor Duplicate Portable Business Check
From $0.18 ea.
Laser Multi-Purpose Check, 3/sheet
From $0.18 ea.
More colors available
Proprietor Duplicate Portable Business Check
From $0.18 ea.
Laser Multi-Purpose Check, 3/sheet
From $0.18 ea.
More colors available
Proprietor Duplicate Portable Business Check
From $0.18 ea.
Laser Multi-Purpose Check, 3/sheet
From $0.18 ea.
More colors available
Proprietor Duplicate Portable Business Check
From $0.18 ea.
Laser Multi-Purpose Check, 3/sheet
From $0.18 ea.
More colors available

Usage

Example code below shows 2 different states of product cards:

  • Card with More scenes available
  • Card with More colors available
Update: Business check products do not have multiple scenes. We do not need to solve for conditional logic around scenes for this site — we will only show the more colors label when multiple colors exist for a given product.

Cards in a gallery are contained within a Foundation block grid. 

<div class="row small-up-2 medium-up-3 large-up-4 xlarge-up-5">
    <div class="column">
        <a href="#" class="card product-card">
            <img src="images/check-test-image-2.jpg" class="product-image">
            <div class="product-name-wrapper">
                <h5 class="product-name">
                    WD-PTR Proprietor Duplicate Portable Business Check
                </h5>
            </div>
            <div class="product-price">
                <span class="pre-text">From</span>
                <span class="price">$0.18</span>
                <span class="post-text">ea.</span>
            </div>
            <div class="caption">
                <span>More <span class="more-scenes">scenes</span> available</span>
            </div>
        </a>
    </div>
    <div class="column">
        <a href="#" class="card product-card">
            <img src="images/check-test-image.jpg" class="product-image">
            <div class="product-name-wrapper">
                <h5 class="product-name">
                    LMP101 Laser Multi-Purpose Check, 3/sheet
                </h5>
            </div>
            <div class="product-price">
                <span class="pre-text">From</span>
                <span class="price">$0.18</span>
                <span class="post-text">ea.</span>
            </div>
            <div class="caption">
                <span class="more-colors">More colors available</span>
            </div>
        </a>
    </div>
</div>