Credit Cards - Arctic Admin Dashboard

Credit card

Saved Cards

Primary card

$2,080.5

Tim Clarkson

4143 **** 3457

04/2024

Card Type:

Visa

Card Holder:

Tim Clarkson

Card Number:

4143 **** 3457

Validation Date:

04/2024

Balance:

2,080.5USD

Add new Card Remove this Card

<div class="py-md d-flex justify-content-between align-items-center mb-lg">
  <div class="card-title">Saved Cards</div>
  <div class="mt--sm">
    <span class="bmd-form-group is-filled">
      <div class="dropdown bootstrap-select">
        <select class="selectpicker" data-style="border">
          <option>Visa Card 4143 **** 3457</option>
          <option>Master Card 3743 **** 4089</option>
        </select>
        <button type="button" tabindex="-1" class="btn dropdown-toggle border" data-toggle="dropdown" role="combobox" aria-owns="bs-select-1" aria-haspopup="listbox" aria-expanded="false" title="Visa Card 4143 **** 3457">
          <div class="filter-option">
            <div class="filter-option-inner"><div class="filter-option-inner-inner">Visa Card 4143 **** 3457</div></div>
          </div>
        </button>
        <div class="dropdown-menu">
          <div class="inner show" role="listbox" id="bs-select-1" tabindex="-1"><ul class="dropdown-menu inner show" role="presentation"></ul></div>
        </div>
      </div>
    </span>
  </div>
</div>
<div class="row justify-content-between">
  <div class="col-md-6">
    <div class="credit-card-wrap shadow rounded p-md" style="width: 350px;">
      <div class="d-flex justify-content-between mb-xxxl">
        <div>
          <span class="text-muted">Primary card</span>
          <h2 class="m-0">$2,080.5</h2>
        </div>
        <img class="icon icon-sm" src="assets/images/payment-card/004-visa.svg" />
      </div>
      <div class="d-flex justify-content-between align-items-end">
        <div>
          <p class="font-weight-semi m-0">Tim Clarkson</p>
          <span class="text-small text-muted">4143 **** 3457</span>
        </div>
        <span class="text-small text-muted">04/2024</span>
      </div>
    </div>
  </div>
  <div class="col-md-6" style="max-width: 300px;">
    <div class="d-flex justify-content-between">
      <p>Card Type:</p>
      <span class="text-muted">Visa</span>
    </div>
    <div class="d-flex justify-content-between">
      <p>Card Holder:</p>
      <span class="text-muted">Tim Clarkson</span>
    </div>
    <div class="d-flex justify-content-between">
      <p>Card Number:</p>
      <span class="text-muted">4143 **** 3457</span>
    </div>
    <div class="d-flex justify-content-between">
      <p>Validation Date:</p>
      <span class="text-muted">04/2024</span>
    </div>
    <div class="d-flex justify-content-between">
      <p>Balance:</p>
      <span class="text-muted">2,080.5USD</span>
    </div>
  </div>
</div>
<div class="d-flex my-md">
  <div class="flex-grow-1"></div>
  <a class="btn btn-opacity btn-primary btn-sm mr-md">Add new Card</a><a class="btn btn-opacity btn-danger btn-sm">Remove this Card</a>
</div>

Saved Cards

Primary card

$2,080.5

Tim Clarkson

4143 **** 3457

04/2024

Additional card

$1,080.5

Tim Clarkson

4143 **** 3457

04/2024

Additional card

$380.5

Tim Clarkson

4143 **** 3457

04/2024

Primary Card

Current balance

$2,080.5

Tim Clarkson

4143 **** 3457

04/2024

Card Type:

Visa

Card Holder:

Tim Clarkson

Card Number:

4143 **** 3457

Validation Date:

04/2024

Balance:

2,080.5USD

