Summary List

Basic List

Basic dot-separated summary list with a description (left aligned) and value (right aligned)

  • Invoice Total $5,100,000.00
  • Total Paid $5,100,000.00
  • Balance $0.00 
<div class="SummaryList SummaryList--no-heading">
  <ul class="SummaryList-section">
    <li class="SummaryList-item">
      <span>Invoice Total</span>
      <span>$5,100,000.00</span>
    </li>
    <li class="SummaryList-item">
      <span>Total Paid</span>
      <span>$5,100,000.00</span>
    </li>
    <li class="SummaryList-item">
      <span>Balance</span>
      <span>$0.00</span>
    </li>
  </ul>
</div>

Basic List Header

Summary list with overal heading section

Transaction Overview

  • Subtotal $5,100,000.00
  • Processing Fees Passed on to Recipient
  • Total Reufnds $0.00
  • Invoice Total $5,100,000.00
  • Total Paid $5,100,000.00
  • Balance $0.00 
<div class="SummaryList">
  <h3 class="SummaryList-heading">Transaction Overview</h3>
  <ul class="SummaryList-section">
    <li class="SummaryList-item">
      <span>Subtotal</span>
      <span>$5,100,000.00</span>
    </li>
    <li class="SummaryList-item">
      <span>Processing Fees</span>
      <span>Passed on to Recipient</span>
    </li>
    <li class="SummaryList-item">
      <span>Total Reufnds</span>
      <span>$0.00</span>
    </li>
  </ul>
  <ul class="SummaryList-section">
    <li class="SummaryList-item">
      <span>Invoice Total</span>
      <span>$5,100,000.00</span>
    </li>
    <li class="SummaryList-item">
      <span>Total Paid</span>
      <span>$5,100,000.00</span>
    </li>
    <li class="SummaryList-item">
      <span>Balance</span>
      <span>$0.00</span>
    </li>
  </ul>
</div>

Basic List Row Header

Summary list with heading on each section

Invoice Summary Amount

  • Subtotal $5,100,000.00
  • Processing Fees Passed on to Recipient
  • Total Reufnds $0.00

Payment Summary Amount

  • Invoice Total $5,100,000.00
  • Total Paid $5,100,000.00
  • Balance $0.00
Balance $0.00
<div class="SummaryList">
  <h3 class="SummaryList-heading">
    <span>Invoice Summary</span>
    <span>Amount</span>
  </h3>
  <ul class="SummaryList-section">
    <li class="SummaryList-item">
      <span>Subtotal</span>
      <span>$5,100,000.00</span>
    </li>
    <li class="SummaryList-item">
      <span>Processing Fees</span>
      <span>Passed on to Recipient</span>
    </li>
    <li class="SummaryList-item">
      <span>Total Reufnds</span>
      <span>$0.00</span>
    </li>
  </ul>
  <h3 class="SummaryList-heading">
    <span>Payment Summary</span>
    <span>Amount</span>
  </h3>
  <ul class="SummaryList-section">
    <li class="SummaryList-item">
      <span>Invoice Total</span>
      <span>$5,100,000.00</span>
    </li>
    <li class="SummaryList-item">
      <span>Total Paid</span>
      <span>$5,100,000.00</span>
    </li>
    <li class="SummaryList-item">
      <span>Balance</span>
      <span>$0.00</span>
    </li>
  </ul>
  <div class="SummaryList-footer">Balance $0.00</div>
</div>