Base by AppDirect

Display

Communicate specialized information

Numbers & Pricing

Stats

$999.99 Due Today 
<div class="adb-stat">
  <span class="adb-stat--value">$999.99</span>
  <span class="adb-stat--unit">Due Today</span>
</div>

Grouped

9,650 Total Subscriptions
8,284 Total Orders
$471,394.03 Revenue to Date
21,658 Invoices Paid
6,425 Invoices Unpaid
6,425 Invoices Overdue 
<div class="adb-stats">
  <div class="adb-stat">
    <span class="adb-stat--value">9,650</span>
    <span class="adb-stat--unit">Total Subscriptions</span>
  </div>
  <div class="adb-stat">
    <span class="adb-stat--value">8,284</span>
    <span class="adb-stat--unit">Total Orders</span>
  </div>
  <div class="adb-stat">
    <span class="adb-stat--value">$471,394.03</span>
    <span class="adb-stat--unit">Revenue to Date</span>
  </div>
  <div class="adb-stat">
    <span class="adb-stat--value">21,658</span>
    <span class="adb-stat--unit">Invoices Paid</span>
  </div>
  <div class="adb-stat">
    <span class="adb-stat--value">6,425</span>
    <span class="adb-stat--unit">Invoices Unpaid</span>
  </div>
  <div class="adb-stat">
    <span class="adb-stat--value">6,425</span>
    <span class="adb-stat--unit">Invoices Overdue</span>
  </div>
</div>
23 Free Trials
534 Expired Trials
500,384 Purchased
3 Canceled
1,493 Unpaid Invoices
$10M Total Spent 
<div class="adb-stats adb-stats__horizontal">
  <div class="adb-stat">
    <span class="adb-stat--value">23</span>
    <span class="adb-stat--unit">Free Trials</span>
  </div>
  <div class="adb-stat">
    <span class="adb-stat--value">534</span>
    <span class="adb-stat--unit">Expired Trials</span>
  </div>
  <div class="adb-stat">
    <span class="adb-stat--value">500,384</span>
    <span class="adb-stat--unit">Purchased</span>
  </div>
  <div class="adb-stat">
    <span class="adb-stat--value">3</span>
    <span class="adb-stat--unit">Canceled</span>
  </div>
  <div class="adb-stat">
    <span class="adb-stat--value">1,493</span>
    <span class="adb-stat--unit">Unpaid Invoices</span>
  </div>
  <div class="adb-stat">
    <span class="adb-stat--value">$10M</span>
    <span class="adb-stat--unit">Total Spent</span>
  </div>
</div>

Table-Based Receipts

Item Quantity Price Total
Gold Edition 2 $199.95 / user / month $399.90
XXXXXX Discount -$19.95 / month – $19.90
Subtotal $380.00
8.75% Sales Tax $0.00
Total Paid -$10.00
Outstanding Balance $380.00
Total Due $380.00 
<div class="adb-container adb-receipt">
  <div class="adb-receipt--table">
    <table>
      <colgroup>
        <col width="50%">
        <col width="10%">
        <col width="25%">
        <col width="15%">
      </colgroup>
      <thead>
        <tr>
          <th>Item</th>
          <th>Quantity</th>
          <th>Price</th>
          <th class="adb-receipt--table_value">Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Gold Edition</td>
          <td>2</td>
          <td>$199.95 / user / month</td>
          <td class="adb-receipt--table_value">$399.90</td>
        </tr>
        <tr>
          <td>XXXXXX Discount</td>
          <td></td>
          <td>-$19.95 / month</td>
          <td class="adb-receipt--table_value">– $19.90</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="adb-container_content adb-help">
    <div class="adb-receipt--section">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">Subtotal</span>
        <span class="adb-receipt--item">$380.00</span>
      </div>
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">8.75%  Sales Tax</span>
        <span class="adb-receipt--item">$0.00</span>
      </div>
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">Total Paid</span>
        <span class="adb-receipt--item adb-receipt--item__success">-$10.00</span>
      </div>
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">Outstanding Balance</span>
        <span class="adb-receipt--item">$380.00</span>
      </div>
    </div>
    <div class="adb-receipt--section">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">Total Due</span>
        <span class="adb-receipt--item adb-receipt--item__total">$380.00</span>
      </div>
    </div>
  </div>
