---
title: Invoice - Done
slug: invoice-done
createdAt: 2025-02-05T23:48:47.218Z
---

# HTML

```html
<!-- THIS CUSTOM <STYLE> SECTION IS SPECIFIC TO THIS PAGE, DO NOT APPLY THESE STYLES TO OTHER PAGES OR IT WILL BREAK THINGS!!! -->
<style>
    table {
        border-collapse: separate;
        border-spacing: 0;
    }
    thead {
        background: transparent;
    }
    th:first-child {
        border-top-left-radius: var(--general--border-radius);
        overflow: hidden;
    }
    th:last-child {
        border-top-right-radius: var(--general--border-radius);
        overflow: hidden;
    }
    th {
        border: none;
        background-clip: border-box;
        position: relative; 
        background-color: var(--invoices--invoice-table-header-bg, transparent);
    }
    tbody tr td:first-child {
        border-left: 1px solid var(--invoices--invoice-table-border);
    }
    tbody tr td:last-child {
        border-right: 1px solid var(--invoices--invoice-table-border);
    }
    tbody tr:nth-child(even) {
        background-color: var(--invoices--invoice-alternating-row);
    }
</style>



<div class="paper-8-5x11">
    <div class="invoice-wrapper">
        <div class="invoice-top">
            <div class="invoice-logo-container">
                <img src="{app logo}" loading="lazy" width="Auto" alt="{app name}" class="invoice-logo">
            </div>
            <div class="invoice-number">Invoice #8888888888</div>
        </div>
        <div class="w-layout-grid invoice-details">
            <div class="invoice-details-side-container">

                <div class="invoice-detail-container">
                    <div class="invoice-detail-section-heading">User First Inc. dba EveryAnswer</div>
                    <div>36-3033 King George Blvd.<br>Surrey, British Columbia<br>Canada, V4P 1B8</div>
                </div>

                <div class="invoice-detail-container">
                    <div class="invoice-detail-section-heading uppercase">Bill To</div>
                    <div>happier IT Inc.<br>36-3033 King George Blvd.<br>Surrey, British Columbia<br>Canada, V4P 1B8</div>
                </div>

            </div>
            <div class="invoice-details-side-container">

                <div class="invoice-detail-container">
                    <div class="invoice-detail-line">
                        <div class="invoice-detail-line-key">Invoice Date:</div>
                        <div class="invoice-detail-line-value">October 1, 2024</div>
                    </div>
                    <div class="invoice-detail-line">
                        <div class="invoice-detail-line-key">Invoice Amount:</div>
                        <div class="invoice-detail-line-value">$249.00</div>
                    </div>
                    <div class="invoice-detail-line">
                        <div class="invoice-detail-line-key">Purchase Order:</div>
                        <div class="invoice-detail-line-value">N/A</div>
                    </div>
                    <div class="invoice-detail-line">
                        <div class="invoice-detail-line-key">Invoice Status:</div>
                        <div class="invoice-detail-line-value">Refunded</div>
                    </div>
                    <div class="invoice-detail-line">
                        <div class="invoice-detail-line-key">Billing Period:</div>
                        <div class="invoice-detail-line-value">September 2024</div>
                    </div>
                </div>

                <div class="invoice-detail-container">
                    <div class="invoice-detail-section-heading uppercase">Payment Method</div>
                    <div class="invoice-detail-line">
                        <div class="invoice-detail-line-key">Method:</div>
                        <div class="invoice-detail-line-value">Credit Card</div>
                    </div>
                    <div class="invoice-detail-line">
                        <div class="invoice-detail-line-key">Type:</div>
                        <div class="invoice-detail-line-value">Visa</div>
                    </div>
                    <div class="invoice-detail-line">
                        <div class="invoice-detail-line-key">Card:</div>
                        <div class="invoice-detail-line-value">xxxx xxxx xxxx 1111</div>
                    </div>
                </div>

            </div>
        </div>
        <div class="invoice-main-content">
            <div class="invoice-table-wrapper">

                <table class="invoice-table">
                    <thead>
                        <tr>
                            <th class="invoice-table-heading">Description</th>
                            <th class="invoice-table-heading center">Quantity</th>
                            <th class="invoice-table-heading right">Price Per</th>
                            <th class="invoice-table-heading right">Subtotal</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="invoice-table-cell">
                                <div class="invoice-line-description-heading">This is some text inside of a div block.</div>
                                <div class="invoice-line-description-detail">This is some text inside of a div block.</div>
                            </td>
                            <td class="invoice-table-cell center no-wrap">wqewqe</td>
                            <td class="invoice-table-cell right no-wrap">wqewqe</td>
                            <td class="invoice-table-cell right no-wrap">wqewqe</td>
                        </tr>
                        <tr class="tr">
                            <td class="invoice-table-cell">wqewqe</td>
                            <td class="invoice-table-cell center">wqewqe</td>
                            <td class="invoice-table-cell right">wqewqe</td>
                            <td class="invoice-table-cell right">wqewqe</td>
                        </tr>
                        <tr>
                            <td class="invoice-table-cell">wqewqe</td>
                            <td class="invoice-table-cell center">wqewqe</td>
                            <td class="invoice-table-cell right">wqewqe</td>
                            <td class="invoice-table-cell right">wqewqe</td>
                        </tr>
                    </tbody>
                </table>

                <div class="invoice-total-box">
                    <div class="invoice-subtotal-lines">
                        <div class="invoice-subtotal-item">
                            <div class="invoice-subtotal-item-key">Total excl. Tax</div>
                            <div class="invoice-subtotal-item-value">$1234.11</div>
                        </div>
                        <div class="invoice-subtotal-item">
                            <div class="invoice-subtotal-item-key">Tax 1 @ 10%</div>
                            <div class="invoice-subtotal-item-value">$1234.11</div>
                        </div>
                        <div class="invoice-subtotal-item">
                            <div class="invoice-subtotal-item-key">Tax 2 @ 20%</div>
                            <div class="invoice-subtotal-item-value">$1234.11</div>
                        </div>

                        <div class="invoice-subtotal-divider"></div>

                        <div class="invoice-subtotal-item">
                            <div class="invoice-subtotal-item-key"><strong>Total</strong></div>
                            <div class="invoice-subtotal-item-value"><strong>$1234.11</strong></div>
                        </div>
                        <div class="invoice-subtotal-item">
                            <div class="invoice-subtotal-item-key">Payments</div>
                            <div class="invoice-subtotal-item-value">$1234.11</div>
                        </div>
                    </div>

                    <div class="invoice-total-line">
                        <div class="invoice-subtotal-item-key">Amount Due</div>
                        <div class="invoice-subtotal-item-value">$1234.11</div>
                    </div>

                </div>

            </div>
        </div>

        <div class="invoice-footer">

            <div class="invoice-detail-container">
                <div class="invoice-detail-section-heading uppercase">Payments</div>
                <div>$123.00 was paid on Dec 05, 2023 by Credit Card xxxx xxxx xxxx 1234.</div>
            </div>

            <div class="invoice-detail-container">
                <div class="invoice-detail-section-heading uppercase">Exchange Rate</div>
                <div>Please note: All charges are billed in USD, and currency exchange is managed by your credit card issuer or bank.</div>
            </div>

        </div>
    </div>
</div>
```