Accordions

An Accordion is a simple way of showing, hiding and breaking down content. It should be used when a large group of related content needs to be separated into smaller, digestible chunks. An Accordion consists of a series of Toggle components.

Information

  • Content length inside the Accordion does not have a limit.
  • Title content of the Accordion can wrap, but it is recommended that it is short and to the point.
  • Accordions take up 100% width of their parent container until they hit their max width of 850px.

Primary Accordion

A Primary Accordion should be used when content needs to be broken down, but is still important enough to be of primary interest on the page. This Accordion's design is used to give it some visual weight within the design and make it apparent that the content is important.

  • This is an accordion heading

    This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.

  • This is an accordion heading

    This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.

  • This is an accordion heading

    This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.

<ul class="sprk-c-Accordion sprk-o-VerticalList">
  <li class="sprk-c-Accordion__item " data-sprk-toggle="container">
    <a aria-controls="details1" class="sprk-c-Accordion__summary " data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <h3 class="sprk-b-TypeBodyOne sprk-c-Accordion__heading ">
          This is an accordion heading
        </h3>

        <svg class="sprk-c-Icon sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
    </a>

    <p id="details1" class="sprk-c-Accordion__details  sprk-b-TypeBodyTwo sprk-u-HideWhenJs" data-sprk-toggle="content">
      This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.
    </p>
  </li>

  <li class="sprk-c-Accordion__item " data-sprk-toggle="container">
    <a aria-controls="details1" class="sprk-c-Accordion__summary " data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <h3 class="sprk-b-TypeBodyOne sprk-c-Accordion__heading ">
          This is an accordion heading
        </h3>

        <svg class="sprk-c-Icon sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
    </a>

    <p id="details1" class="sprk-c-Accordion__details  sprk-b-TypeBodyTwo sprk-u-HideWhenJs" data-sprk-toggle="content">
      This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.
    </p>
  </li>

  <li class="sprk-c-Accordion__item " data-sprk-toggle="container">
    <a aria-controls="details1" class="sprk-c-Accordion__summary " data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <h3 class="sprk-b-TypeBodyOne sprk-c-Accordion__heading ">
          This is an accordion heading
        </h3>

        <svg class="sprk-c-Icon sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
    </a>

    <p id="details1" class="sprk-c-Accordion__details  sprk-b-TypeBodyTwo sprk-u-HideWhenJs" data-sprk-toggle="content">
      This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.
    </p>
  </li>
</ul>

Secondary

The Secondary Accordion is used to break up content into more digestible chunks, but does not carry as much importance within the overall layout as the Primary Accordion.

  • This is an accordion heading

    This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.

  • This is an accordion heading

    This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.

  • This is an accordion heading

    This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.

<ul class="sprk-c-Accordion sprk-o-VerticalList">
  <li class="sprk-c-Accordion__item sprk-c-Accordion__item--secondary" data-sprk-toggle="container">
    <a aria-controls="details1" class="sprk-c-Accordion__summary sprk-c-Accordion__summary--secondary" data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <h3 class="sprk-b-TypeBodyOne sprk-c-Accordion__heading sprk-c-Accordion__heading--secondary">
          This is an accordion heading
        </h3>

        <svg class="sprk-c-Icon sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
    </a>

    <p id="details1" class="sprk-c-Accordion__details sprk-c-Accordion__details--secondary sprk-b-TypeBodyTwo sprk-u-HideWhenJs" data-sprk-toggle="content">
      This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.
    </p>
  </li>

  <li class="sprk-c-Accordion__item sprk-c-Accordion__item--secondary" data-sprk-toggle="container">
    <a aria-controls="details1" class="sprk-c-Accordion__summary sprk-c-Accordion__summary--secondary" data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <h3 class="sprk-b-TypeBodyOne sprk-c-Accordion__heading sprk-c-Accordion__heading--secondary">
          This is an accordion heading
        </h3>

        <svg class="sprk-c-Icon sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
    </a>

    <p id="details1" class="sprk-c-Accordion__details sprk-c-Accordion__details--secondary sprk-b-TypeBodyTwo sprk-u-HideWhenJs" data-sprk-toggle="content">
      This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.
    </p>
  </li>

  <li class="sprk-c-Accordion__item sprk-c-Accordion__item--secondary" data-sprk-toggle="container">
    <a aria-controls="details1" class="sprk-c-Accordion__summary sprk-c-Accordion__summary--secondary" data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <h3 class="sprk-b-TypeBodyOne sprk-c-Accordion__heading sprk-c-Accordion__heading--secondary">
          This is an accordion heading
        </h3>

        <svg class="sprk-c-Icon sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
    </a>

    <p id="details1" class="sprk-c-Accordion__details sprk-c-Accordion__details--secondary sprk-b-TypeBodyTwo sprk-u-HideWhenJs" data-sprk-toggle="content">
      This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.
    </p>
  </li>
</ul>