<div class="row">
  <div class="col-md-5">
    <div class="card">
      <div class="card-title p-md m-0">Saved Cards</div>
      <div class="p-lg ps ps--active-y" data-perfect-scrollbar="" data-suppress-scroll-x="true" style="height: 400px;">
        <div class="credit-card-wrap shadow rounded p-md mb-lg">
          <div class="d-flex justify-content-between mb-xxxl">
            <div>
              <span class="text-muted">Primary card</span>
              <h2 class="m-0">$2,080.5</h2>
            </div>
            <img class="icon icon-sm" src="assets/images/payment-card/004-visa.svg" />
          </div>
          <div class="d-flex justify-content-between align-items-end">
            <div>
              <p class="font-weight-semi m-0">Tim Clarkson</p>
              <span class="text-small text-muted">4143 **** 3457</span>
            </div>
            <span class="text-small text-muted">04/2024</span><i class="material-icons icon icon-xs cursor-pointer hover-gray" data-toggle="tooltip" title="" data-original-title="Remove this card">delete</i>
          </div>
        </div>
        <div class="credit-card-wrap shadow rounded p-md mb-lg">
          <div class="d-flex justify-content-between mb-xxxl">
            <div>
              <span class="text-muted">Additional card</span>
              <h2 class="m-0">$1,080.5</h2>
            </div>
            <img class="icon icon-sm" src="assets/images/payment-card/002-mastercard.svg" />
          </div>
          <div class="d-flex justify-content-between align-items-end">
            <div>
              <p class="font-weight-semi m-0">Tim Clarkson</p>
              <span class="text-small text-muted">4143 **** 3457</span>
            </div>
            <span class="text-small text-muted">04/2024</span><i class="material-icons icon icon-xs cursor-pointer hover-gray" data-toggle="tooltip" title="" data-original-title="Remove this card">delete</i>
          </div>
        </div>
        <div class="credit-card-wrap shadow rounded p-md mb-lg">
          <div class="d-flex justify-content-between mb-xxxl">
            <div>
              <span class="text-muted">Additional card</span>
              <h2 class="m-0">$380.5</h2>
            </div>
            <img class="icon icon-sm" src="assets/images/payment-card/003-american express.svg" />
          </div>
          <div class="d-flex justify-content-between align-items-end">
            <div>
              <p class="font-weight-semi m-0">Tim Clarkson</p>
              <span class="text-small text-muted">4143 **** 3457</span>
            </div>
            <span class="text-small text-muted">04/2024</span><i class="material-icons icon icon-xs cursor-pointer hover-gray" data-toggle="tooltip" title="" data-original-title="Remove this card">delete</i>
          </div>
        </div>
        <div class="ps__rail-x" style="left: 0px; bottom: -193px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div>
        <div class="ps__rail-y" style="top: 193px; height: 400px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 112px; height: 232px;"></div></div>
      </div>
      <div class="p-md gray-200 border-top">
        <button class="btn btn-flat btn-primary w-full" data-toggle="modal" data-target="#addNewCardModal">Add New Card</button>
        <!-- Modal-->
        <div class="modal fade" id="addNewCardModal" tabindex="-1" role="dialog" aria-labelledby="addNewCardModaltitle" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <p class="card-title m-0" id="addNewCardModaltitle">Add new Card</p>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              <div class="modal-body">
                <form class="m-0">
                  <span class="bmd-form-group">
                    <div class="input-group with-icon input-light mb-3">
                      <div class="input-group-prepend">
                        <i class="input-group-text material-icons">person</i>
                      </div>
                      <input type="text" class="form-control" placeholder="Name on Card" />
                    </div>
                  </span>
                  <span class="bmd-form-group">
                    <div class="input-group with-icon input-light mb-3">
                      <div class="input-group-prepend">
                        <i class="input-group-text material-icons">credit_card</i>
                      </div>
                      <input type="text" class="form-control" placeholder="Card Number" />
                    </div>
                  </span>
                  <div class="row mb-md">
                    <div class="col-6">
                      <span class="bmd-form-group">
                        <div class="input-group with-icon input-light mb-3">
                          <div class="input-group-prepend">
                            <i class="input-group-text material-icons">calendar_today</i>
                          </div>
                          <input type="text" class="form-control" placeholder="Exp Date" />
                        </div>
                      </span>
                    </div>
                    <div class="col-6">
                      <span class="bmd-form-group">
                        <div class="input-group with-icon input-light mb-3">
                          <div class="input-group-prepend">
                            <i class="input-group-text material-icons">security</i>
                          </div>
                          <input type="text" class="form-control" placeholder="CVV Code" />
                        </div>
                      </span>
                    </div>
                  </div>
                  <div class="d-flex">
                    <div class="flex-grow-1"></div>
                    <button type="button" class="btn btn-opacity btn-danger mr-md" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-flat btn-primary">Save Card</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-5">
    <div class="card">
      <div class="card-body">
        <div class="card-title mb-xl">Primary Card</div>
        <div class="credit-card-wrap shadow rounded p-md w-full">
          <div class="d-flex justify-content-between mb-xxxl">
            <div>
              <span class="text-muted">Current balance</span>
              <h2 class="m-0">$2,080.5</h2>
            </div>
            <img class="icon icon-sm" src="assets/images/payment-card/004-visa.svg" />
          </div>
          <div class="d-flex justify-content-between align-items-end">
            <div>
              <p class="font-weight-semi m-0">Tim Clarkson</p>
              <span class="text-small text-muted">4143 **** 3457</span>
            </div>
            <span class="text-small text-muted">04/2024</span>
          </div>
        </div>
      </div>
    </div>
    <div class="p-md gray-200 border-top">
      <div class="d-flex justify-content-between">
        <p>Card Type:</p>
        <span class="text-muted">Visa</span>
      </div>
      <div class="d-flex justify-content-between">
        <p>Card Holder:</p>
        <span class="text-muted">Tim Clarkson</span>
      </div>
      <div class="d-flex justify-content-between">
        <p>Card Number:</p>
        <span class="text-muted">4143 **** 3457</span>
      </div>
      <div class="d-flex justify-content-between">
        <p>Validation Date:</p>
        <span class="text-muted">04/2024</span>
      </div>
      <div class="d-flex justify-content-between">
        <p>Balance:</p>
        <span class="text-muted">2,080.5USD </span>
      </div>
    </div>
  </div>
</div>

Buy Arctic

Credit card

$2,080.5

$2,080.5

$1,080.5

$380.5

$2,080.5

Theme Settings