Accordion

Vertically stacked content containers

Accordions are a great way of organizing lots of content within a single page by separating the content into collapsable containers. Accordions are made up of a accordion block and the following elements:

  • accordion__list must be a ul tag
  • accordion__item must be a li tag
  • accordion__title a label for each content container
  • accordion__content contains the content that will be expandable and collapsible


  • Accordion item 1
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Accordion item 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Accordion item 3
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<div class="accordion">
  <ul class="accordion__list">
    <li class="accordion__item">
      <a href="#" class="accordion__title">Accordion item 1</a>
      <div class="accordion__content">
        ...
      </div>
    </li>
    <li class="accordion__item">
      <a href="#" class="accordion__title">Accordion item 2</a>
      <div class="accordion__content">
        ...
      </div>
    </li>
    <li class="accordion__item">
      <a href="#" class="accordion__title">Accordion item 3</a>
      <div class="accordion__content">
        ...
      </div>
    </li>
  </ul>
</div>
Copy

Apply the is-active modifier to the accordion__item element to toggle the open state for that items content. Combine this with JavaScript to give the accordion controls.


  • Accordion item 1
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Accordion item 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Accordion item 3
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CSS variables

You can customize the accordion elements with the following CSS variables.

.accordion {
  --border-color: hsl(0deg, 0%, 90%, 1);
  --border-width: 1px;
}

/* Accordion item */
.accordion__item {
  --background-color: var(--color-white);
}

/* Accordion title */
.accordion__title {
  --background-color: transparent;
  --font-color: var(--color-black);
  --padding: 0.75rem 1rem;

  --active-background-color: var(--color-primary);
  --active-font-color: var(--color-primary-text);
  --hover-background-color: var(--color-light);
  --hover-font-color: var(--color-light-text);
}

/* Accordion content */
.accordion__content {
  --background-color: var(--color-white);
  --font-color: var(--color-black);
  --padding: 1rem;
}
Copy

Sass variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.


VariableTypeDefault value
$accordion-backgroundcolorhsl(0deg, 0%, 100%, 1)
$accordion-border-widthunits1px
$accordion-border-colorcolorhsl(0deg, 0%, 90%, 1)
$accordion-hover-backgroundcolorhsl(0deg, 0%, 96%, 1)
$accordion-hover-colorcolorhsl(0deg, 0%, 22%, 1)
$accordion-active-backgroundcolorhsl(255, 73%, 58%, 1)
$accordion-active-colorcolorhsl(0deg, 0%, 100%, 1)
$accordion-title-colorcolorhsl(0deg, 0%, 22%, 1)
$accordion-title-background-colorcolortransparent
$accordion-title-paddingpadding0.75rem 1rem
$accordion-content-paddingunits1rem
$accordion-content-colorcolorhsl(0deg, 0%, 22%, 1)
$accordion-content-backgroundcolorhsl(0deg, 0%, 100%, 1)