</div>

Complex Receipts

Complex Receipts align pricing details with pricing numbers. The Receipts can be located in the Sidebar or in any other Container. A primary or secondary action button maybe added as well as a borderless Open Product Slat.

Tax $8.75
Due today $40.00 
<div class=" adb-container__open ">
  <div class="adb-container_content" style="padding: 0">
    <div class=" adb-receipt--section adb-receipt--section__open ">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">Tax</span>
        <span class="adb-receipt--item">
          $8.75
        </span>
      </div>
    </div>
    <div class=" adb-receipt--section ">
      <div class="adb-receipt--line adb-receipt--item__total">
        <span class="adb-receipt--item">Due today</span>
        <span class="adb-receipt--item">
          $40.00
        </span>
      </div>
    </div>
  </div>
</div>
Microsoft Office
$129.99
x 1 User $50.00 / year
Yearly Savings (30%) -$29.99
Subtotal
$0.00
Tax $8.75.
Due Yearly $108.75 
<div class=" adb-receipt--section adb-receipt--section__open ">
  <div class="adb-receipt--line">
    <div class="adb-slat">
      <div class=" adb-slat--image adb-slat--column expression " style="padding-left: 0;">
        <div class="adb-id adb-id__logo adb-id__sq_xsmall">
          <img class="adb-id--img" src="../../images/logos/apps/msoffice-72x72.png?1567620427" />
        </div>
      </div>
      <div class=" adb-slat--content adb-slat--column adb-slat--column--centered adb-summary  ">
        <div class="adb-title__large">
          Microsoft Office
        </div>
      </div>
      <div class=" adb-slat--content adb-slat--column adb-slat--column__condensed ">
        <div class="adb-receipt--item adb-receipt--item__total__inline">
          $129.99
        </div>
      </div>
    </div>
  </div>
</div>
<div class=" adb-container adb-container__elevated ">
  <div class="adb-container_content" style="">
    <div class=" adb-receipt--section adb-receipt--section__open receipt-users ">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">
          x 1
          User
        </span>
        <span class="adb-receipt--item">
          $50.00 / year
        </span>
      </div>
    </div>
    <div class=" adb-receipt--section adb-receipt--section__open  receipt-savings">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">
          Yearly Savings (30%)
        </span>
        <span class="adb-receipt--item adb-receipt--item__discount">
          -$29.99
        </span>
      </div>
    </div>
    <div class=" adb-receipt--section adb-receipt--section__open receipt-subtotal adb-receipt--section__open">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">Subtotal</span>
        <span class="adb-receipt--item">
          <h5 class="adb-title__small">
            $0.00
          </h5>
        </span>
      </div>
    </div>
    <div class=" adb-receipt--section adb-receipt--section__open adb-receipt--section__open ">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">Tax</span>
        <span class="adb-receipt--item">
          $8.75.
        </span>
      </div>
    </div>
    <div class=" adb-receipt--section adb-receipt--section__open ">
      <div class="adb-receipt--line adb-receipt--item__total">
        <span class="adb-receipt--item">
          Due Yearly
        </span>
        <span class="adb-receipt--item">
          $108.75
        </span>
      </div>
    </div>
  </div>
