A modern, clean, and very simple responsive HTML invoice template, because sometimes you just need something quick and simple.
- ✨ Simple design
- 📱 Responsive
- 🔧 Easily customizable
- 🌍 RTL support
Open the invoice.html file and use its HTML and CSS in your application.
By default, the appearance of the invoice when printed is the same as when viewed on a screen. If the invoice is the primary or only element on the page, you may want to consider removing the box-shadow and border, and letting the invoice extend the full width of the page. That can be accomplished with this CSS:
@media print {
.invoice-box {
max-width: unset;
box-shadow: none;
border: 0px;
}
}
Replace <div class="invoice-box">
with <div class="invoice-box rtl">
![Preview](https://private-user-images.githubusercontent.com/3850064/265042694-5d34c8d2-5ac4-45cf-93f9-1eeaaf23765e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwNTQxODMsIm5iZiI6MTcyNTA1Mzg4MywicGF0aCI6Ii8zODUwMDY0LzI2NTA0MjY5NC01ZDM0YzhkMi01YWM0LTQ1Y2YtOTNmOS0xZWVhYWYyMzc2NWUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgzMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MzBUMjEzODAzWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YjFhNjI2ODViNWRhZjZiMzZlM2MyMTY0Y2Y0NmQwN2Y2ZWQ5ZGIwYjBmM2VhN2MwY2JiODI2MzE1MDYxNTQ0MCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.FRQrPhxEOTBbevYKDhYPJRkCBI4HxUOcgiNS3ZG510w)
We love contributions! Contributing is easy; learn how.