carbon-components/html/order-summary/order-summary-category.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" href="javascript:void(0)">NOK</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)">EUR</a></li>
        </ul>
      </li>
    </ul>

  </section>
  <ul class="bx--order-list">
    <li class="bx--order-category">
      <p class="bx--order-category-title">Category Label</p>
      <ul>
        <li class="bx--order-item">
          <p class="bx--order-detail">Detail one</p>
          <p class="bx--order-price">$10.00 /mo</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">$20.00</p>
        </li>
      </ul>
    </li>
    <li class="bx--order-category">
      <p class="bx--order-category-title">Category Label</p>
      <ul>
        <li class="bx--order-item">
          <p class="bx--order-detail">Extra long detail to show what a long line is like</p>
          <p class="bx--order-price">$20000.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">$20.00</p>
        </li>
      </ul>
    </li>
    <li class="bx--order-category">
      <p class="bx--order-category-title">Category Label</p>
      <ul>
        <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">$20.00</p>
        </li>
      </ul>
    </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>
    <p class="bx--order-total-subtitle"> * This is an estimated price based on a customer’s average usage, includes monthly and hourly pricing.</p>
    <button class="bx--btn bx--btn--primary" type="submit">Create Cluster</button>
    <button class="bx--btn bx--btn--secondary">Cancel</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>