</div>
20% off   remove -$40.00
x 2 Users $50.00 / year
Yearly Savings (30%) -$29.99
Subtotal
$2,567.35
Tax * $18.00
Shipping and handling $2.30
*   Estimated values until order finalized
Due today $2,795.28
Due after free trial  
$40.00
Due monthly  
$40.00
Due yearly  
$300.00
Additional fees based on usage  
$5.78
Save & Continue
Cancel Order 
<div class=" adb-container__open ">
  <div class="adb-container_content" style="padding: 0">
    <div class=" adb-receipt--section ">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">
          <span>
            20% off
            &nbsp;
            <a>remove</a>
          </span>
        </span>
        <span class="adb-receipt--item adb-receipt--item__discount">
          -$40.00
        </span>
      </div>
    </div>
    <div class=" adb-receipt--section receipt-users ">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">
          x 2
          Users
        </span>
        <span class="adb-receipt--item">
          $50.00 / year
        </span>
      </div>
    </div>
    <div class=" adb-receipt--section  receipt-savings">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">
          Yearly Savings (30%)
        </span>
        <span class="adb-receipt--item adb-receipt--item__discount">
          -$29.99
        </span>
      </div>
    </div>
    <div class=" adb-receipt--section receipt-subtotal adb-receipt--section__open">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">Subtotal</span>
        <span class="adb-receipt--item">
          <h5 class="adb-title__small">
            $2,567.35
          </h5>
        </span>
      </div>
    </div>
    <div class=" adb-receipt--section adb-receipt--section__open ">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item__label adb-receipt--item__inline">
          Tax
          <span class="adb-label--info">*</span>
        </span>
        <span class="adb-receipt--item">
          $18.00
        </span>
      </div>
    </div>
    <div class=" adb-receipt--section adb-receipt--section__open ">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">Shipping and handling</span>
        <span class="adb-receipt--item">
          $2.30
        </span>
      </div>
    </div>
    <div class=" adb-receipt--section adb-receipt--section__open ">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label adb-caption">
          <span class="adb-caption adb-receipt--item__inline adb-caption">
            <span class="adb-receipt--item__label adb-receipt--item__inline adb-caption">
              <span class="adb-label--info">* &nbsp;</span>
            </span>
            <span class="adb-caption">
              Estimated values until order finalized
            </span>
          </span>
        </span>
        <span class="adb-receipt--item"></span>
      </div>
    </div>
    <div class=" adb-receipt--section ">
      <div class="adb-receipt--line adb-receipt--item__total">
        <span class="adb-receipt--item">Due today</span>
        <span class="adb-receipt--item">
          $2,795.28
        </span>
      </div>
    </div>
    <div class=" adb-receipt--section receipt-due-after-free-trial ">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">
          <div class="container">
            Due after free trial &nbsp;
            <i class="adb-icon_alert adb-icon__question" data-toggle="tooltip" title="11/04/2014"></i>
          </div>
        </span>
        <span class="adb-receipt--item">
          $40.00
        </span>
      </div>
    </div>
    <div class=" adb-receipt--section receipt-due-monthly adb-receipt--section__open">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">
          <div class="container">
            Due monthly &nbsp;
            <i class="adb-icon_alert adb-icon__question" data-toggle="tooltip" title="12/01/2015"></i>
          </div>
        </span>
        <span class="adb-receipt--item">
          $40.00
        </span>
      </div>
    </div>
    <div class=" adb-receipt--section receipt-due-monthly adb-receipt--section__open">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">
          <div class="container">
            Due yearly &nbsp;
            <i class="adb-icon_alert adb-icon__question" data-toggle="tooltip" title="07/05/2015"></i>
          </div>
        </span>
        <span class="adb-receipt--item">
          $300.00
        </span>
      </div>
    </div>
    <div class=" adb-receipt--section receipt-additional-fee adb-receipt--section__open ">
      <div class="adb-receipt--line">
        <span class="adb-receipt--item adb-receipt--item__label">
          <div class="container">
            Additional fees based on usage &nbsp;
            <i class="adb-icon_alert adb-icon__question" data-toggle="tooltip" title="08/07/2014"></i>
          </div>
        </span>
        <span class="adb-receipt--item">
          $5.78
        </span>
      </div>
    </div>
  </div>
</div>
<a class="adb-button adb-button adb-button__primary adb-button__large adb-toolbar--item adb-button__full_width adb-button__large adb-toolbar--item " href="">
  Save & Continue
</a>
<br>
<a class="adb-button adb-button__secret adb-button__medium adb-toolbar--item adb-button__full_width" style="margin-top: 12px;">
  Cancel Order
</a>