---
layout: default
title: Cart
---

<div class="shop-wrapper">
  <div class="cart-container">
    <div class="cart-header">
      <div class="header-inner">
        <h2>My Cart</h2>
        <div class="header-actions">
          <div class="buttons">
            <a class="button is-light">Save Order</a>
            <a
              href="/navbar-v1-ecommerce-checkout.html"
              class="button is-solid accent-button raised"
              >Checkout</a
            >
          </div>
        </div>
      </div>
    </div>

    <div class="cart-content">
      <div class="columns">
        <div class="column is-8">
          <!--Table-->
          <div class="flex-table">
            <!--Table header-->
            <div class="flex-table-header">
              <span class="product"><span>Product</span></span>
              <span class="quantity">Quantity</span>
              <span class="price">Price</span>
              <span class="discount">Discount</span>
              <span class="total">Total</span>
            </div>
            <!--Table item-->
            <div class="flex-table-item">
              <div class="product">
                <img src="assets/img/products/2.svg" alt="" />
                <span class="product-name">Cool Shirt</span>
              </div>
              <div class="quantity has-spinner">
                <div class="spinner">
                  <button class="remove">
                    <i data-feather="minus"></i>
                  </button>
                  <span class="value">1</span>
                  <button class="add">
                    <i data-feather="plus"></i>
                  </button>
                  <input class="spinner-input" type="hidden" value="1" />
                </div>
              </div>
              <div class="price">
                <span class="has-price">29.00</span>
              </div>
              <div class="discount">
                <span class="has-price">0</span>
              </div>
              <div class="total">
                <span class="has-price">29.00</span>
              </div>
            </div>
            <!--Table item-->
            <div class="flex-table-item">
              <div class="product">
                <img src="assets/img/products/3.svg" alt="" />
                <span class="product-name">Military Short</span>
              </div>
              <div class="quantity has-spinner">
                <div class="spinner">
                  <button class="remove">
                    <i data-feather="minus"></i>
                  </button>
                  <span class="value">1</span>
                  <button class="add">
                    <i data-feather="plus"></i>
                  </button>
                  <input class="spinner-input" type="hidden" value="1" />
                </div>
              </div>
              <div class="price">
                <span class="has-price">39.00</span>
              </div>
              <div class="discount">
                <span class="has-price">0</span>
              </div>
              <div class="total">
                <span class="has-price">39.00</span>
              </div>
            </div>
            <!--Table item-->
            <div class="flex-table-item">
              <div class="product">
                <img src="assets/img/products/4.svg" alt="" />
                <span class="product-name">Cool Backpack</span>
              </div>
              <div class="quantity has-spinner">
                <div class="spinner">
                  <button class="remove">
                    <i data-feather="minus"></i>
                  </button>
                  <span class="value">1</span>
                  <button class="add">
                    <i data-feather="plus"></i>
                  </button>
                  <input class="spinner-input" type="hidden" value="1" />
                </div>
              </div>
              <div class="price">
                <span class="has-price">125.00</span>
              </div>
              <div class="discount">
                <span class="has-price">0</span>
              </div>
              <div class="total">
                <span class="has-price">125.00</span>
              </div>
            </div>
          </div>

          <div class="continue-shopping">
            <a href="/navbar-v1-ecommerce-products.html">Continue Shopping</a>
          </div>
        </div>
        <div class="column is-4">
          <div class="cart-summary">
            <div class="summary-header">
              <h3>Order Summary</h3>
            </div>

            <!--card-->
            <div class="summary-card">
              <div class="order-line">
                <span>Subtotal</span>
                <span>193.00</span>
              </div>
              <div class="order-line">
                <span>Shipping</span>
                <span class="is-text">Not calculated</span>
              </div>
              <div class="order-line">
                <span>Taxes</span>
                <span>8.92</span>
              </div>
              <div class="order-line">
                <span class="is-total">Total</span>
                <span class="is-total">201.92</span>
              </div>
            </div>

            <!--card-->
            <div class="summary-card">
              <img
                class="light-image"
                src="assets/img/icons/questions/help.svg"
                alt=""
              />
              <img
                class="dark-image"
                src="assets/img/icons/questions/help-dark.svg"
                alt=""
              />
              <h4>Help center</h4>
              <p>
                Having trouble? Please search our
                <a class="standard-link">Help Center</a> for a quick answer to
                your problem.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>