Introduction | TrueUI

Molecules | Widgets

Sidebar payment

UPDATED

Example

Your Balance

Pay Your Balance Now

I can’t pay it all right now

Payment Methods
Original Debt Amount: $500.00

If you want to dispute this balance, you need to write to us within 30 days of getting the initial communication from us. If you think you do not need to pay it for another reason such as bankruptcy or fraudulent activity, we will investigate your claim as required by applicable laws. Dispute this charge.

HTML

<div class="pa4 shadow-1 w-75">
 <h2 class="fw5 f3 mv0">Your Balance</h2>
 <p class="mt3"><a href="#" class="btn btn--lg btn--orange">Pay Your Balance Now</a></p>
 <p class="mt3 f6"><a href="#">I can’t pay it all right now</a></p>
 <div class="dt mt3">
   <div class="dtc v-mid pr4"><img src="../../img/payment-methods.svg" alt="Payment Methods"></div>
   <div class="dtc v-mid"><span class="f6">Original Debt Amount: $500.00</span></div>
 </div>
 <div class="pa3 bg-blue-light mt3">
   <p class="ma0 f7 lh-title">
     If you want to dispute this balance, you need to write to us within 
     30 days of getting the initial communication from us. If you think 
     you do not need to pay it for another reason such as bankruptcy or 
     fraudulent activity, we will investigate your claim as required by 
     applicable laws. <a href="#">Dispute this charge.</a>
   </p>
 </div>
</div>