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>