Paper
.Paper
The Paper
component is designed to replicate a paper, which can be useful when designing an invoice for example.
It can have optional navigation above and below with the Paper-navigation
wrapper.
Example
Invoice No. 1000173
Invoice date: 10/8/2015
Payment due: 10/15/2015
Bill to
Sam Osgood
Metallverksgatan 6
72130 Västerås
Sweden
Product | QTY | Price | Discount | Tax | Amount |
---|---|---|---|---|---|
Gold Package (Yearly)
Art #: HST-GLDY
|
1.00 | 105.75 | 0.00 | VAT 25% | 105.75USD |
Subtotal | 120.75USD | ||||
VAT 25% | 30.19USD | ||||
Total | 150.94USD |
Markup
<div class="Paper"> <h1>Invoice No. 1000173</h1> <p> <span>Invoice date:</span> 10/8/2015<br> <span>Payment due:</span> 10/15/2015 </p> <p class="Address"> <span class="Address-header">Bill to</span> Sam Osgood<br> Metallverksgatan 6<br> 72130 Västerås<br> Sweden </p> <table id="product_list" class="Table Table--invoice"> <thead> <tr class="Table-row"> <th scope="col" style="width: 40%">Product</th> <th scope="col" class="u-right-text">QTY</th> <th scope="col" class="u-right-text">Price</th> <th scope="col" class="u-right-text">Discount</th> <th scope="col">Tax</th> <th scope="col" 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>120.75</span><span class="currency">USD</span></td> </tr> <tr class="Table-row"> <td colspan="5">VAT 25%</td> <td>30.19<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>150.94</span><span class="currency">USD</span></td> </tr> </tfoot> </table> </div> <div class="Paper-navigation Grid Grid--no-gutter"> <div class="Grid-column-3"> <ul class="Set Set--bulk"> <li class="Set-item"> <a class="Set-action" href="javascript:void(0);">Pay</a> </li> <li class="Set-item"> <a class="Set-action" href="javascript:void(0);">Print</a> </li> </ul> </div> <div class="Grid-column-3"> <div class="Paginate Paginate--navigation u-right-text"> <a class="Paginate-button Icon--previous is-disabled" href="#">Previous</a> <a class="Paginate-button Paginate-button--page is-active">Invoice ID 1001379</a> <a class="Paginate-button Icon--next " href="/100001/CustomerPanel/Invoice/d2877de9-cd95-4a59-944a-2067550dac5a/Preview">Next</a> </div> </div> </div>