<div id="accordion" role="tablist" aria-multiselectable="true">
		<div class="card card-accordion">
			<div class="card-header" role="tab" id="heading1">
				<h6 class="mb-0">
					<a data-bs-toggle="collapse" data-bs-target="#collapse1" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
						How can I manage Instant Book settings?
					</a>
				</h6>
			</div>
			<div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1" data-bs-parent="#accordion">
				<div class="card-block">
					Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
				</div>
			</div>
		</div>
	</div>

	<!-- Icon Left Side -->
	<div id="accordion" role="tablist" aria-multiselectable="true">
		<div class="card card-accordion icon-left">
			...
		</div>
	</div>

				       	

How to use

• .card-accordion used with .card for some extra styling. If you want to use default style, just remove it.
• Icon is styled on data-bs-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 .card-accordion
• .header-inverse is used with .card-header for styling header background to white