• Guidelines
    • Display
    • Navigate
    • Forms
    • Layout
    • Prototype
  • Acme Marketplace
  • Guidelines
  • Display
  • Navigate
  • Forms
  • Layout
  • Prototypes
    • Guidelines
    • Display
    • Navigate
    • Forms
    • Layout
    • Prototypes
    • Release Notes
    • Sass Documentation
    • Gulp Documentation
    • CSS/SASS Stats
    • Preview All Components
Base by AppDirect

Display

Communicate specialized information

Alerts & Messages
Tooltips
Badges
Status & Progress
Avatars & Logos
App Tiles
Numbers & Pricing

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?1625765172" />
        </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>
  • Framework
  • Display
  • Numbers & Pricing
  • Powered by AppDirect © 2022
  • Contact Support
  • Terms & Conditions
  • Privacy Policy
    • Contact Support
    • Terms & Conditions
    • Privacy Policy
Themes
    Assistant
    • Bonzi
    • Clippy
    • F1
    • Genie
    • Genius
    • Links
    • Merlin
    • Peedy
    • Rocky
    • Rover
    Hide
    4
    1366 × 768
    10.51%
    9
    1024 × 768
    4.02%
    3
    1280 × 800
    11.08%
    1
    1440 × 900
    16.09%
    7
    1600 × 900
    5.59%
    6
    1280 × 1024
    5.77%
    5
    1680 × 1050
    7.48%
    2
    1920 × 1080
    15.99%
    8
    1920 × 1200
    5.39%
    10
    2560 × 1440
    3.23%