Collapsible Cards
UI container that controls the background color, border raduis and box shadow. This version has a collapsible content area.
Collapsible Card
<div class="lmp-card-collapse">
<h3 id="collapseExample1CardHeading" class="mb-0">
<button class="card-trigger" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="true" aria-controls="collapseExample1">
<span class="card-label">Collapsible Card Title</span>
</button>
</h3>
<div id="collapseExample1" class="card-collapse collapse show" aria-labelledby="collapseExample1CardHeading">
<div class="lmp-card-content p-3">
Card Content
</div>
</div>
</div>
Collapsible Card with Progress Label
<div class="lmp-card-collapse">
<h3 id="collapseExample1CardHeading" class="mb-0">
<button class="card-trigger" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="true" aria-controls="collapseExample1">
<span class="card-label">Collapsible Card Title</span>
<span class="card-progress-val">2 of 3</span>
</button>
</h3>
<div id="collapseExample1" class="card-collapse collapse show" aria-labelledby="collapseExample1CardHeading">
<div class="lmp-card-content p-3">
Card Content
</div>
</div>
</div>
Collapsible Card with Progress Bar and Label
<div class="lmp-card-collapse">
<h3 id="collapseExample1CardHeading" class="mb-0">
<button class="card-trigger" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="true" aria-controls="collapseExample1">
<span class="card-label">Quibusdam sequi vel, excepturi saepe odit dolorum.</span>
<span class="card-progress-val">45%</span>
<span class="progress lmp-progress"><span class="progress-bar" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="Course progress"></span></span>
</button>
</h3>
<div id="collapseExample1" class="card-collapse collapse show" aria-labelledby="collapseExample1CardHeading">
<div class="lmp-card-content p-3">
Card Content
</div>
</div>
</div>