Invoice

A minimal invoice template.

How to

The invoice component can be integrated into any e-commerce to allow the users to display and download a receipt of their purchase. It could also be used by freelancers and agencies as an alternative to PDF invoices.

It includes a 'print' button to convert the invoice into a printable version.

In CSS, we use the print @media rule to apply some style only if the page is printed. You can use it to hide page elements that are not required when printing the invoice (e.g., the main header and footer).

@media not print {
  /* style applied if the page is not printed */
  .invoice {
    overflow: hidden;
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    box-shadow: var(--inner-glow), var(--shadow-sm);
    min-width: 800px;
  }

  /* ... */
}

@media print {
  /* hide the print button */
  .invoice-btn-wrapper {
    display: none;
  }

  /* ... */
}

Categories

• Ecommerce > Templates

Bug report & feedback

Component Github page ↗