Section & Variations › Cart
Available Variations
Starter Kit Codes
<!-- include sections/cart -->
<section class="cart cart-variation-2">
<div class="container-fluid">
<div class="section-header">
<h3 class="section-title">Shopping Cart</h3>
</div>
<div class="section-content">
<div class="cart-items">
<div class="cart-item-row cart-item-header">
<strong>Product</strong>
<div class="col-right">
<strong class="col-item">Quantity</strong>
<strong class="col-item cart-item-subtotal">Subtotal</strong>
</div>
</div>
<div class="cart-item-row">
<div class="cart-item-image">
<img src="assets/images/fashion-product-list-5.png" class="product-category-bg" />
</div>
<div class="cart-item-content">
<div class="cart-item-content-top">
<h4>Slim Fit Waffled polo shirt</h4>
<div class="col-right">
<div class="col-item">
<div class="input-group input-qty">
<span class="input-group-btn">
<button type="button" class="btn btn-change btn-icon" data-type="minus" data-field="quant[1]"><i class="ic ic-min"></i></button>
</span>
<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-change btn-icon" data-type="plus" data-field="quant[1]"><i class="ic ic-plus"></i></button>
</span>
</div>
</div>
<span class="col-item cart-item-subtotal">$29.00</span>
</div>
</div>
<div class="cart-item-variables">
<div class="cart-item-variable">
<strong>Color: </strong>
<span>Pale Taupe</span>
</div>
<div class="cart-item-variable">
<strong>Size: </strong>
<span>XL</span>
</div>
</div>
<a href="#remove" class="cart-item-remove">Remove Item</a>
</div>
</div>
<div class="cart-item-row">
<div class="cart-item-image">
<img src="assets/images/fashion-product-list-snippet-4.png" class="product-category-bg" />
</div>
<div class="cart-item-content">
<div class="cart-item-content-top">
<h4>Man in Green Zip Up Jacket</h4>
<div class="col-right">
<div class="col-item">
<div class="input-group input-qty">
<span class="input-group-btn">
<button type="button" class="btn btn-change btn-icon" data-type="minus" data-field="quant[1]"><i class="ic ic-min"></i></button>
</span>
<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-change btn-icon" data-type="plus" data-field="quant[1]"><i class="ic ic-plus"></i></button>
</span>
</div>
</div>
<span class="col-item cart-item-subtotal">$29.00</span>
</div>
</div>
<div class="cart-item-variables">
<div class="cart-item-variable">
<strong>Color: </strong>
<span>Olive Green</span>
</div>
<div class="cart-item-variable">
<strong>Size: </strong>
<span>XL</span>
</div>
</div>
<a href="#remove" class="cart-item-remove">Remove Item</a>
</div>
</div>
</div>
<div class="cart-summary">
<div class="cart-summary-header">
<h4>Summary</h4>
</div>
<div class="cart-summary-content">
<div class="accordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#summary-content-shipping-tax" aria-expanded="true" aria-controls="summary-content-shipping-tax"> Estimate shipping and tax </button>
</h2>
<div id="summary-content-shipping-tax" class="accordion-collapse collapse show">
<div class="accordion-body">
<div class="cart-summary-item ">
<strong>Subtotal</strong>
<span>$29.00</span>
</div>
<div class="cart-summary-item ">
<strong>Shipping (Shipping - Standard)</strong>
<span>$0.00</span>
</div>
<div class="cart-summary-item ">
<strong>Order total</strong>
<span>$29.00</span>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#summary-content-voucher" aria-expanded="false" aria-controls="summary-content-voucher"> Apply discount code </button>
</h2>
<div id="summary-content-voucher" class="accordion-collapse collapse">
<div class="accordion-body">
<form class="form-checkout-voucher">
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Promotional code">
<button class="btn btn-dark-1" type="button">Apply</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="cart-summary-footer">
<a class="btn btn-icon btn-xl btn-brand-primary" href="checkout.html">PROCEED TO CHECKOUT</a>
<p>Vendora always attaches importance to the security of your transactions. All transactions via Vendora.com are guaranteed to be 100% safe.</p>
</div>
</div>
</div>
</div>
</section>
Starter Kit Codes
<!-- include sections/cart -->
<section class="cart cart-variation-3">
<div class="container">
<div class="section-header">
<ul class="nav nav-tabs nav-cart-steps">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<span class="no">1</span>
<strong>Shopping bag</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="no">2</span>
<strong>Shipping</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="no">3</span>
<strong>Payment</strong>
</a>
</li>
</ul>
</div>
<div class="section-content">
<div class="cart-items">
<h3 class="section-title">Shopping bag (2)</h3>
<div class="cart-item-row">
<div class="cart-item-image">
<img src="assets/images/cosmetics-product-details-2.png" class="product-category-bg" />
</div>
<div class="cart-item-content">
<div class="cart-item-content-top">
<strong class="product-category">Skincare</strong>
<h4>Virena Smoothing Starter Set</h4>
<div class="col-right">
<div class="col-item">
<div class="form-group input-qty">
<label>QTY</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<span class="col-item cart-item-subtotal">$320.00</span>
</div>
</div>
<a href="#remove" class="cart-item-remove">Remove Item</a>
</div>
</div>
<div class="cart-item-row">
<div class="cart-item-image">
<img src="assets/images/cosmetics-product-list-9.png" class="product-category-bg" />
</div>
<div class="cart-item-content">
<div class="cart-item-content-top">
<strong class="product-category">Skincare</strong>
<h4>Advanced Super Revitalizing Cream</h4>
<div class="col-right">
<div class="col-item">
<div class="form-group input-qty">
<label>QTY</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<span class="col-item cart-item-subtotal">$18.00</span>
</div>
</div>
<a href="#remove" class="cart-item-remove">Remove Item</a>
</div>
</div>
</div>
<div class="cart-summary">
<div class="cart-summary-header">
<h4>Summary</h4>
</div>
<div class="cart-summary-content">
<div class="cart-summary-item ">
<strong>Subtotal</strong>
<span>$50.00</span>
</div>
<div class="cart-summary-item ">
<strong>Shipping (Shipping - Standard)</strong>
<span>TBD</span>
</div>
<div class="cart-summary-item ">
<strong>Tax</strong>
<span>$TBD</span>
</div>
<div class="cart-summary-item strong">
<strong>Estimated Total</strong>
<span>$50.00</span>
</div>
<form class="form-checkout-voucher">
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Promotional code">
<button class="btn btn-dark-1" type="button">Apply</button>
</div>
</form>
</div>
<div class="cart-summary-footer">
<a class="btn btn-icon btn-xl btn-brand-primary" href="checkout.html"><i class="ic ic-lock white"></i> PROCEED TO CHECKOUT</a>
<p>Need help with your order? <a href="#">Chat Now</a></p>
</div>
</div>
</div>
</div>
</section>