This is a template created to produce PDF documents. Ideally, it should be rendered with Openhtmltopdf, but it may work with other PDF creators.
<!--
=====
description: Attractive invoice with shades of grey and blue as well as plenty of padding.
license: MIT
attributions:
- author: arboshiki
link: https://bootsnipp.com/snippets/8MPnQ
- author: danfickle
link: https://github.com/danfickle/
=====
-->
<html>
<head>
<style>
@page {
@top-right {
content: "Page " counter(page) " of " counter(pages);
font-family: sans-serif;
padding-right: 15px;
}
}
#invoice{
padding: 0px;
}
.invoice {
position: relative;
padding: 15px
}
.invoice header {
padding: 10px 0;
margin-bottom: 20px;
border-bottom: 1px solid #3989c6
}
.invoice .company-details {
text-align: right
}
.invoice .company-details .name {
margin-top: 0;
margin-bottom: 0
}
.invoice .contacts {
margin-bottom: 20px
}
.invoice .invoice-to {
text-align: left
}
.invoice .invoice-to .to {
margin-top: 0;
margin-bottom: 0
}
.invoice .invoice-details {
text-align: right
}
.invoice .invoice-details .invoice-id {
margin-top: 0;
color: #3989c6
}
.invoice main {
padding-bottom: 50px
}
.invoice main .thanks {
margin-top: -100px;
font-size: 2em;
margin-bottom: 50px
}
.invoice main .notices {
padding-left: 6px;
border-left: 6px solid #3989c6
}
.invoice main .notices .notice {
font-size: 1.2em
}
.invoice table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px
}
.invoice table td,.invoice table th {
padding: 15px;
background: #eee;
border-bottom: 1px solid #fff
}
.invoice table th {
white-space: nowrap;
font-weight: 400;
font-size: 16px
}
.invoice table td h3 {
margin: 0;
font-weight: 400;
color: #3989c6;
font-size: 1.2em
}
.invoice table .qty,.invoice table .total,.invoice table .unit {
text-align: right;
font-size: 1.2em
}
.invoice table .no {
color: #fff;
font-size: 1.6em;
background: #3989c6
}
.invoice table .unit {
background: #ddd
}
.invoice table .total {
background: #3989c6;
color: #fff
}
.invoice table tbody tr:last-child td {
border: none
}
.invoice table tfoot td {
background: 0 0;
border-bottom: none;
white-space: nowrap;
text-align: right;
padding: 10px 20px;
font-size: 1.2em;
border-top: 1px solid #aaa
}
.invoice table tfoot tr:first-child td {
border-top: none
}
.invoice table tfoot tr:last-child td {
color: #3989c6;
font-size: 1.4em;
border-top: 1px solid #3989c6
}
.invoice table tfoot tr td:first-child {
border: none
}
.invoice footer {
width: 100%;
text-align: center;
color: #777;
border-top: 1px solid #aaa;
padding: 8px 0
}
.invoice {
font-size: 14px;
line-height: 1.4;
font-family: sans-serif;
}
a.logo {
display: inline-block;
text-decoration: none;
}
tr, tfoot {
page-break-inside: avoid;
}
div.logo-container {
float: left;
}
</style>
</head>
<body>
<!--Author : @arboshiki-->
<div id="invoice">
<div class="invoice">
<div>
<header>
<div class="row">
<div class="logo-container">
<a class="logo" th:if="${not #strings.isEmpty(invoice.from.logoFile)}" th:href="${invoice.from.website}">
<img th:src="${invoice.from.logoFile}" alt="Business Logo" />
</a>
</div>
<div class="col company-details">
<h2 class="name">
<a th:unless="${#strings.isEmpty(invoice.from.website)}" th:href="${invoice.from.website}" th:text="${invoice.from.name}"></a>
<span th:if="${#strings.isEmpty(invoice.from.website)}" th:text="${invoice.from.name}"></span>
</h2>
<div th:if="${invoice.from.address neq null}">
<th:block th:with="addr = ${invoice.from.address}">
<th:block th:text="${#strings.arrayJoin({addr.line1, addr.line2, addr.city, addr.state, addr.country, addr.zipCode}.{? #this neq null}, ', ')}"></th:block>
</th:block>
</div>
<div class="email" th:if="${not #strings.isEmpty(invoice.from.email)}"><a th:href="|mailto:${invoice.from.email}|" th:text="${invoice.from.email}"></a></div>
</div>
</div>
<div style="clear: both;"></div>
</header>
<main>
<div class="row contacts">
<div class="col invoice-to">
<div class="text-gray-light">INVOICE TO:</div>
<h2 class="to" th:text="${invoice.attention}">John Doe</h2>
<div class="address" th:if="${invoice.to.address neq null}">
<th:block th:with="addr = ${invoice.to.address}">
<th:block th:text="${#strings.arrayJoin({addr.line1, addr.line2, addr.city, addr.state, addr.country, addr.zipCode}.{? #this neq null}, ', ')}"></th:block>
</th:block>
</div>
<div class="email" th:if="${not #strings.isEmpty(invoice.to.email)}"><a th:href="|mailto:${invoice.to.email}|" th:text="${invoice.to.email}"></a></div>
</div>
<div class="col invoice-details">
<h1 class="invoice-id">INVOICE <th:block th:text="${invoice.id}"></th:block></h1>
<div class="date">Date of Invoice: <th:block th:text="${#temporals.format(invoice.date, 'yyyy-MMM-dd')}"></th:block></div>
<div class="date">Due Date: <th:block th:text="${#temporals.format(invoice.due, 'yyyy-MMM-dd')}"></th:block></div>
</div>
</div>
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>#</th>
<th class="text-left">DESCRIPTION</th>
<th class="text-right">UNIT PRICE</th>
<th class="text-right">AMOUNT</th>
<th class="text-right">TOTAL</th>
</tr>
</thead>
<tbody>
<tr th:each="itm : ${invoice.items}">
<td class="no" th:text="${itmStat.index + 1}"></td>
<td class="text-left" th:text="${itm.description}"></td>
<td class="unit" th:text="${'$' + itm.unitPrice}"></td>
<td class="qty" th:text="${itm.quantity}"></td>
<td class="total" th:text="${'$' + itm.totalPrice}"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td colspan="2">SUBTOTAL</td>
<td th:text="${'$' + invoice.subTotal}"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">TAX <th:block th:text="${invoice.taxRate}"></th:block>%</td>
<td th:text="${'$' + invoice.taxAmount}"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">GRAND TOTAL</td>
<td th:text="${'$' + invoice.total}"></td>
</tr>
</tfoot>
</table>
<div class="thanks">Thank you!</div>
<div class="notices">
<div>NOTICE:</div>
<div class="notice" th:text="${invoice.notice}"></div>
</div>
</main>
<footer>
Invoice was created on a computer and is valid without the signature and seal.
</footer>
</div>
</div>
</div>
</body>
</html>
<!--
=====
description: Attractive invoice with shades of grey and blue as well as plenty of padding.
license: MIT
attributions:
- author: arboshiki
link: https://bootsnipp.com/snippets/8MPnQ
- author: danfickle
link: https://github.com/danfickle/
=====
-->
<html>
<head>
<style>
@page {
@top-right {
content: "Page " counter(page) " of " counter(pages);
font-family: sans-serif;
padding-right: 15px;
}
}
#invoice{
padding: 0px;
}
.invoice {
position: relative;
padding: 15px
}
.invoice header {
padding: 10px 0;
margin-bottom: 20px;
border-bottom: 1px solid #3989c6
}
.invoice .company-details {
text-align: right
}
.invoice .company-details .name {
margin-top: 0;
margin-bottom: 0
}
.invoice .contacts {
margin-bottom: 20px
}
.invoice .invoice-to {
text-align: left
}
.invoice .invoice-to .to {
margin-top: 0;
margin-bottom: 0
}
.invoice .invoice-details {
text-align: right
}
.invoice .invoice-details .invoice-id {
margin-top: 0;
color: #3989c6
}
.invoice main {
padding-bottom: 50px
}
.invoice main .thanks {
margin-top: -100px;
font-size: 2em;
margin-bottom: 50px
}
.invoice main .notices {
padding-left: 6px;
border-left: 6px solid #3989c6
}
.invoice main .notices .notice {
font-size: 1.2em
}
.invoice table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px
}
.invoice table td,.invoice table th {
padding: 15px;
background: #eee;
border-bottom: 1px solid #fff
}
.invoice table th {
white-space: nowrap;
font-weight: 400;
font-size: 16px
}
.invoice table td h3 {
margin: 0;
font-weight: 400;
color: #3989c6;
font-size: 1.2em
}
.invoice table .qty,.invoice table .total,.invoice table .unit {
text-align: right;
font-size: 1.2em
}
.invoice table .no {
color: #fff;
font-size: 1.6em;
background: #3989c6
}
.invoice table .unit {
background: #ddd
}
.invoice table .total {
background: #3989c6;
color: #fff
}
.invoice table tbody tr:last-child td {
border: none
}
.invoice table tfoot td {
background: 0 0;
border-bottom: none;
white-space: nowrap;
text-align: right;
padding: 10px 20px;
font-size: 1.2em;
border-top: 1px solid #aaa
}
.invoice table tfoot tr:first-child td {
border-top: none
}
.invoice table tfoot tr:last-child td {
color: #3989c6;
font-size: 1.4em;
border-top: 1px solid #3989c6
}
.invoice table tfoot tr td:first-child {
border: none
}
.invoice footer {
width: 100%;
text-align: center;
color: #777;
border-top: 1px solid #aaa;
padding: 8px 0
}
.invoice {
font-size: 14px;
line-height: 1.4;
font-family: sans-serif;
}
a.logo {
display: inline-block;
text-decoration: none;
}
tr, tfoot {
page-break-inside: avoid;
}
div.logo-container {
float: left;
}
</style>
</head>
<body>
<!--Author : @arboshiki-->
<div id="invoice">
<div class="invoice">
<div>
<header>
<div class="row">
<div class="logo-container">
<a class="logo" href="http://example.com">
<img src="images/flyingsaucer.png" alt="Business Logo" />
</a>
</div>
<div class="col company-details">
<h2 class="name">
<a href="http://example.com">ACME Corp</a>
</h2>
<div>
Unit 1, 123 Main St, Springfield, Ohio, USA, 54325
</div>
<div class="email"><a href="mailto:acme@example.com">acme@example.com</a></div>
</div>
</div>
<div style="clear: both;"></div>
</header>
<main>
<div class="row contacts">
<div class="col invoice-to">
<div class="text-gray-light">INVOICE TO:</div>
<h2 class="to">John Citizen</h2>
<div class="address">
125 Second Ave, Waterside, California, America
</div>
<div class="email"><a href="mailto:abc@example.com">abc@example.com</a></div>
</div>
<div class="col invoice-details">
<h1 class="invoice-id">INVOICE 1-2-3</h1>
<div class="date">Date of Invoice: 2025-Mar-25</div>
<div class="date">Due Date: 2025-May-25</div>
</div>
</div>
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>#</th>
<th class="text-left">DESCRIPTION</th>
<th class="text-right">UNIT PRICE</th>
<th class="text-right">AMOUNT</th>
<th class="text-right">TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no">1</td>
<td class="text-left">Create simple website</td>
<td class="unit">$1500.00</td>
<td class="qty">1</td>
<td class="total">$1500.00</td>
</tr>
<tr>
<td class="no">2</td>
<td class="text-left">Social media posts</td>
<td class="unit">$100.00</td>
<td class="qty">10</td>
<td class="total">$1000.00</td>
</tr>
<tr>
<td class="no">3</td>
<td class="text-left">Email templates</td>
<td class="unit">$150.73</td>
<td class="qty">2</td>
<td class="total">$301.46</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td colspan="2">SUBTOTAL</td>
<td>$2801.46</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">TAX 25.00%</td>
<td>$700.37</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2">GRAND TOTAL</td>
<td>$3501.83</td>
</tr>
</tfoot>
</table>
<div class="thanks">Thank you!</div>
<div class="notices">
<div>NOTICE:</div>
<div class="notice">A finance charge of 1.5% will be made on unpaid balances after 30 days.</div>
</div>
</main>
<footer>
Invoice was created on a computer and is valid without the signature and seal.
</footer>
</div>
</div>
</div>
</body>
</html>