Redbooth

AccordionAccordions - Basic

This element is used for accordion-like list of item cards

.accordion--compact - No space between accordion cards and line visual separation

Item 1

Item 2

Item 3

.accordion--compact

Item 1

Item 2

Item 3

<div style="background: #eee;padding: 20px;">
  <div class="accordion [modifier class]">
    <div class="accordion__header">
      <div class="accordion__header__title">Accordion title</div>
      <div class="accordion__header__subtitle">Accordion subtitle</div>
    </div>
    <div class="accordion__card">
      <div class="accordion__card__header">
        <div class="accordion__card__header__title">
          <div class="accordion__card__header__title__arrow"></div>Accordion card title
          <div class="accordion__card__header__title__subtitle">Accordion card subtitle</div>
        </div>
      </div>
      <div class="accordion__card__list">
        <div class="accordion__card__list__item">
          <i class="icon-wrench"></i>Item 1</div>
        <div class="accordion__card__list__item">
          <i class="icon-list-alt"></i>Item 2</div>
        <div class="accordion__card__list__item">
          <i class="icon-exchange"></i>Item 3</div>
      </div>
    </div>
    <div class="accordion__card">
      <div class="accordion__card__header">
        <div class="accordion__card__header__title">
          <div class="accordion__card__header__title__arrow"></div>Accordion card title</div>
      </div>
    </div>
  </div>
</div>

CardAccordions - Card

An accordion can contain multiple cards

.is-expanded - If you want the accordion to be open

Item 1

Item 2

Item 3

.is-expanded

Item 1

Item 2

Item 3

<div style="background: #eee;padding: 20px;">
  <div class="accordion__card [modifier class]">
    <div class="accordion__card__header">
      <div class="accordion__card__header__title">
        <div class="accordion__card__header__title__arrow"></div>Accordion card title
        <div class="accordion__card__header__title__subtitle">Accordion card subtitle</div>
      </div>
      <div class="accordion__card__header__meta">
        <button class="button button--primary">Upgrade</button>
      </div>
    </div>
    <div class="accordion__card__list">
      <div class="accordion__card__list__item">
        <i class="icon-wrench"></i>Item 1</div>
      <div class="accordion__card__list__item">
        <i class="icon-list-alt"></i>Item 2</div>
      <div class="accordion__card__list__item">
        <i class="icon-exchange"></i>Item 3</div>
    </div>
  </div>
</div>

ContentAccordions - Content

Free content in an accordion. When accordion list do not fit your design needs

.is-expanded - If you want the accordion to be open

your content

.is-expanded

your content

<div style="background: #eee;padding: 20px;">
  <div class="accordion__card [modifier class]">
    <div class="accordion__card__header">
      <div class="accordion__card__header__title">
        <div class="accordion__card__header__title__arrow"></div>Accordion card title</div>
    </div>
    <div class="accordion__card__content">
      <Here>your content</Here>
    </div>
  </div>
</div>

ItemAccordions - Item

The element of an accordion list

.is-selected - If you want the accordion to be open

Item 1

.is-selected

Item 1

<div style="background: #eee;padding: 20px;">
  <div class="accordion__card__list__item [modifier class]">
    <i class="icon-wrench"></i>Item 1</div>
</div>