Close menu

Pattern Library

<div class="accordion" data-accordion>
    {% for accordion in accordions %}
        <div class="accordion__panel" data-accordion-panel>
            <h3 class="accordion__title heading heading--4">
                <button class="accordion__toggle" type="button" data-accordion-toggle aria-pressed="true" aria-expanded="true" aria-controls="{{ id_prefix }}-content-{{ forloop.counter }}">
                    <span class="accordion__title-inner">{{ accordion.title }}</span>
                    {% include "patterns/atoms/icons/icon.html" with name="chevron-down" classname="accordion__icon" %}
            <div id="{{ id_prefix }}-content-{{ forloop.counter }}" class="accordion__content" data-accordion-content>
                <p>{{ accordion.description }}</p>
    {% endfor %}
  id_prefix: test
    - title: Title A
      description: Description A. Ask for help.
    - title: Title B
      description: Description B. Ask for help.
    - title: Title C
      description: Description C. Ask for help.
    - title: Title D
      description: Description D. Ask for help.


The accordion is a good example of a pattern library component.