Accordions

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

Header
This is the body
Header
This is the body
<div class="c-text c-card c-card--accordion">
  <div class="c-card__item c-card__item--title c-card__item--active">
    Header
  </div>
  <div class="c-card__item c-card__item--pane">
    This is the body
  </div>
  <div class="c-card__item c-card__item--title">
    Header
  </div>
  <div class="c-card__item c-card__item--pane">
    This is the body
  </div>
</div> 
This is an expanded accordion To toggle other panes
<blaze-accordion>
  <blaze-accordion-pane open header="Click me">
    This is an expanded accordion
  </blaze-accordion-pane>
  <blaze-accordion-pane header="Click me also">
    To toggle other panes
  </blaze-accordion-pane>
</blaze-accordion>