<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invoice</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="invoice-header">
<div class="header-left">
<h1>INVOICE</h1>
<div class="invoice-meta">
<div class="meta-item">
<span class="label">Invoice Number:</span>
<span class="value">INV-2026-001234</span>
</div>
<div class="meta-item">
<span class="label">Invoice Date:</span>
<span class="value">February 12, 2026</span>
</div>
<div class="meta-item">
<span class="label">Due Date:</span>
<span class="value">March 14, 2026</span>
</div>
</div>
</div>
<div class="header-right">
<div class="company-info">
<h2>Acme Solutions AB</h2>
<p>Turebergs Allé 15<br>
191 47 Sollentuna<br>
Sweden</p>
<p>Org.nr: 556789-0123<br>
VAT: SE556789012301</p>
</div>
</div>
</header>
<section class="bill-to">
<h3>Bill To:</h3>
<div class="customer-info">
<strong>Tech Innovations Inc.</strong><br>
Storgatan 42<br>
114 55 Stockholm<br>
Sweden<br>
<br>
Org.nr: 559876-5432
</div>
</section>
<section class="invoice-items">
<table>
<thead>
<tr>
<th class="col-description">Description</th>
<th class="col-quantity">Quantity</th>
<th class="col-price">Unit Price</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item-description">
<strong>API Integration Service</strong><br>
Custom API integration with existing systems, including authentication setup and endpoint configuration
</td>
<td class="text-center">1</td>
<td class="text-right">8,500.00 SEK</td>
<td class="text-right">8,500.00 SEK</td>
</tr>
<tr>
<td class="item-description">
<strong>PDF Generation - Monthly Subscription</strong><br>
Premium plan with 10,000 API calls per month, including WeasyPrint and wkhtmltopdf engines
</td>
<td class="text-center">1</td>
<td class="text-right">1,995.00 SEK</td>
<td class="text-right">1,995.00 SEK</td>
</tr>
<tr>
<td class="item-description">
<strong>Premium Support</strong><br>
Dedicated support with 4-hour response time, including phone and email assistance
</td>
<td class="text-center">1</td>
<td class="text-right">750.00 SEK</td>
<td class="text-right">750.00 SEK</td>
</tr>
<tr>
<td class="item-description">
<strong>Custom Template Design</strong><br>
Professional invoice template design with company branding and custom layouts
</td>
<td class="text-center">3</td>
<td class="text-right">1,250.00 SEK</td>
<td class="text-right">3,750.00 SEK</td>
</tr>
<tr>
<td class="item-description">
<strong>Additional Storage</strong><br>
Extra 50GB cloud storage for generated PDFs with 90-day retention
</td>
<td class="text-center">1</td>
<td class="text-right">295.00 SEK</td>
<td class="text-right">295.00 SEK</td>
</tr>
</tbody>
<tfoot>
<tr class="subtotal-row">
<td colspan="3" class="text-right"><strong>Subtotal:</strong></td>
<td class="text-right">15,290.00 SEK</td>
</tr>
<tr class="tax-row">
<td colspan="3" class="text-right"><strong>VAT (25%):</strong></td>
<td class="text-right">3,822.50 SEK</td>
</tr>
<tr class="total-row">
<td colspan="3" class="text-right"><strong>Total Amount Due:</strong></td>
<td class="text-right"><strong>19,112.50 SEK</strong></td>
</tr>
</tfoot>
</table>
</section>
<section class="payment-terms">
<h3>Payment Terms</h3>
<p>Payment is due within 30 days from the invoice date. Please make payment to:</p>
<div class="bank-details">
<p>
<strong>Bank:</strong> Swedbank<br>
<strong>Account:</strong> 8327-9 123 456 789-0<br>
<strong>IBAN:</strong> SE83 8000 0832 7912 3456 7890<br>
<strong>BIC/SWIFT:</strong> SWEDSESS
</p>
</div>
<p class="payment-reference">Please include invoice number <strong>INV-2026-001234</strong> as payment reference.</p>
<p class="late-fee-notice">Late payments may incur a 2% monthly interest charge.</p>
</section>
<footer class="invoice-footer">
<p>Thank you for your business!</p>
<p class="footer-contact">
Email: billing@acmesolutions.se | Phone: +46 8-123 456 78 | Web: www.acmesolutions.se
</p>
<p class="footer-legal">
This invoice was generated using <strong>PdfBroker.io</strong> - Professional PDF generation API
</p>
</footer>
</body>
</html>
/* Page setup for A4 printing */
@page {
size: A4;
margin: 2cm 1.5cm;
}
/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 10pt;
line-height: 1.6;
color: #333;
background: #ffffff;
}
/* Header section */
.invoice-header {
display: flex;
justify-content: space-between;
margin-bottom: 2cm;
padding-bottom: 1cm;
border-bottom: 3px solid #6462a8;
}
.header-left h1 {
font-size: 28pt;
font-weight: 700;
color: #6462a8;
margin-bottom: 0.5cm;
letter-spacing: 1px;
}
.invoice-meta {
display: flex;
flex-direction: column;
gap: 0.3cm;
}
.meta-item {
display: flex;
gap: 0.5cm;
}
.meta-item .label {
font-weight: 600;
color: #666;
min-width: 4cm;
}
.meta-item .value {
color: #333;
}
.header-right {
text-align: right;
}
.company-info h2 {
font-size: 14pt;
font-weight: 600;
color: #333;
margin-bottom: 0.3cm;
}
.company-info p {
font-size: 9pt;
line-height: 1.5;
color: #666;
margin-bottom: 0.3cm;
}
/* Bill To section */
.bill-to {
margin-bottom: 1cm;
padding: 0.5cm;
background: #f8f9fa;
border-left: 4px solid #6462a8;
}
.bill-to h3 {
font-size: 12pt;
font-weight: 600;
color: #6462a8;
margin-bottom: 0.3cm;
}
.customer-info {
font-size: 9pt;
line-height: 1.6;
color: #333;
}
.customer-info strong {
font-size: 10pt;
color: #333;
}
/* Invoice items table */
.invoice-items {
margin-bottom: 1cm;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 9pt;
}
thead {
background: #6462a8;
color: #ffffff;
}
thead th {
padding: 0.4cm;
text-align: left;
font-weight: 600;
font-size: 10pt;
}
.col-description {
width: 50%;
}
.col-quantity {
width: 15%;
text-align: center;
}
.col-price {
width: 17.5%;
text-align: right;
}
.col-amount {
width: 17.5%;
text-align: right;
}
tbody tr {
border-bottom: 1px solid #e0e0e0;
}
tbody tr:nth-child(odd) {
background: #f8f9fa;
}
tbody td {
padding: 0.4cm;
vertical-align: top;
}
.item-description strong {
display: block;
font-size: 9.5pt;
color: #333;
margin-bottom: 0.1cm;
}
.item-description {
color: #666;
line-height: 1.5;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
/* Table footer totals */
tfoot tr {
border-top: 2px solid #e0e0e0;
}
tfoot td {
padding: 0.3cm 0.4cm;
font-size: 10pt;
}
.subtotal-row td {
padding-top: 0.5cm;
}
.tax-row {
background: #f8f9fa;
}
.total-row {
background: #6462a8;
color: #ffffff;
font-size: 11pt;
}
.total-row td {
padding: 0.5cm 0.4cm;
}
/* Payment terms section */
.payment-terms {
margin-bottom: 1cm;
padding: 0.5cm;
background: #f8f9fa;
border-radius: 4px;
}
.payment-terms h3 {
font-size: 12pt;
font-weight: 600;
color: #6462a8;
margin-bottom: 0.3cm;
}
.payment-terms p {
font-size: 9pt;
line-height: 1.6;
color: #333;
margin-bottom: 0.3cm;
}
.bank-details {
margin: 0.4cm 0;
padding: 0.4cm;
background: #ffffff;
border-left: 3px solid #6462a8;
}
.bank-details p {
margin: 0;
}
.payment-reference {
font-weight: 600;
color: #6462a8;
}
.late-fee-notice {
font-size: 8pt;
color: #999;
font-style: italic;
}
/* Footer section */
.invoice-footer {
margin-top: 1.5cm;
padding-top: 0.5cm;
border-top: 2px solid #e0e0e0;
text-align: center;
font-size: 8pt;
color: #666;
}
.invoice-footer p {
margin-bottom: 0.2cm;
}
.footer-contact {
color: #6462a8;
font-weight: 600;
}
.footer-legal {
font-style: italic;
color: #999;
}
/* Print optimization */
@media print {
body {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.invoice-items {
page-break-inside: avoid;
}
tbody tr {
page-break-inside: avoid;
}
}
Click "Run demo as PDF" or "Run demo as image" to see the result here.
Generating...
Generating your document...