---
layout: default
---

<div class="row">
   <div class="col-lg-3">

      <div class="card">
         <div class="card-body">
            <h3 class="card-title">Add a new Credit Card</h3>

            <div class="row row-xs">
               <div class="col-12 form-group">
                  <input class="form-control" type="text" placeholder="Card Number" />
                  <!-- todo: input mask -->
               </div>
               <div class="col-4 form-group">
                  <select class="form-control custom-select">
                     <option>01</option>
                  </select>
               </div>
               <div class="col-4 form-group">
                  <select class="form-control custom-select">
                     <option>2020</option>
                  </select>
               </div>
               <div class="col-4 form-group">
                  <input class="form-control" type="text" placeholder="CVV" />
               </div>
            </div>

            {% include ui/button.html text="Save" color="primary" block=true %}

            <div class="small text-muted mt-3">
               {% include ui/icon.html icon="lock" %}
               128-Bit SSL Encryption
            </div>
         </div>
      </div>

   </div>
   <div class="col-3">2</div>
   <div class="col-3">3</div>
   <div class="col-3">4</div>
</div>