Created
September 3, 2018 10:01
-
-
Save Cannonb4ll/11d305cc52af700abb236fb05ea7c334 to your computer and use it in GitHub Desktop.
Laravel DomPDF Invoice Design
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Invoice - #123</title> | |
| <style type="text/css"> | |
| @page { | |
| margin: 0px; | |
| } | |
| body { | |
| margin: 0px; | |
| } | |
| * { | |
| font-family: Verdana, Arial, sans-serif; | |
| } | |
| a { | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| table { | |
| font-size: x-small; | |
| } | |
| tfoot tr td { | |
| font-weight: bold; | |
| font-size: x-small; | |
| } | |
| .invoice table { | |
| margin: 15px; | |
| } | |
| .invoice h3 { | |
| margin-left: 15px; | |
| } | |
| .information { | |
| background-color: #60A7A6; | |
| color: #FFF; | |
| } | |
| .information .logo { | |
| margin: 5px; | |
| } | |
| .information table { | |
| padding: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="information"> | |
| <table width="100%"> | |
| <tr> | |
| <td align="left" style="width: 40%;"> | |
| <h3>John Doe</h3> | |
| <pre> | |
| Street 15 | |
| 123456 City | |
| United Kingdom | |
| <br /><br /> | |
| Date: 2018-01-01 | |
| Identifier: #uniquehash | |
| Status: Paid | |
| </pre> | |
| </td> | |
| <td align="center"> | |
| <img src="/path/to/logo.png" alt="Logo" width="64" class="logo"/> | |
| </td> | |
| <td align="right" style="width: 40%;"> | |
| <h3>CompanyName</h3> | |
| <pre> | |
| https://company.com | |
| Street 26 | |
| 123456 City | |
| United Kingdom | |
| </pre> | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| <br/> | |
| <div class="invoice"> | |
| <h3>Invoice specification #123</h3> | |
| <table width="100%"> | |
| <thead> | |
| <tr> | |
| <th>Description</th> | |
| <th>Quantity</th> | |
| <th>Total</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Item 1</td> | |
| <td>1</td> | |
| <td align="left">€15,-</td> | |
| </tr> | |
| <tr> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| </tr> | |
| <tr> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| <td></td> | |
| </tr> | |
| </tbody> | |
| <tfoot> | |
| <tr> | |
| <td colspan="1"></td> | |
| <td align="left">Total</td> | |
| <td align="left" class="gray">€15,-</td> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| </div> | |
| <div class="information" style="position: absolute; bottom: 0;"> | |
| <table width="100%"> | |
| <tr> | |
| <td align="left" style="width: 50%;"> | |
| © {{ date('Y') }} {{ config('app.url') }} - All rights reserved. | |
| </td> | |
| <td align="right" style="width: 50%;"> | |
| Company Slogan | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks :)