Introduction | TrueUI

Molecules | Widgets

Payment Plans

Example

Choose an offer that works for you.

Here are a few offers with monthly payments that may work with your budget. In just a few clicks, you’ll be on your way to pay off this balance.

Payment

Installments

Total

Pay Today

$9.00

12

$108.00

Payment

Installments

Total

Pay Today

$9.00

12

$108.00

Payment

Installments

Total

Pay Today

$9.00

12

$108.00

The first payment is due today.

Would you rather build your own plan?

Enter a payment amount that works for you. The plan builder will update automatically and tell you what we can accept.

Installments
3
Total
$83

Need something different?

HTML

<h2 class="f2 fw5 tc mb2">Choose an offer that works for you.</h2>
<h3 class="f4 fw5 tc mt2 lh-title">
 Here are a few offers with monthly payments that may work with your budget.
 In just a few clicks, you’ll be on your way to pay off this balance.
</h3>
<!-- Offer 1-->
<div class="cf center mw6">
 <div class="fl w-25">
   <p class="tc mv2 b f6">Payment</p>
 </div>
 <div class="fl w-25">
   <p class="tc mv2 b f6">Installments</p>
 </div>
 <div class="fl w-25">
   <p class="tc mv2 b f6">Total</p>
 </div>
 <div class="fl w-25">
   <p class="tc mv2 dn">Pay Today</p>
 </div>
</div>
<div class="cf center mw6">
 <div class="fl w-25">
   <p class="tc mv2">$9.00</p>
 </div>
 <div class="fl w-25">
   <p class="tc mv2">12</p>
 </div>
 <div class="tc mv2 fl w-25">
   <p class="tc mv2 green b">$108.00</p>
 </div>
 <div class="fl w-25">
   <p class="tc mv2 mt2"><a href="#" class="btn btn--green">Choose Offer</a></p>
 </div>
 <!--Offer 2-->
 <div class="cf center mw6 dn-ns">
   <div class="fl w-25">
     <p class="tc mv2 b f6">Payment</p>
   </div>
   <div class="fl w-25">
     <p class="tc mv2 b f6">Installments</p>
   </div>
   <div class="fl w-25">
     <p class="tc mv2 b f6">Total</p>
   </div>
   <div class="fl w-25">
     <p class="tc mv2 dn">Pay Today</p>
   </div>
 </div>
 <div class="cf center mw6">
   <div class="fl w-25">
     <p class="tc mv2">$9.00</p>
   </div>
   <div class="fl w-25">
     <p class="tc mv2">12</p>
   </div>
   <div class="tc mv2 fl w-25">
     <p class="tc mv2 green b">$108.00</p>
   </div>
   <div class="fl w-25">
     <p class="tc mv2 mt2"><a href="#" class="btn btn--green">Choose Offer</a></p>
   </div>
 </div>
 <!--Offer 3-->
 <div class="cf center mw6 dn-ns">
   <div class="fl w-25">
     <p class="tc mv2 b f6">Payment</p>
   </div>
   <div class="fl w-25">
     <p class="tc mv2 b f6">Installments</p>
   </div>
   <div class="fl w-25">
     <p class="tc mv2 b f6">Total</p>
   </div>
   <div class="fl w-25">
     <p class="tc mv2 dn">Pay Today</p>
   </div>
 </div>
 <div class="cf center mw6">
   <div class="fl w-25">
     <p class="tc mv2">$9.00</p>
   </div>
   <div class="fl w-25">
     <p class="tc mv2">12</p>
   </div>
   <div class="tc mv2 fl w-25">
     <p class="tc mv2 green b">$108.00</p>
   </div>
   <div class="fl w-25">
     <p class="tc mv2"><a href="#" class="btn btn--green">Choose Offer</a></p>
   </div>
 </div>
 <div class="cf center mt3">
   <div class="fl w-50 tc">        
     <p>The first payment is due today.</p>
   </div>
   <div class="fl w-50 tc">
     <p><a href="#">Change start date</a></p>
   </div>
 </div>
 <h4 class="f3 normal mb0 tc">Would you rather build your own plan?</h4>
 <p class="tc">Enter a payment amount that works for you. The plan builder will update automatically and tell you what we |can accept.</p>
 <div class="mt4 cf w-100">
   <div class="fl w-25 f6 b"> 
     <label class="db pb2 tc">Payment</label>
     <input type="text" placeholder="Amount" class="normal w-100 pa2 br1 ba b--charcoal-medium">
   </div>
   <div class="fl w-25 f6 b"> 
     <div class="mt0 mb2 tc">Installments</div>
     <div class="pt2 tc">3</div>
   </div>
   <div class="fl w-25 f6 b">
     <div class="mt0 mb2 tc">Total</div>
     <div class="pt2 green tc">$83</div>
   </div>
   <div class="fl w-25">
     <div class="pt3"><a href="#" class="btn btn--green mt2">Choose</a></div>
   </div>
 </div>
 <h4 class="f3 normal mb0 tc">Need something different?</h4>
</div>
<div class="mw6 center ph4-ns mt3">
 <p class="mv2 fl w-50"><a href="#" class="f6 link"> <img src="../../img/icon-money.svg" alt="Payment" |class="v-mid mr2">to make a one-time payment </a></p>
 <p class="mv2 fl w-50"><a href="#" class="f6 link"><img src="../../img/icon-arrow-down.svg" alt="Lower |Payments" class="v-mid mr2">lower payments </a></p>
 <p class="mv2 fl w-50"><a href="#" class="f6 link"><img src="../../img/icon-calendar.svg" alt="One Time |Payment" class="v-mid mr2">flexible payment dates</a></p>
 <p class="mv2 fl w-50"><a href="#" class="f6 link"><img src="../../img/icon-arrow-vertical.svg" alt="Flexible |Payment Amounts" class="v-mid mr2">flexible payment amounts</a></p>
 <p class="mv2 fl w-50"><a href="#" class="f6 link"><img src="../../img/icon-question.svg" alt="Ask a Question" |class="v-mid mr2">to ask a question</a></p>
</div>