Components Data display Invoice Invoice
A printable invoice or receipt: parties, line items, totals with tax, and payment notes.
Preview Code
From Ledger GmbH Bill to Halden & Co SRL Description Qty Price Amount Team plan, October 1 €190.00 €190.00 Extra entities 4 €25.00 €100.00 API calls over plan (4,210) 4.21 €0.40 €1.68
Subtotal €291.68 VAT (reverse charge) €0.00 Total due €291.68
Copy
< article class ="mn-card mn-invoice" style ="max-width:44rem" aria-labelledby ="inv-t" >
< header class ="mn-invoice-head" > < div > < h2 id ="inv-t" > Invoice</ h2 > < span class ="mn-muted" > Ledger GmbH · VAT DE318 442 910</ span > </ div >
< dl > < dt > Number</ dt > < dd > 2026-0419</ dd > < dt > Issued</ dt > < dd > 25 Sep 2026</ dd > < dt > Due</ dt > < dd > 9 Oct 2026</ dd > </ dl > </ header >
< div class ="mn-invoice-parties" > < div > < h3 > From</ h3 > < address > Ledger GmbH< br > Torstraße 12< br > 10119 Berlin, Germany</ address > </ div > < div > < h3 > Bill to</ h3 > < address > Halden & Co SRL< br > Str. Memorandumului 28< br > 400114 Cluj-Napoca, Romania</ address > </ div > </ div >
< div class ="mn-table-wrap" > < table class ="mn-table" > < thead > < tr > < th scope ="col" > Description</ th > < th scope ="col" class ="mn-num" > Qty</ th > < th scope ="col" class ="mn-num" > Price</ th > < th scope ="col" class ="mn-num" > Amount</ th > </ tr > </ thead >
< tbody > < tr > < td > Team plan, October</ td > < td class ="mn-num" > 1</ td > < td class ="mn-num" > €190.00</ td > < td class ="mn-num" > €190.00</ td > </ tr > < tr > < td > Extra entities</ td > < td class ="mn-num" > 4</ td > < td class ="mn-num" > €25.00</ td > < td class ="mn-num" > €100.00</ td > </ tr > < tr > < td > API calls over plan (4,210)</ td > < td class ="mn-num" > 4.21</ td > < td class ="mn-num" > €0.40</ td > < td class ="mn-num" > €1.68</ td > </ tr > </ tbody > </ table > </ div >
< dl class ="mn-invoice-totals" > < dt > Subtotal</ dt > < dd > €291.68</ dd > < dt > VAT (reverse charge)</ dt > < dd > €0.00</ dd > < dt class ="mn-invoice-total" > Total due</ dt > < dd class ="mn-invoice-total" > €291.68</ dd > </ dl >
< p class ="mn-invoice-foot" > Pay by SEPA transfer to DE44 1001 0010 0123 4567 89, reference 2026-0419. VAT reverse charge, Art. 196 Directive 2006/112/EC.</ p >
</ article >
Installation
Everything ships in one stylesheet. There is nothing to import per component.
Copy
< link rel ="stylesheet" href ="https://mian.ro/dist/mian.css" >
Prefer to own the files? /r/invoice.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
Class / attribute Description mn-invoice The document. Add mn-card for the noodle’s surface. mn-invoice-head Title, number and dates (a <dl>). mn-invoice-parties From / Bill to (<address>). mn-invoice-totals Subtotal, tax and total (<dl>); mn-invoice-total on the last pair. mn-invoice-foot Payment terms and notes.
Accessibility Use a real <table> with column headers for line items, and <address> for the parties. The total must be in text, not only emphasised; print styles keep it on paper.