---
layout: default
title: Orders
---

{{> navbar-fade-commerce}}

<div class="profile-header">
  <div class="profile-header-inner">
    <div class="profile-avatar">
      <img
        class="avatar"
        src="https://via.placeholder.com/250x250"
        alt=""
        data-demo-src="assets/img/avatars/helen.jpg"
      />
      <h2 class="title is-4 is-narrow">Helen Miller</h2>
      <p class="subtitle is-6">UI/UX Designer</p>
    </div>

    <div class="tabs is-centered">
      <ul>
        <li><a href="profile-4.html">Account</a></li>
        <li><a href="profile-5.html">Addresses</a></li>
        <li class="is-active"><a href="profile-6.html">Orders</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="section is-app-grey">
  <div class="container">
    <!--Wrapper-->
    <div class="profile-wrapper">
      <div class="account-orders">
        <div class="flex-table">
          <!--Table item-->
          <div class="flex-table-item">
            <div class="flex-table-cell is-meta" data-th="ID">
              <div class="meta pushed-mobile">
                <span>Order ID</span>
                <span>#B-04564</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Quantity">
              <div class="meta pushed-mobile">
                <span>Quantity</span>
                <span>12 products</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Amount">
              <div class="meta pushed-mobile">
                <span>Total</span>
                <span>$1,654.12</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Date">
              <div class="meta pushed-mobile">
                <span>Date</span>
                <span>Apr 5, 2021</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Status">
              <div class="pushed-mobile is-full has-text-right">
                <span class="tag is-success is-rounded">Prepping</span>
              </div>
            </div>
            <div class="flex-table-cell cell-end" data-th="">
              <a href="#" class="button is-details">View</a>
            </div>
          </div>

          <!--Table item-->
          <div class="flex-table-item">
            <div class="flex-table-cell is-meta" data-th="ID">
              <div class="meta pushed-mobile">
                <span>Order ID</span>
                <span>#B-065605</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Quantity">
              <div class="meta pushed-mobile">
                <span>Quantity</span>
                <span>3 products</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Amount">
              <div class="meta pushed-mobile">
                <span>Total</span>
                <span>$265.23</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Date">
              <div class="meta pushed-mobile">
                <span>Date</span>
                <span>Apr 1, 2021</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Status">
              <div class="pushed-mobile is-full has-text-right">
                <span class="tag is-primary is-rounded">Complete</span>
              </div>
            </div>
            <div class="flex-table-cell cell-end" data-th="">
              <a href="#" class="button is-details">View</a>
            </div>
          </div>

          <!--Table item-->
          <div class="flex-table-item">
            <div class="flex-table-cell is-meta" data-th="ID">
              <div class="meta pushed-mobile">
                <span>Order ID</span>
                <span>#B-59568</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Quantity">
              <div class="meta pushed-mobile">
                <span>Quantity</span>
                <span>5 products</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Amount">
              <div class="meta pushed-mobile">
                <span>Total</span>
                <span>$689.23</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Date">
              <div class="meta pushed-mobile">
                <span>Date</span>
                <span>Mar 25, 2021</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Status">
              <div class="pushed-mobile is-full has-text-right">
                <span class="tag is-primary is-rounded">Complete</span>
              </div>
            </div>
            <div class="flex-table-cell cell-end" data-th="">
              <a href="#" class="button is-details">View</a>
            </div>
          </div>

          <!--Table item-->
          <div class="flex-table-item">
            <div class="flex-table-cell is-meta" data-th="ID">
              <div class="meta pushed-mobile">
                <span>Order ID</span>
                <span>#B-282778</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Quantity">
              <div class="meta pushed-mobile">
                <span>Quantity</span>
                <span>21 products</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Amount">
              <div class="meta pushed-mobile">
                <span>Total</span>
                <span>$8,654.52</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Date">
              <div class="meta pushed-mobile">
                <span>Date</span>
                <span>Mar 16, 2021</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Status">
              <div class="pushed-mobile is-full has-text-right">
                <span class="tag is-primary is-rounded">Complete</span>
              </div>
            </div>
            <div class="flex-table-cell cell-end" data-th="">
              <a href="#" class="button is-details">View</a>
            </div>
          </div>

          <!--Table item-->
          <div class="flex-table-item">
            <div class="flex-table-cell is-meta" data-th="ID">
              <div class="meta pushed-mobile">
                <span>Order ID</span>
                <span>#B-2540</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Quantity">
              <div class="meta pushed-mobile">
                <span>Quantity</span>
                <span>2 products</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Amount">
              <div class="meta pushed-mobile">
                <span>Total</span>
                <span>$100.54</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Date">
              <div class="meta pushed-mobile">
                <span>Date</span>
                <span>Mar 11, 2021</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Status">
              <div class="pushed-mobile is-full has-text-right">
                <span class="tag is-primary is-rounded">Complete</span>
              </div>
            </div>
            <div class="flex-table-cell cell-end" data-th="">
              <a href="#" class="button is-details">View</a>
            </div>
          </div>

          <!--Table item-->
          <div class="flex-table-item">
            <div class="flex-table-cell is-meta" data-th="ID">
              <div class="meta pushed-mobile">
                <span>Order ID</span>
                <span>#B-78575</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Quantity">
              <div class="meta pushed-mobile">
                <span>Quantity</span>
                <span>7 products</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Amount">
              <div class="meta pushed-mobile">
                <span>Total</span>
                <span>$329.12</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Date">
              <div class="meta pushed-mobile">
                <span>Date</span>
                <span>Mar 4, 2021</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Status">
              <div class="pushed-mobile is-full has-text-right">
                <span class="tag is-light is-rounded">Canceled</span>
              </div>
            </div>
            <div class="flex-table-cell cell-end" data-th="">
              <a href="#" class="button is-details">View</a>
            </div>
          </div>

          <!--Table item-->
          <div class="flex-table-item">
            <div class="flex-table-cell is-meta" data-th="ID">
              <div class="meta pushed-mobile">
                <span>Order ID</span>
                <span>#B-57575</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Quantity">
              <div class="meta pushed-mobile">
                <span>Quantity</span>
                <span>2 products</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Amount">
              <div class="meta pushed-mobile">
                <span>Total</span>
                <span>$89.14</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Date">
              <div class="meta pushed-mobile">
                <span>Date</span>
                <span>Feb 27, 2021</span>
              </div>
            </div>
            <div class="flex-table-cell is-meta" data-th="Status">
              <div class="pushed-mobile is-full has-text-right">
                <span class="tag is-primary is-rounded">Complete</span>
              </div>
            </div>
            <div class="flex-table-cell cell-end" data-th="">
              <a href="#" class="button is-details">View</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{{> footer-side-light}}