Most tables are in some way enhanced by adding the Table component and one of its modifiers like Table--invoice or Table--datatable.

Invoice tables

A table used as an invoice should be modified with the Table--invoice class.


Product QTY Price Discount Tax Amount

Gold Package (Yearly)
Gold Package (Yearly)

Delivery date: 10/8/2015

1.00 105.75 0.00 VAT 25% 105.75USD
Subtotal 105.75USD
VAT 25% 26.44USD
Total 132.19USD


<table class="Table Table--invoice">
        <tr class="Table-row">
            <th style="u-right-text: 40%">Product</th>
            <th class="u-right-text">QTY</th>
            <th class="u-right-text">Price</th>
            <th class="u-right-text">Discount</th>
            <th class="u-right-text">Amount</th>
        <tr class="Table-bodyrow">
                    <strong>Gold Package (Yearly)</strong>
                    <span class="u-fine-print">Gold Package (Yearly)</span>
                <p class="u-fine-print">
                    <strong>Art #:</strong> HST-GLDY
                    <strong>Delivery date:</strong> 10/8/2015
            <td class="u-right-text">1.00</td>
            <td class="u-right-text">105.75</td>
            <td class="u-right-text">0.00</td>
            <td>VAT 25%</td>
            <td class="u-right-text"><span>105.75</span><span class="currency">USD</span></td>
        <tr class="Table-row">
            <td colspan="5">Subtotal</td>
            <td><span>105.75</span><span class="currency">USD</span></td>
        <tr class="Table-row">
            <td colspan="5">VAT 25%</td>
            <td>26.44<span class="currency">USD</span></td>
        <tr class="Table-row">
            <td class="Table-cell--strong" colspan="5">Total</td>
            <td class="Table-cell--strong"><span>132.19</span><span class="currency">USD</span></td>