Accordions

Accordions are achieved by adding a modifier to a card element and utilising a hidden checkbox to achieve the interaction.

Pane 1
Pane 2
<div class="c-card c-card--accordion u-high">

  <input type="checkbox" id="accordion-1">
  <label class="c-card__item" for="accordion-1">Item 1</label>
  <div class="c-card__item">Pane 1</div>

  <input type="checkbox" id="accordion-2">
  <label class="c-card__item" for="accordion-2">Item 2</label>
  <div class="c-card__item">Pane 2</div>

</div>