<div id="accordion2" role="tablist" aria-multiselectable="true">
	  <div class="card collapse-card">
	    <div class="card-header" role="tab" id="heading1">
	      <h5 class="mb-0">
	        <a data-toggle="collapse" data-parent="#accordion2" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
	          How can I manage Instant Book settings?
	        </a>
	      </h5>
	    </div>

	    <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1">
	      <div class="card-block">
	        Lorem ipsum dolor sit amet....
	      </div>
	    </div>
	  </div>
	  <div class="card">
	    <div class="card-header" role="tab" id="heading2">
	      <h5 class="mb-0">
	        <a class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
	          How do I use my calendar?
	        </a>
	      </h5>
	    </div>
	    <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="heading2">
	      <div class="card-block">
	        Lorem ipsum dolor sit amet....
	      </div>
	    </div>
	  </div>
	</div>

	<!-- inverse card header style -->
	<div class="card-header header-inverse" role="tab" id="heading8">
		...
	</div>

				       	

How to use

• Just copy the code example and you will get almost same style
• Icon is styled on data-toggle="collapse" attribute. So you dont have to use another classes.
• If you want to set icon on left side just add a class .icon-left with #accordion
• .header-inverse is used with .card-header for styling header background to white