carbon-components/src/components/order-summary/order-summary.html

Carbon Components is a component library for IBM Cloud

<div class="bx--order-summary">
  <section class="bx--order-header">
    <p class="bx--order-header-title">Order Summary</p>
    <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
      <li class="bx--dropdown-text">USD</li>
      <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
        <path d="M10 0L5 5 0 0z"></path>
      </svg>
      <li>
        <ul class="bx--dropdown-list">
          <li data-option data-value="all" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">USD</a></li>
          <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><a class="bx--dropdown-link" title="NOKNOKNOKNOKNOK" ref="javascript:void(0)">NOKNOKNOKNOKNOK</a></li>
          <li data-option data-value="staging" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">GBP</a></li>
          <li data-option data-value="dea" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">WWW</a></li>
        </ul>
      </li>
    </ul>

  </section>
  <ul class="bx--order-list">
    <li class="bx--order-item">
      <p class="bx--order-detail">Detail one</p>
      <p class="bx--order-price">$20.00</p>
    </li>
    <li class="bx--order-item">
      <p class="bx--order-detail">Detail one</p>
      <p class="bx--order-price">$20.00</p>
    </li>
    <li class="bx--order-item">
      <p class="bx--order-detail">Detail one</p>
      <p class="bx--order-price">-</p>
    </li>
    <li class="bx--order-item">
      <p class="bx--order-detail">Detail one</p>
      <p class="bx--order-price">-</p>
    </li>
  </ul>
  <section class="bx--order-total-container">
    <div class="bx--order-total">
      <p class="bx--order-total-text">Total due now</p>
      <p class="bx--order-total-price">
        $0.00
        <span>estimated</span>
      </p>
    </div>
    <button class="bx--btn bx--btn--primary" type="submit">Create Cluster</button>
  </section>
  <section class="bx--order-footer">
    <p class="bx--order-footer-text">Need Help?</p>
    &nbsp;
    <a href="" class="bx--link">Contact Bluemix Sales</a>
  </section>
</div>