Custom Invoice Template

Customize Invoice TemplateInvite customer contacts and assign access permission.

Invoice 76284
Office 123 Anywhere St City Name CA, 90210
Payment Terms: MASTERCARD/VISA PO Number: 26598518 Customer Number: 632906
STELLR Invoicing

Total amount in (USD)
8,054.47Dec 9, 2019

Subtotal
7,808.20
Tax
246.27

For Customer Service inquiry call 555-555-5555 or email cloudsolv-IT@synnex.com All sales are subject to cloudsubscription standard Terms & Conditions which can be found in your storefront at www.cloudsubscription.com.

All sales of products and finished goods offered and supplied by Seller to its customer (“Buyer”) for resale shall be pursuant to the following standard terms and conditions. Products may include, but are not limited to hardware products, software (including all open source licensed or distributed by SYNNEX, or incorporated into any software), and services (collectively “Products”).

Subscription Quantity Unit Price Extended Price Bill Frequency Extended MSRP
Office 365 E3 1Y 7 240.00 1,680.00 Month 680.00
Office 365 E3 1Y 7 240.00 1,680.00 Month 680.00
Subtotal
7,808.20
Tax
246.27

Total amount in (USD)
8,054.47
        
<!--custom invoice template-->
  <div class="storefront-rightbar custom-invoice-template">
     <div class="row">
        <div class="col-md-6">
           <h1 class="storefront-heading">Customize Invoice Template<span>Invite customer contacts and assign access permission.</span></h1>
        </div>
     </div>
        <div class="row">
           <div class="col-md-12">
              <div class="invoice-template">
                 <div class="row m-0 py-2 d-flex align-items-center">
                    <div class="col-md-6">
                       <div class="edit-toggle">
                          <label class="toggle-lbl">Edit</label>
                          <span class="toggle-btn">
                             <label class="switch editInv"><input type="checkbox"><span class="slider round"></span></label>
                          </span>
                       </div>
                    </div>
                    <div class="col-md-6 d-flex">
                       <input type="button" class="btn btn-outline disabled ml-auto saveEdit mr-2" value="Cancel">
                       <input type="button" class="btn btn-primary disabled saveEdit" value="Save">
                    </div>
                 </div>
                 <div class="row mx-5 mt-3">
                    <div class="col-md-6 mt-2">
                       <div class="invoice-no">Invoice <span>76284</span></div>
                       <div class="bill-details">
                          <input type="text" class="form-control mt-3 mb-2 w-50 editable" value="Bill To" style="display: none;">
                          <label class="non-edit">Bill To</label>
                          <span>Office <i class="icon-delete editable" style="display: none;" data-toggle="tooltip" data-placement="top" data-original-title="Delete"></i></span>
                          <span>123 Anywhere St <i class="icon-delete editable" style="display: none;" data-toggle="tooltip" data-placement="top" data-original-title="Delete"></i></span>
                          <span>City Name CA, 90210 <i class="icon-delete editable" style="display: none;" data-toggle="tooltip" data-placement="top" data-original-title="Delete"></i></span>
                       </div>
                       <div class="bill-details">
                          <input type="text" class="form-control mt-3 mb-2 w-50 editable" value="Details" style="display: none;">
                          <label class="non-edit">Details</label>
                          <span>Payment Terms: MASTERCARD/VISA <i class="icon-delete editable" style="display: none;" data-toggle="tooltip" data-placement="top" data-original-title="Delete"></i></span>
                          <span>PO Number: 26598518 <i class="icon-delete editable" style="display: none;" data-toggle="tooltip" data-placement="top" data-original-title="Delete"></i></span>
                          <span>Customer Number: 632906 <i class="icon-delete editable" style="display: none;" data-toggle="tooltip" data-placement="top" data-original-title="Delete"></i></span>
                       </div>
                    </div>
                    <div class="col-md-6">
                       <div class="invoice-logo active">
                          <div class=" ml-auto imgLogo"><img src="images/steller-m-logo.png"></div><i class="icon-delete editable" style="display: none;" data-toggle="tooltip" data-placement="top" data-original-title="Delete"></i>
                       </div>
                       <div class="steller-invoicing">
                          <input type="text" class="form-control mt-3 mb-2 editable" value="STELLR Invoicing" style="display: none;">
                          <div class="invoice-heading non-edit">STELLR Invoicing</div>
                          <hr class="hair-line my-2">
                          <div class="invoice-amount">
                             <div class="amountusd">
                                <input type="text" class="form-control mt-3 mb-2 editable " value="Total amount in (USD)" style="display: none;">
                                <span class="non-edit">Total amount in (USD)</span>
                             </div>
                             <div class="price-date text-right ml-auto">8,054.47<span>Dec 9, 2019</span></div>
                          </div>
                          <hr class="hair-line my-2">
                          <div class="subTotal-w-tax">
                             <div class="subTotal-heading">Subtotal</div>
                             <div class="subTtoal-val ml-auto">7,808.20</div>
                          </div>
                          <div class="subTotal-w-tax mt-2">
                             <div class="subTotal-heading">Tax</div>
                             <div class="subTtoal-val ml-auto">246.27</div>
                          </div>
                       </div>
                    </div>
                    <div class="col-md-12">
                       <hr class="hair-line">
                    </div>
                    <div class="col-md-12">
                       <div class="customer-service">
                          <textarea class="form-control edit-textarea">For Customer Service inquiry call 555-555-5555 or email cloudsolv-IT@synnex.com All sales are subject to cloudsubscription standard Terms &amp; Conditions which can be found in your storefront at www.cloudsubscription.com.</textarea>
                          <textarea class="form-control edit-textarea">All sales of products and finished goods offered and supplied by Seller to its customer (“Buyer”) for resale shall be pursuant to the following standard terms and conditions. Products may include, but are not limited to hardware products, software (including all open source licensed or distributed by SYNNEX, or incorporated into any software), and services (collectively “Products”).</textarea>
                          <p class="inquiry-num">For Customer Service inquiry call 555-555-5555 or email cloudsolv-IT@synnex.com
                             All sales are subject to cloudsubscription standard Terms &amp; Conditions which can be found in your storefront at www.cloudsubscription.com.</p>
                          <p>All sales of products and finished goods offered and supplied by Seller to its customer (“Buyer”) for resale shall be pursuant to the following standard terms and conditions. Products may include, but are not limited to hardware products, software (including all open source licensed or distributed by SYNNEX, or incorporated into any software), and services (collectively “Products”).</p>
                       </div>
                    </div>
                    <div class="col-md-12 detail-table">
                       <div class="sub-table">
                          <table>
                             <thead>
                                <tr>
                                   <th>Subscription</th>
                                   <th>Quantity</th>
                                   <th class="text-right">Unit Price</th>
                                   <th class="text-right">Extended Price</th>
                                   <th class="text-right">Bill Frequency</th>
                                   <th class="text text-right">Extended MSRP</th>
                                </tr>
                             </thead>
                             <tbody>
                                <tr>
                                  <td>Office 365 E3 1Y</td> 
                                  <td>7</td> 
                                  <td class="text-right">240.00</td> 
                                  <td class="text-right">1,680.00</td> 
                                  <td class="text-right">Month</td>
                                  <td class="text-right">680.00</td>
                                </tr>
                                <tr>
                                   <td>Office 365 E3 1Y</td> 
                                   <td>7</td> 
                                   <td class="text-right">240.00</td> 
                                   <td class="text-right">1,680.00</td> 
                                   <td class="text-right">Month</td>
                                   <td class="text-right">680.00</td>
                                 </tr>
                             </tbody>
                          </table>
                       </div>
                    </div>
                 </div>
                 <div class="row mx-5 my-4 ">
                    <div class="col-md-6 ml-auto">
                       <div class="steller-invoicing">
                          <div class="subTotal-w-tax">
                             <div class="subTotal-heading">Subtotal</div>
                             <div class="subTtoal-val ml-auto">7,808.20</div>
                          </div>
                          <div class="subTotal-w-tax mt-2">
                             <div class="subTotal-heading">Tax</div>
                             <div class="subTtoal-val ml-auto">246.27</div>
                          </div>
                          <hr class="hair-line my-2">
                          <div class="invoice-amount">
                             <div class="amountusd">
                                <input type="text" class="form-control mt-3 mb-2 editable " value="Total amount in (USD)" style="display: none;">
                                <span class="non-edit">Total amount in (USD)</span>
                             </div>
                             <div class="price-date text-right ml-auto">8,054.47</div>
                          </div>
                       </div>
                    </div>
                 </div>
              </div>
           </div>
      </div>
  </div>
  <!--custom invoice template-->