Checkout Summary

By Christine Siu

checkout ecommerce shopping cart price order

How do I use This?

A simple checkout summary with a preview of the items in your order.

HTML

<div class="checkout-summary">
  <div class="checkout-summary-title">
    <h5>Your Order</h5>
    <h5>2 Items</h5>
  </div>

  <div class="checkout-summary-item">
    <img src="https://placeimg.com/100/80/any">
    <div class="item-name">
      <a>Comfy Knit Blazer</a>
      <p><span class="title">Color: </span>Blue</p>
      <p><span class="title">Size: </span>M</p>
    </div>
    <div class="item-price">
      <p class="title">$24.99</p>
      <a href="#">Remove</a>
    </div>
  </div>
  <div class="checkout-summary-item">
    <img src="https://placeimg.com/100/80/any">
    <div class="item-name">
      <a>Comfy Knit Blazer</a>
      <p><span class="title">Color: </span>Blue</p>
      <p><span class="title">Size: </span>M</p>
    </div>
    <div class="item-price">
      <p class="title">$24.99</p>
      <a href="#">Remove</a>
    </div>
  </div>
  <div class="checkout-summary-details">
    <div class="left">
      <p><strong>Subtotal:</strong></p>
      <p><strong>Tax:</strong></p>
      <p><strong>Total:</strong></p>
    </div>
    <div class="right">
      <p>$10.99</p>
      <p>$2.00</p>
      <p>$12.99</p>
    </div>
  </div>
  <button class="button expanded">Proceed to Checkout</button>
</div>

.checkout-summary {
  max-width: 500px;
  background-color: $white;
}

.checkout-summary-title {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid $light-gray;
}

.checkout-summary-item {
  border-left: 1px solid $light-gray;
  border-right: 1px solid $light-gray;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid $light-gray;
  .item-name,
  .item-price {
    padding: 0 1rem;
    p {
      margin: 0;
      padding: 0;
    }
  }
  .title {
    font-weight: bold;
  }
}

.checkout-summary-details {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid $light-gray;
  border-top: none;
}

.checkout-summary {
  max-width: 500px;
  background-color: #fefefe;
}

.checkout-summary-title {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1rem;
  border: 1px solid #e6e6e6;
}

.checkout-summary-item {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #e6e6e6;
}

.checkout-summary-item .item-name,
.checkout-summary-item .item-price {
  padding: 0 1rem;
}

.checkout-summary-item .item-name p,
.checkout-summary-item .item-price p {
  margin: 0;
  padding: 0;
}

.checkout-summary-item .title {
  font-weight: bold;
}

.checkout-summary-details {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1rem;
  border: 1px solid #e6e6e6;
  border-top: none;
}

Checkout Summary

By Christine Siu

Card Profile Stats

Full-Screen Image Slider

Work Feature Block

Checkout Summary

By Christine Siu

Similar Building Blocks

Card Profile Stats

Full-Screen Image Slider

Work Feature Block