Table
.Table
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.
Example
Product | QTY | Price | Discount | Tax | Amount |
---|---|---|---|---|---|
Gold Package (Yearly)
Art #: HST-GLDY
|
1.00 | 105.75 | 0.00 | VAT 25% | 105.75USD |
Subtotal | 105.75USD | ||||
VAT 25% | 26.44USD | ||||
Total | 132.19USD |
Markup
- <table class="Table Table--invoice">
- <thead>
- <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>Tax</th>
- <th class="u-right-text">Amount</th>
- </tr>
- </thead>
- <tbody>
- <tr class="Table-bodyrow">
- <td>
- <p>
- <strong>Gold Package (Yearly)</strong>
- <br>
- <span class="u-fine-print">Gold Package (Yearly)</span>
- </p>
- <p class="u-fine-print">
- <strong>Art #:</strong> HST-GLDY
- <br>
- <strong>Delivery date:</strong> 10/8/2015
- <br>
- </p>
- </td>
- <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>
- </tbody>
- <tfoot>
- <tr class="Table-row">
- <td colspan="5">Subtotal</td>
- <td><span>105.75</span><span class="currency">USD</span></td>
- </tr>
- <tr class="Table-row">
- <td colspan="5">VAT 25%</td>
- <td>26.44<span class="currency">USD</span></td>
- </tr>
- <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>
- </tr>
- </tfoot>
- </table>