<div class="ms-collapse" id="accordion" role="tablist" aria-multiselectable="true">
<div class="mb-0 card card-default">
<div class="card-header" role="tab" id="headingOne">
<h4 class="card-title ms-rotate-icon">
<a class="collapsed" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<i class="zmdi zmdi-attachment-alt"></i> Collapsible Group Item
</a>
</h4>
</div>
<div id="collapseOne" class="card-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body">
...
</div>
</div>
</div>
<div class="mb-0 card card-default">
<div class="card-header" role="tab" id="headingTwo">
<h4 class="card-title ms-rotate-icon">
<a class="collapsed" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="zmdi zmdi-attachment-alt"></i> Collapsible Group Item
</a>
</h4>
</div>
<div id="collapseTwo" class="card-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-body">
...
</div>
</div>
</div>
<div class="mb-0 card card-default">
<div class="card-header" role="tab" id="headingThree">
<h4 class="card-title ms-rotate-icon">
<a class="collapsed" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="zmdi zmdi-attachment-alt"></i> Collapsible Group Item
</a>
</h4>
</div>
<div id="collapseThree" class="card-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-body">
...
</div>
</div>
</div>
</div>
<h3>Primary Color</h3>
<div class="ms-collapse" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="mb-0 card card-primary">
<div class="card-header" role="tab" id="headingOne2">
<h4 class="card-title">
<a class="collapsed withripple" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion2" href="#collapseOne2" aria-expanded="false" aria-controls="collapseOne2">
<i class="zmdi zmdi-pin"></i> Collapsible Group Item
</a>
</h4>
</div>
<div id="collapseOne2" class="card-collapse collapse" role="tabpanel" aria-labelledby="headingOne2">
<div class="card-body">
...
</div>
</div>
</div>
<div class="mb-0 card card-primary">
<div class="card-header" role="tab" id="headingTwo2">
<h4 class="card-title">
<a class="collapsed withripple" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion2" href="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
<i class="zmdi zmdi-pin"></i> Collapsible Group Item
</a>
</h4>
</div>
<div id="collapseTwo2" class="card-collapse collapse" role="tabpanel" aria-labelledby="headingTwo2">
<div class="card-body">
...
</div>
</div>
</div>
<div class="mb-0 card card-primary">
<div class="card-header" role="tab" id="headingThree3">
<h4 class="card-title">
<a class="collapsed withripple" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion2" href="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2">
<i class="zmdi zmdi-pin"></i> Collapsible Group Item
</a>
</h4>
</div>
<div id="collapseThree2" class="card-collapse collapse" role="tabpanel" aria-labelledby="headingThree2">
<div class="card-body">
...
</div>
</div>
</div>
</div>
<h3>More Colors</h3>
<div class="ms-collapse" id="accordion5" role="tablist" aria-multiselectable="true">
<div class="mb-0 card card-warning">
<div class="card-header" role="tab" id="headingOne5">
<h4 class="card-title">
<a class="collapsed withripple" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion5" href="#collapseOne5" aria-expanded="false" aria-controls="collapseOne5">
<i class="zmdi zmdi-pin"></i> Collapsible Group Item
</a>
</h4>
</div>
<div id="collapseOne5" class="card-collapse collapse" role="tabpanel" aria-labelledby="headingOne5">
<div class="card-body">
...
</div>
</div>
</div>
<div class="mb-0 card card-warning">
<div class="card-header" role="tab" id="headingTwo5">
<h4 class="card-title">
<a class="collapsed withripple" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion5" href="#collapseTwo5" aria-expanded="false" aria-controls="collapseTwo5">
<i class="zmdi zmdi-pin"></i> Collapsible Group Item
</a>
</h4>
</div>
<div id="collapseTwo5" class="card-collapse collapse" role="tabpanel" aria-labelledby="headingTwo5">
<div class="card-body">
...
</div>
</div>
</div>
<div class="mb-0 card card-warning">
<div class="card-header" role="tab" id="headingThree3">
<h4 class="card-title">
<a class="collapsed withripple" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion5" href="#collapseThree5" aria-expanded="false" aria-controls="collapseThree5">
<i class="zmdi zmdi-pin"></i> Collapsible Group Item
</a>
</h4>
</div>
<div id="collapseThree5" class="card-collapse collapse" role="tabpanel" aria-labelledby="headingThree5">
<div class="card-body">
...
</div>
</div>
</div>
</div>
<h3>Without Margin</h3>
<div class="ms-collapse no-margin" id="accordion11" role="tablist" aria-multiselectable="true">
<div class="mb-0 card card-default">
<div class="card-header" role="tab" id="headingOne11">
<h4 class="card-title">
<a class="collapsed withripple" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion11" href="#collapseOne11" aria-expanded="false" aria-controls="collapseOne11">
<i class="zmdi zmdi-pin"></i> Collapsible Group Item
</a>
</h4>
</div>
<div id="collapseOne11" class="card-collapse collapse" role="tabpanel" aria-labelledby="headingOne11">
<div class="card-body">
...
</div>
</div>
</div>
<div class="mb-0 card card-default">
<div class="card-header" role="tab" id="headingTwo11">
<h4 class="card-title">
<a class="collapsed withripple" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion11" href="#collapseTwo11" aria-expanded="false" aria-controls="collapseTwo11">
<i class="zmdi zmdi-pin"></i> Collapsible Group Item
</a>
</h4>
</div>
<div id="collapseTwo11" class="card-collapse collapse" role="tabpanel" aria-labelledby="headingTwo11">
<div class="card-body">
...
</div>
</div>
</div>
<div class="mb-0 card card-default">
<div class="card-header" role="tab" id="headingThree3">
<h4 class="card-title">
<a class="collapsed withripple" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion11" href="#collapseThree11" aria-expanded="false" aria-controls="collapseThree11">
<i class="zmdi zmdi-pin"></i> Collapsible Group Item
</a>
</h4>
</div>
<div id="collapseThree11" class="card-collapse collapse" role="tabpanel" aria-labelledby="headingThree11">
<div class="card-body">
...
</div>
</div>
</div>
</div>