Accordion

Design System Navigation

Accordion Complete

  • 
    
      <div class="c-accordion u-position--relative u-spacing ">
              <div class="c-accordion__item u-spacing--half u-border--left u-padding--half--left">
            <div class="c-accordion__heading js-toggle-parent u-font--primary--m u-theme--color--darker">
              <span class="u-icon u-icon--m c-accordion__arrow u-space--half--right u-theme--path-fill--darker"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>Artboard 1</title><path d="M6.75,3.59,3.25.09,1.84,1.5,5.34,5,1.84,8.5,3.25,9.91l3.5-3.5L8.16,5Z" fill="#9b9b9b"/></svg>
    </span>
              <strong>Episode 1: This is the Accordion</strong>
            </div>
            <div class="c-accordion__content u-padding--half--left">
              Fusce interdum purus est, vel semper ex tristique ut. Proin dapibus luctus pellentesque. Duis et sapien sit amet enim porttitor gravida at non orci. Proin dictum lobortis luctus. Sed sagittis massa id blandit aliquet. Pellentesque semper tincidunt ex sit amet tincidunt. Cras at sem at felis rhoncus varius eget vel ipsum.
            </div>
          </div>
              <div class="c-accordion__item u-spacing--half u-border--left u-padding--half--left">
            <div class="c-accordion__heading js-toggle-parent u-font--primary--m u-theme--color--darker">
              <span class="u-icon u-icon--m c-accordion__arrow u-space--half--right u-theme--path-fill--darker"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>Artboard 1</title><path d="M6.75,3.59,3.25.09,1.84,1.5,5.34,5,1.84,8.5,3.25,9.91l3.5-3.5L8.16,5Z" fill="#9b9b9b"/></svg>
    </span>
              <strong>Episode 2: Accordion Strikes Back</strong>
            </div>
            <div class="c-accordion__content u-padding--half--left">
              Fusce interdum purus est, vel semper ex tristique ut. Proin dapibus luctus pellentesque. Duis et sapien sit amet enim porttitor gravida at non orci. Proin dictum lobortis luctus. Sed sagittis massa id blandit aliquet. Pellentesque semper tincidunt ex sit amet tincidunt. Cras at sem at felis rhoncus varius eget vel ipsum.
            </div>
          </div>
              <div class="c-accordion__item u-spacing--half u-border--left u-padding--half--left">
            <div class="c-accordion__heading js-toggle-parent u-font--primary--m u-theme--color--darker">
              <span class="u-icon u-icon--m c-accordion__arrow u-space--half--right u-theme--path-fill--darker"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>Artboard 1</title><path d="M6.75,3.59,3.25.09,1.84,1.5,5.34,5,1.84,8.5,3.25,9.91l3.5-3.5L8.16,5Z" fill="#9b9b9b"/></svg>
    </span>
              <strong>Episode 3: Return of the Accordion</strong>
            </div>
            <div class="c-accordion__content u-padding--half--left">
              Fusce interdum purus est, vel semper ex tristique ut. Proin dapibus luctus pellentesque. Duis et sapien sit amet enim porttitor gravida at non orci. Proin dictum lobortis luctus. Sed sagittis massa id blandit aliquet. Pellentesque semper tincidunt ex sit amet tincidunt. Cras at sem at felis rhoncus varius eget vel ipsum.
            </div>
          </div>
              <div class="c-accordion__item u-spacing--half u-border--left u-padding--half--left">
            <div class="c-accordion__heading js-toggle-parent u-font--primary--m u-theme--color--darker">
              <span class="u-icon u-icon--m c-accordion__arrow u-space--half--right u-theme--path-fill--darker"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>Artboard 1</title><path d="M6.75,3.59,3.25.09,1.84,1.5,5.34,5,1.84,8.5,3.25,9.91l3.5-3.5L8.16,5Z" fill="#9b9b9b"/></svg>
    </span>
              <strong>Episode 4: Revenge of the Accordion</strong>
            </div>
            <div class="c-accordion__content u-padding--half--left">
              Fusce interdum purus est, vel semper ex tristique ut. Proin dapibus luctus pellentesque. Duis et sapien sit amet enim porttitor gravida at non orci. Proin dictum lobortis luctus. Sed sagittis massa id blandit aliquet. Pellentesque semper tincidunt ex sit amet tincidunt. Cras at sem at felis rhoncus varius eget vel ipsum.
            </div>
          </div>
              <div class="c-accordion__item u-spacing--half u-border--left u-padding--half--left">
            <div class="c-accordion__heading js-toggle-parent u-font--primary--m u-theme--color--darker">
              <span class="u-icon u-icon--m c-accordion__arrow u-space--half--right u-theme--path-fill--darker"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>Artboard 1</title><path d="M6.75,3.59,3.25.09,1.84,1.5,5.34,5,1.84,8.5,3.25,9.91l3.5-3.5L8.16,5Z" fill="#9b9b9b"/></svg>
    </span>
              <strong>Episode 5: The Accordion Awakens</strong>
            </div>
            <div class="c-accordion__content u-padding--half--left">
              Fusce interdum purus est, vel semper ex tristique ut. Proin dapibus luctus pellentesque. Duis et sapien sit amet enim porttitor gravida at non orci. Proin dictum lobortis luctus. Sed sagittis massa id blandit aliquet. Pellentesque semper tincidunt ex sit amet tincidunt. Cras at sem at felis rhoncus varius eget vel ipsum.
            </div>
          </div>
          </div>
      <!-- /.c-accordion -->
    
    
    {% if accordion %}
      <div class="c-accordion u-position--relative u-spacing {{ accordion_class }}">
        {% for item in accordion_list %}
          <div class="c-accordion__item u-spacing--half u-border--left u-padding--half--left">
            <div class="c-accordion__heading js-toggle-parent u-font--primary--m u-theme--color--darker">
              <span class="u-icon u-icon--m c-accordion__arrow u-space--half--right u-theme--path-fill--darker">{% include '@atoms/icons/icon-arrow-bracket-right.twig' %}</span>
              <strong>{{ item.accordion_heading }}</strong>
            </div>
            <div class="c-accordion__content u-padding--half--left">
              Fusce interdum purus est, vel semper ex tristique ut. Proin dapibus luctus pellentesque. Duis et sapien sit amet enim porttitor gravida at non orci. Proin dictum lobortis luctus. Sed sagittis massa id blandit aliquet. Pellentesque semper tincidunt ex sit amet tincidunt. Cras at sem at felis rhoncus varius eget vel ipsum.
            </div>
          </div>
        {% endfor %}
      </div>
      <!-- /.c-accordion -->
    {% endif %}