HTML
<div> <div class="logo-area"> <div class="circle"></div> <h1>Company Logo</h1> </div> <div class="address-area"> jane.doe@example.com <br /> +49 123 4567 8901 <br /> www.example.com <br /> Busystreet 5 &middot; 00001 Gotham </div> <div class="to-address-area"> <h3>To</h3> Max Mueller <br /> max.mueller@example.com <br /> +49 123 2233 7755 <br /> Lazyroad 2 &middot; 00002 New Town </div> <div class="green-border"></div> <div class="content"> <h1>Lorem ipsum <span class="green">dolor</span></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec enim diam vulputate ut pharetra sit amet aliquam. In cursus turpis massa tincidunt dui ut. Consequat mauris nunc congue nisi vitae suscipit tellus. Volutpat maecenas volutpat blandit aliquam etiam erat. Quis ipsum suspendisse ultrices gravida dictum. Velit ut tortor pretium viverra suspendisse. </p> <p>Porta non pulvinar neque laoreet suspendisse. Et molestie ac feugiat sed lectus. Morbi tristique senectus et netus et. Facilisis sed odio morbi quis commodo odio aenean sed. </p> <p>Id semper risus in hendrerit gravida rutrum quisque non. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Tellus in hac habitasse platea. Tellus elementum sagittis vitae et leo duis ut diam quam. Id interdum velit laoreet id donec. Faucibus in ornare quam viverra orci sagittis eu. </p> </div> <div class="signature"> <img src="https://raw.githubusercontent.com/azettl/printcss.examples/main/HTML%20Examples/Company%20Examples/Letters/Basic%20Corporate%20Letter/signature.png" /> <b>Jane Doe</b> <br /> <b class="green">Print CSS and Web Development Guru</b> </div> </div>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap'); body{ font-family: 'Poppins', sans-serif; } @page{ size:210mm 297mm; margin:6cm 3cm 1cm 3cm; @top-left{ content:element(coverLogo); } @top-right{ content:element(coverAddress); } @top-right-corner{ content:""; background:#000222; } @right-top{ content:""; background:#000222; } @right-middle{ content:""; background:#000222; } @right-bottom{ content:""; background:#000222; } @bottom-right-corner{ content:""; background:#44b75b; } @bottom-right{ content:""; background:#44b75b; } @bottom-center{ width:210mm; content:""; background:#44b75b; } @bottom-left{ content:""; background:#44b75b; } @bottom-left-corner{ content:""; background:#44b75b; } } .logo-area{ position:running(coverLogo); margin-left:-1.5cm; } .address-area{ position:running(coverAddress); margin-right:1.5cm; text-align:right; } .circle{ width:1cm; height:1cm; border:.4cm solid #44b75b; border-radius:100%; display:inline-block; } .logo-area h1{ display:inline-block; text-transform:uppercase; color:#000222; width:5cm; line-height:1; margin-left:0.25cm; position:relative; top:-.25cm; } .signature{ position:absolute; padding-left:.5cm; bottom:.4cm; right:.5cm; background-color:#fff; } img{ display:block; } .to-address-area{ margin-top:-1cm; margin-left:-1.5cm; } .content{ padding:0 1cm 2cm 1cm; background-color:#fff; position:absolute; top:4cm; left:0; } .content h1{ color:#000222; margin-top:0; text-transform: capitalize; } .green{ color:#44b75b; display:block; } .green-border{ border:.125cm solid #44b75b; height:16cm; width:8cm; position:absolute; top:5cm; left:-1.5cm; }
JavaScript
Preview powered by paged.js
PDF rendered with  (https://weasyprint.org/)