PrintCSS.live - The PrintCSS Playground

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Basic Corporate Letter</title> </head> <body> <div> <div class="logo-area"> <div class="circle"></div> <h1>Company Logo</h1> </div> <table class="footer"> <tr> <td colspan="3"> <div class="footer-logo-area"> <div class="circle"></div> <h1>Company Logo</h1> </div> </td> </tr> <tr> <td> <h3>Awesome Company</h3> Busystreet 5<br/> 00001 Gotham<br/> Fantasyland </td> <td class="qrcode"> <img src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Company%20Examples/Invoices/Basic%20Corporate%20Invoice/qrcode.png" alt="QR Code to example.com" /> </td> <td> <h3>Payment</h3> Awesome Bank<br/> DE12 1234 0000 5678 9000 00<br/> Best Bank<br/> DE01 2345 6789 0000 1234 56 </td> </tr> </table> <table class="first-page-header"> <tr> <td rowspan="2"> <div class="from-address"> Awesome Company · Busystreet 5 · 00001 Gotham · Fantasyland </div> <div class="to-address"> <h3>Mueller Ltd.</h3> Max Mueller<br/> Lazyroad 2<br/> 00002 New Town<br/> Fantasyland </div> </td> <td class="right"> <h3>Invoice</h3> <table> <tr> <td>Customer No:</td> <td>1234567</td> </tr> <tr> <td>Invoice Date:</td> <td>13. March 2021</td> </tr> <tr> <td>Due Date:</td> <td>27. March 2021</td> </tr> <tr> <td>Our VAT Id:</td> <td>DE 123 456 789</td> </tr> <tr> <td>Your VAT Id:</td> <td>FR 987 654 321</td> </tr> </table> </td> </tr> <tr> <td class="right distance"> <h3>Your Contact</h3> <table> <tr> <td colspan="2">Jane Doe<br/>Print CSS and Web Development Guru</td> </tr> <tr> <td>Phone:</td> <td>+49 123 4567 8901</td> </tr> <tr> <td>E-Mail:</td> <td>jane.doe@example.com</td> </tr> <tr> <td>Website:</td> <td>example.com</td> </tr> </table> </td> </tr> </table> <div class="content"> <h1>Invoice<span class="green">#2021-1234</span></h1> <p> <b>Date: 13. March 2021</b> </p> <p> Dear Mr. Mueller, <br /> we allow ourselves to invoice the following items for our efforts. </p> <table> <thead> <tr> <th>SKU</th> <th>Name</th> <th>Quantity</th> <th class="right">Price</th> <th class="right">Tax</th> <th class="right">Total</th> </tr> </thead> <tbody> <tr> <td>S21T-Gec-RS</td> <td>Summer 2021,<br />Gecko Tee,<br/>Small,<br />Red</td> <td>1</td> <td class="right">14,99 €</td> <td class="right">2,84 €</td> <td class="right">14,99 €</td> </tr> <tr> <td>S21T-Gec-RM</td> <td>Summer 2021,<br />Gecko Tee,<br/>Medium,<br />Red</td> <td>4</td> <td class="right">59,96 €</td> <td class="right">11,36 €</td> <td class="right">59,96 €</td> </tr> <tr> <td>S21T-Lad-WS</td> <td>Summer 2021,<br />Ladybird Tee,<br/>Small,<br />White</td> <td>1</td> <td class="right">14,99 €</td> <td class="right">2,84 €</td> <td class="right">14,99 €</td> </tr> <tr> <td>S21T-Lad-WM</td> <td>Summer 2021,<br />Ladybird Tee,<br/>Medium,<br />White</td> <td>4</td> <td class="right">59,96 €</td> <td class="right">11,36 €</td> <td class="right">59,96 €</td> </tr> <tr> <td>W21S-Gec-RS</td> <td>Winter 2021,<br />Gecko Sweater,<br/>Small,<br />Red</td> <td>1</td> <td class="right">24,99 €</td> <td class="right">4,74 €</td> <td class="right">24,99 €</td> </tr> <tr> <td>W21S-Lad-WM</td> <td>Winter 2021,<br />Ladybird Sweater,<br/>Medium,<br />White</td> <td>2</td> <td class="right">49,98 €</td> <td class="right">9,48 €</td> <td class="right">49,98 €</td> </tr> <tr> <td colspan="5" class="right no-border"> <b>Subtotal</b> </td> <td class="right no-border">182,25 €</td> </tr> <tr> <td colspan="5" class="right no-border"> <b>Tax</b> </td> <td class="right no-border">42,62 €</td> </tr> <tr> <td colspan="5" class="right no-border"> <b>Discount</b> </td> <td class="right no-border">0,00 €</td> </tr> <tr> <td colspan="5" class="right no-border"> <b>Shipping</b> </td> <td class="right no-border">5,99 €</td> </tr> <tr> <td colspan="5" class="right no-border"> <b>Total</b> </td> <td class="right no-border">230,86 €</td> </tr> </tbody> </table> <p> <b>Shipping method:</b> UPS - Express. </p> <p> <b>Payment method:</b> Please transfer the invoice amount within 14 days. </p> </div> </div> </body> </html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap'); body{ font-family: 'Poppins', sans-serif; font-size:12pt; } @page{ size:210mm 297mm; margin:4cm 1cm 6cm 2cm; @top-right{ content:element(coverLogo); } @bottom-right-corner{ content:""; background:#44b75b; border-top:.25cm solid #000222; } @bottom-right{ content:""; background:#44b75b; border-top:.25cm solid #000222; } @bottom-center{ width:100%; content:element(footerArea); background:#44b75b; border-top:.25cm solid #000222; } @bottom-left{ background:#44b75b; border-top:.25cm solid #000222; } @bottom-left-corner{ content:""; background:#44b75b; border-top:.25cm solid #000222; } } .logo-area{ position:running(coverLogo); } .footer{ position:running(footerArea); color:#000222; width:100%; } .footer td{ vertical-align:top; } .footer .qrcode{ width:6cm; } .footer img{ padding-left:25%; width:50%; } .first-page-header{ width:100%; border-collapse:collapse; font-size:10pt; } .from-address{ font-style:italic; font-size:8pt; margin-bottom:.25cm; } .first-page-header td{ vertical-align:top; } .first-page-header td table{ width:100%; } .first-page-header td table td:first-child{ text-align:left; font-weight:bold; } .circle{ width:1cm; height:1cm; border:.4cm solid #44b75b; border-radius:100%; display:inline-block; } .footer-logo-area{ margin-top:.25cm; } .footer-logo-area .circle{ width:.5cm; height:.5cm; border:.2cm solid white; } .footer-logo-area h1, .logo-area h1{ display:inline-block; text-transform:uppercase; color:#000222; width:4.4cm; line-height:1; margin-left:0.25cm; position:relative; top:-.25cm; } .footer-logo-area h1{ font-size:1em; width:2.4cm; top:-.125cm; } .content table{ width:100%; border-collapse:collapse; } .content th{ text-align: left; border-bottom:.125cm solid #000222; } .content td{ border-bottom:.0125cm solid #000222; } .content tr{ break-inside: avoid; page-break-inside: avoid; } .content .no-border{ border-bottom:none; } .content h1{ color:#000222; margin-top:0; text-transform: capitalize; } .green{ color:#44b75b; display:block; } h3{ margin:0; } .distance{ padding-top:.25cm; } .right{ text-align:right !important; }

JavaScript

Preview powered by paged.js

PDF rendered with (https://weasyprint.org/)