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

Art #: HST-GLDY
Delivery date: 10/8/2015

1.00 105.75 0.00 VAT 25% 105.75USD
Subtotal 120.75USD
VAT 25% 30.19USD
Total 150.94USD
Previous Invoice ID 1001379 Next

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&#228;ster&#229;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>