Accordion +> Card as Accordion Item.
UsageNg Accordion
Add optional header and footer sections to the Card.
With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhere <div class="Accordion">
<div class="Card">
<div class="Card-header">
<span>Super simple Accordion</span>
<button class="Accordion-toggle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/>
</svg>
</button>
</div>
<div class="Card-body D-none">
<h5 class="Card-title">Special title treatment</h5>
<p class="Card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="Btn Btn-primary">Go somewhere</a>
</div>
</div>
<div class="Card Disabled">
<div class="Card-header">
<span>Super simple Accordion</span>
<button class="Accordion-toggle" disabled>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/>
</svg>
</button>
</div>
<div class="Card-body D-none">
<h5 class="Card-title">Special title treatment</h5>
<p class="Card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="Btn Btn-primary">Go somewhere</a>
</div>
</div>
<div class="Card Active">
<div class="Card-header">
<span>Super simple Accordion</span>
<button class="Accordion-toggle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/>
</svg>
</button>
</div>
<div class="Card-body">
<h5 class="Card-title">Special title treatment</h5>
<p class="Card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="Btn Btn-primary">Go somewhere</a>
</div>
</div>
</div>
$Accordion-border-base : $Card-border-base;
$Accordion-border-width : $Card-border-width;
$Accordion-border-color : $Card-border-color;
$Accordion-border-radius : $Card-border-radius;
$Accordion-border-color-focus : $Adaptive-bg-accent;
$Accordion-disabled-color : $Muted;
$Accordion-margin-bottom : $Card-margin-bottom;
$Accordion-header-height : 50px;