Collapse
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Collapse #1
Visa Card ending in 9909
Primary
Expires: 12/2019
Billing address
Brian Robson
77408 Satterfield MotorwaySuite 469 New Antonetta, BC K3L6P6
New York, NY, 09122-9122
United States
Master Card ending in 1421
Expires: 06/2021
Billing address
Brian Robson
9455 NE ALDERWOOD RDC/O UZW-FH PORTLAND OREGON 97252
PORTLAND, OR, 97252-1777
United States
Discover ending in 4283
Expired: 03/2018
Billing address
Brian Robson
63703 Greenfelder Center Suite767 South Jennings, QC Y4E-1K9
United States
<div id="paymentDetails" class="accordion">
<!-- Card -->
<div class="card u-card-collapse">
<div class="card-header px-4" id="cardHeadingOne">
<div class="row justify-content-sm-between align-items-sm-center collapsed" data-toggle="collapse" data-target="#cardOne" aria-expanded="false" aria-controls="cardOne" role="button">
<div class="col-md-6 mb-2 mb-md-0">
<div class="media align-items-center">
<img class="max-width-9 mr-3" src="../assets/img/100x60/img1.jpg" alt="Image Description">
<div class="media-body">
<span class="font-size-14">Visa Card ending in 9909</span>
</div>
</div>
</div>
<div class="col-4 col-md-2 text-md-right">
<span class="u-label u-label--sm u-label--primary">Primary</span>
</div>
<div class="col-6 col-md-3">
<span class="d-block font-size-14">Expires: 12/2019</span>
</div>
<div class="col-2 col-md-1 text-right">
<span class="fa fa-angle-up u-card-collapse__heading-icon"></span>
</div>
</div>
</div>
<div id="cardOne" class="collapse" aria-labelledby="cardHeadingOne" data-parent="#paymentDetails">
<div class="card-body px-4">
<!-- Card Details -->
<div class="row">
<div class="col-sm-7 mb-2 mb-sm-0">
<h4 class="h6 mb-1">Natalie Curtis</h4>
<span class="d-block font-size-14 mb-1">Bank of America</span>
<p class="small">
<span class="fa fa-info-circle mr-1"></span>
Use this card to add funds to Your Front Balance. <a href="#">See Benefits</a>
</p>
</div>
<div class="col-sm-5 mb-2 mb-sm-0">
<h5 class="h6 mb-0">Billing address</h5>
<h5 class="h6">Brian Robson</h5>
<address class="font-size-14">
77408 Satterfield Motorway<br>
Suite 469 New Antonetta, BC K3L6P6<br>
New York, NY, 09122-9122<br>
United States
</address>
<button type="button" class="btn btn-xs u-btn-secondary--air">Delete</button>
<button type="button" class="btn btn-xs btn-primary">Edit</button>
</div>
</div>
<!-- End Card Details -->
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card u-card-collapse">
<div class="card-header px-4" id="cardHeadingTwo">
<div class="row justify-content-sm-between align-items-sm-center collapsed" data-toggle="collapse" data-target="#cardTwo" aria-expanded="false" aria-controls="cardTwo" role="button">
<div class="col-md-6 mb-2 mb-md-0">
<div class="media align-items-center">
<img class="max-width-9 mr-3" src="../assets/img/100x60/img2.jpg" alt="Image Description">
<div class="media-body">
<span class="d-block font-size-14">Master Card ending in 1421</span>
</div>
</div>
</div>
<div class="col-4 col-md-2 text-md-right">
</div>
<div class="col-6 col-md-3">
<span class="font-size-14">Expires: 06/2021</span>
</div>
<div class="col-2 col-md-1 text-right">
<span class="fa fa-angle-up u-card-collapse__heading-icon"></span>
</div>
</div>
</div>
<div id="cardTwo" class="collapse" aria-labelledby="cardHeadingTwo" data-parent="#paymentDetails">
<div class="card-body px-4">
<!-- Card Details -->
<div class="row">
<div class="col-sm-7 mb-2 mb-sm-0">
<h4 class="h6 mb-1">Natalie Curtis</h4>
<span class="d-block font-size-14 mb-1">Payoneer</span>
<p class="small">
<span class="fa fa-info-circle mr-1"></span>
Use this card to add funds to Your Front Balance. <a href="#">See Benefits</a>
</p>
</div>
<div class="col-sm-5 mb-2 mb-sm-0">
<h5 class="h6 mb-0">Billing address</h5>
<h5 class="h6">Brian Robson</h5>
<address class="font-size-14">
9455 NE ALDERWOOD RD<br>
C/O UZW-FH PORTLAND OREGON 97252<br>
PORTLAND, OR, 97252-1777<br>
United States
</address>
<button type="button" class="btn btn-xs u-btn-secondary--air">Delete</button>
<button type="button" class="btn btn-xs btn-primary">Edit</button>
</div>
</div>
<!-- End Card Details -->
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card u-card-collapse">
<div class="card-header px-4" id="cardHeadingThree">
<div class="row justify-content-sm-between align-items-sm-center collapsed" data-toggle="collapse" data-target="#cardThree" aria-expanded="false" aria-controls="cardThree" role="button">
<div class="col-md-6 mb-2 mb-md-0">
<div class="media align-items-center">
<img class="max-width-9 mr-3" src="../assets/img/100x60/img3.jpg" alt="Image Description">
<div class="media-body">
<span class="d-block font-size-14">Discover ending in 4283</span>
</div>
</div>
</div>
<div class="col-4 col-md-2 text-md-right">
</div>
<div class="col-6 col-md-3">
<span class="text-danger font-size-14">Expired: 03/2018</span>
</div>
<div class="col-2 col-md-1 text-right">
<span class="fa fa-angle-up u-card-collapse__heading-icon"></span>
</div>
</div>
</div>
<div id="cardThree" class="collapse" aria-labelledby="cardHeadingThree" data-parent="#paymentDetails">
<div class="card-body px-4">
<!-- Card Details -->
<div class="row">
<div class="col-sm-7 mb-2 mb-sm-0">
<h4 class="h6 mb-1">Natalie Curtis</h4>
<span class="d-block font-size-14 mb-1">Discover Network</span>
<p class="small">
<span class="fa fa-info-circle mr-1"></span>
Use this card to add funds to Your Front Balance. <a href="#">See Benefits</a>
</p>
</div>
<div class="col-sm-5 mb-2 mb-sm-0">
<h5 class="h6 mb-0">Billing address</h5>
<h5 class="h6">Brian Robson</h5>
<address class="font-size-14">
63703 Greenfelder Center Suite<br>
767 South Jennings, QC Y4E-1K9<br>
United States
</address>
<button type="button" class="btn btn-xs u-btn-secondary--air">Delete</button>
<button type="button" class="btn btn-xs btn-primary">Edit</button>
</div>
</div>
<!-- End Card Details -->
</div>
</div>
</div>
<!-- End Card -->
</div>
Collapse #2
Can I cancel at anytime?
Yes, you can cancel anytime no questions are asked while you cancel but we would highly appreciate if you will give us some feedback.
My team has credits. How do we use them?
Once your team signs up for a subscription plan. enim eiusmod high life accusamus eoset dignissimos.
How does Front's pricing work?
Our subscriptions are tiered. based on the number of people enim eiusmod high life accusamus terry richardson ad squid.
How secure is Front?
Protecting the data you trust to Front is our first priority. at vero eoset dignissimos ducimus qui blanditiis.
What is your refund policy?
We do not offer refunds apart leggings occaecat craft beer farm-to-table. raw leggings occaecat craft.
<div id="FAQCollapse" class="accordion">
<!-- Card -->
<div class="card u-card-collapse">
<div class="card-header px-4" id="FAQHeadingOne">
<div class="collapsed" data-toggle="collapse" data-target="#FAQOne" aria-expanded="false" aria-controls="FAQOne" role="button">
<h3 class="h6 d-flex justify-content-between align-items-center font-weight-normal u-card-collapse__heading mb-0">
Can I cancel at anytime?
<span class="fa fa-angle-up u-card-collapse__heading-icon"></span>
</h3>
</div>
</div>
<div id="FAQOne" class="collapse" aria-labelledby="FAQHeadingOne" data-parent="#FAQCollapse">
<div class="card-body px-4">
Yes, you can cancel anytime no questions are asked while you cancel but we would highly appreciate if you will give us some feedback.
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card u-card-collapse">
<div class="card-header px-4" id="FAQHeadingTwo">
<div class="collapsed" data-toggle="collapse" data-target="#FAQTwo" aria-expanded="false" aria-controls="FAQTwo" role="button">
<h3 class="h6 d-flex justify-content-between align-items-center font-weight-normal u-card-collapse__heading mb-0">
My team has credits. How do we use them?
<span class="fa fa-angle-up u-card-collapse__heading-icon"></span>
</h3>
</div>
</div>
<div id="FAQTwo" class="collapse" aria-labelledby="FAQHeadingTwo" data-parent="#FAQCollapse">
<div class="card-body px-4">
Once your team signs up for a subscription plan. enim eiusmod high life accusamus eoset dignissimos.
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card u-card-collapse">
<div class="card-header px-4" id="FAQHeadingThree">
<div class="collapsed" data-toggle="collapse" data-target="#FAQThree" aria-expanded="false" aria-controls="FAQThree" role="button">
<h3 class="h6 d-flex justify-content-between align-items-center font-weight-normal u-card-collapse__heading mb-0">
How does Front's pricing work?
<span class="fa fa-angle-up u-card-collapse__heading-icon"></span>
</h3>
</div>
</div>
<div id="FAQThree" class="collapse" aria-labelledby="FAQHeadingThree" data-parent="#FAQCollapse">
<div class="card-body px-4">
Our subscriptions are tiered. based on the number of people enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card u-card-collapse">
<div class="card-header px-4" id="FAQHeadingFour">
<div class="collapsed" data-toggle="collapse" data-target="#FAQFour" aria-expanded="false" aria-controls="FAQFour" role="button">
<h3 class="h6 d-flex justify-content-between align-items-center font-weight-normal u-card-collapse__heading mb-0">
How secure is Front?
<span class="fa fa-angle-up u-card-collapse__heading-icon"></span>
</h3>
</div>
</div>
<div id="FAQFour" class="collapse" aria-labelledby="FAQHeadingFour" data-parent="#FAQCollapse">
<div class="card-body px-4">
Protecting the data you trust to Front is our first priority. at vero eoset dignissimos ducimus qui blanditiis.
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card u-card-collapse">
<div class="card-header px-4" id="FAQHeadingFive">
<div class="collapsed" data-toggle="collapse" data-target="#FAQFive" aria-expanded="false" aria-controls="FAQFive" role="button">
<h3 class="h6 d-flex justify-content-between align-items-center font-weight-normal u-card-collapse__heading mb-0">
What is your refund policy?
<span class="fa fa-angle-up u-card-collapse__heading-icon"></span>
</h3>
</div>
</div>
<div id="FAQFive" class="collapse" aria-labelledby="FAQHeadingFive" data-parent="#FAQCollapse">
<div class="card-body px-4">
We do not offer refunds apart leggings occaecat craft beer farm-to-table. raw leggings occaecat craft.
</div>
</div>
</div>
<!-- End Card -->
</div>