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)
Gold Package (Yearly)

Art #: HST-GLDY
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

Markup

  1. <table class="Table Table--invoice">
  2. <thead>
  3. <tr class="Table-row">
  4. <th style="u-right-text: 40%">Product</th>
  5. <th class="u-right-text">QTY</th>
  6. <th class="u-right-text">Price</th>
  7. <th class="u-right-text">Discount</th>
  8. <th>Tax</th>
  9. <th class="u-right-text">Amount</th>
  10. </tr>
  11. </thead>
  12. <tbody>
  13. <tr class="Table-bodyrow">
  14. <td>
  15. <p>
  16. <strong>Gold Package (Yearly)</strong>
  17. <br>
  18. <span class="u-fine-print">Gold Package (Yearly)</span>
  19. </p>
  20. <p class="u-fine-print">
  21. <strong>Art #:</strong> HST-GLDY
  22. <br>
  23. <strong>Delivery date:</strong> 10/8/2015
  24. <br>
  25. </p>
  26. </td>
  27. <td class="u-right-text">1.00</td>
  28. <td class="u-right-text">105.75</td>
  29. <td class="u-right-text">0.00</td>
  30. <td>VAT 25%</td>
  31. <td class="u-right-text"><span>105.75</span><span class="currency">USD</span></td>
  32. </tr>
  33. </tbody>
  34. <tfoot>
  35. <tr class="Table-row">
  36. <td colspan="5">Subtotal</td>
  37. <td><span>105.75</span><span class="currency">USD</span></td>
  38. </tr>
  39. <tr class="Table-row">
  40. <td colspan="5">VAT 25%</td>
  41. <td>26.44<span class="currency">USD</span></td>
  42. </tr>
  43. <tr class="Table-row">
  44. <td class="Table-cell--strong" colspan="5">Total</td>
  45. <td class="Table-cell--strong"><span>132.19</span><span class="currency">USD</span></td>
  46. </tr>
  47. </tfoot>
  48. </table>