Accordion component

We are using the foundation implementation for accordions

Additionaly we added the class .unboxed with a little lighter / less beefy design

Example

html

<ul class="accordion unboxed" data-accordion>
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 1</a>
    <div class="accordion-content" data-tab-content>
      <p>Panel 1. Lorem ipsum dolor</p>
      <a href="#">Nowhere to Go</a>
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 2</a>
    <div class="accordion-content" data-tab-content>
      <p>Panel 2. Lorem ipsum dolor</p>
      <a href="#">Nowhere to Go</a>
    </div>
  </li>
</ul>

$accordion-background-color (Color)

scss

$accordion-background-color: color(lightest-gray) !default;

Background color for accordion

$accordion-border-color (Color)

scss

$accordion-border-color: color(lighter-gray) !default;

Border color of accordion

$accordion-font-size (Number)

scss

$accordion-font-size: 1rem !default;

Font size of accordion

$accordion-font-size-big (Number)

scss

$accordion-font-size-big: 24px !default;

Font size of accordion big

$accordion-font-color (Color)

scss

$accordion-font-color: color(black) !default;

Font color of accordion.

$accordion-title-width (Number)

scss

$accordion-title-width: 25% !default;

Title width of accordion

$accordion-content-width (Number)

scss

$accordion-content-width: 85% !default;

Content width of accordion