5.7 Product list

A list view for product cards

List of example pages
<ul class="product-list">
    <li class="product">
        <div class="product__details">
            <img src="https://placeimg.com/80/80/tech/grayscale" class="product__image">
            <h3 class="product__name">Let me tell you this product is the best. There's no product better in the world than this one. It's a great product. (1kg)</h3>
            <dl class="product__info">
                <dt>Your SKU</dt>
                <dd>TRZ-142</dd>
            </dl>
            <dl class="product__info">
                <dt>Supplier SKU</dt>
                <dd>W12-JC</dd>
            </dl>
            <dl class="product__tags">
                <dt>Tags</dt>
                <dd><span class="badge">Beverage</span> <span class="badge">Alcohol</span> <span class="badge">Gluten</span></dd>
            </dl>
        </div>
        <div class="product__actions">
            <div class="product__input input-overlay-right">
                <label for="price">Unit price</label>
                <input name="price" type="text" value="9.99"/>
                <div class="overlay">GBP</div>
            </div>
            <div class="product__input">
                <label for="quantity">Quantity</label>
                <input class="product__quantity" type="number" name="quantity" placeholder="0">
            </div>
        </div>
    </li>
    <li class="product product--disabled">
        <div class="product__details">
            <h3 class="product__name">[DISABLED] Some of the finest wine available to mankind (24 x 330ml)</h3>
            <dl class="product__info">
                <dt>Your SKU</dt>
                <dd>TRZ-142</dd>
            </dl>
            <dl class="product__info">
                <dt>Supplier SKU</dt>
                <dd>W12-JC</dd>
            </dl>
            <dl class="product__tags">
                <dt>Tags</dt>
                <dd><span class="badge">Beverage</span> <span class="badge">Alcohol</span> <span class="badge">Gluten</span></dd>
            </dl>
        </div>
        <div class="product__actions">
            <p class="product__price">10.99 USD</p>
            <div class="button-group">
                <a href="#0" class="button button--warning"><span class="fa fa-trash"></span> Delete</a>
                <a href="#0" class="button"><span class="fa fa-plus"></span> Enable</a>
                <a href="#0" class="button">Edit</a>
            </div>
        </div>
    </li>
    <li class="product">
        <div class="product__details">
            <h3 class="product__name">Cheap wine (12 x 330ml)</h3>
            <dl class="product__info">
                <dt>Your SKU</dt>
                <dd>TRZ-142</dd>
            </dl>
            <dl class="product__info">
                <dt>Supplier SKU</dt>
                <dd>W12-JC</dd>
            </dl>
        </div>
        <div class="product__actions">
            <p class="product__price">5.99 USD</p>
            <div class="button-group">
                <a href="#0" class="button button--warning"><span class="fa fa-trash"></span> Delete</a>
                <a href="#0" class="button"><span class="fa fa-ban"></span> Disable</a>
                <a href="#0" class="button">Edit</a>
            </div>
        </div>
    </li>
    <li>
        <a href="#0" class="product product--link">
            <div class="product__details">
                <img src="https://placeimg.com/80/80/people/grayscale" class="product__image">
                <h3 class="product__name">Strong foil (1 x 50g)</h3>
                <dl class="product__info">
                    <dt>Your SKU</dt>
                    <dd>TRZ-142</dd>
                </dl>
                <dl class="product__info">
                    <dt>Supplier SKU</dt>
                    <dd>W12-JC</dd>
                </dl>
                <dl class="product__tags">
                    <dt>Tags</dt>
                    <dd><span class="badge">Beverage</span> <span class="badge">Tag</span> <span class="badge">Something</span> <span class="badge">Alcohol</span> <span class="badge">Gluten</span></dd>
                </dl>
            </div>
            <div class="product__actions">
                <p class="product__price">15.99 USD</p>
            </div>
        </a>
    </li>
</ul>