Skip to main content

Accordions

Accordions are achieved by adding a modifier to a card element.

This is the body
This is the second body
<div class="c-card c-card--accordion">
  <button role="heading" aria-expanded="true" class="c-card__control">
    Heading one
  </button>
  <section class="c-card__item c-card__item--pane">
    This is the body
  </section>
  <button role="heading" aria-expanded="false" class="c-card__control">
    Heading two
  </button>
  <section class="c-card__item c-card__item--pane">
    This is the second body
  </section>
</div>