Pinecone

Accordion: Default 

<div class="spacer"></div>
<div class="accordion">
    <div class="accordion__pane">
        <p class="accordion__heading">Ut Nisi Aut</p>
        <div class="accordion__content">
            <p>Eligendi doloribus consequatur nihil et aut. Odit cupiditate commodi. Voluptatum quam saepe adipisci consectetur.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Odit Provident Omnis</p>
        <div class="accordion__content">
            <p>Voluptas non enim asperiores quod placeat maiores tempora quas ut. Et et repudiandae qui ratione praesentium soluta. Vitae deleniti enim rerum soluta quis ut.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Aspernatur Eos Aliquam</p>
        <div class="accordion__content">
            <p>Nobis dolores distinctio atque quae reprehenderit nemo occaecati est. Mollitia sed et. Quis alias dignissimos voluptatem nobis blanditiis reprehenderit aliquid. Quo ipsam voluptas quos eveniet rerum nisi est.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Quod Enim Et</p>
        <div class="accordion__content">
            <p>Voluptatem praesentium est nostrum aut rerum ab. Rerum tenetur adipisci optio at ut. Animi omnis tempora id qui soluta error aperiam.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Eius Quos Eaque</p>
        <div class="accordion__content">
            <p>Aut sed quo molestiae voluptas quisquam repellendus. Maiores fuga rerum. Unde dolor debitis numquam doloremque dolores. Vel amet doloremque possimus neque omnis quisquam non debitis.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Neque Ut Quasi</p>
        <div class="accordion__content">
            <p>Recusandae aut est dolores. Maxime eveniet vel quis distinctio voluptatem quia nisi quia. Minima dolore et. Autem reiciendis minima distinctio est perspiciatis eum dolores quia maiores.</p>
        </div>
    </div>
</div>
 
{% if not standAlone %}<div class="spacer"></div>{% endif %}
<div class="accordion{{ ' accordion--'+modifier if modifier }}">
	{% for pane in panes %}
	<div class="accordion__pane">
		<p class="accordion__heading">{{ pane.label }}</p>
		<div class="accordion__content">
			<p>{{ pane.content }}</p>
		</div>
	</div>
	{% endfor %}
</div>
 
{
  "panes": [
    {
      "label": "Ut Nisi Aut",
      "content": "Eligendi doloribus consequatur nihil et aut. Odit cupiditate commodi. Voluptatum quam saepe adipisci consectetur."
    },
    {
      "label": "Odit Provident Omnis",
      "content": "Voluptas non enim asperiores quod placeat maiores tempora quas ut. Et et repudiandae qui ratione praesentium soluta. Vitae deleniti enim rerum soluta quis ut."
    },
    {
      "label": "Aspernatur Eos Aliquam",
      "content": "Nobis dolores distinctio atque quae reprehenderit nemo occaecati est. Mollitia sed et. Quis alias dignissimos voluptatem nobis blanditiis reprehenderit aliquid. Quo ipsam voluptas quos eveniet rerum nisi est."
    },
    {
      "label": "Quod Enim Et",
      "content": "Voluptatem praesentium est nostrum aut rerum ab. Rerum tenetur adipisci optio at ut. Animi omnis tempora id qui soluta error aperiam."
    },
    {
      "label": "Eius Quos Eaque",
      "content": "Aut sed quo molestiae voluptas quisquam repellendus. Maiores fuga rerum. Unde dolor debitis numquam doloremque dolores. Vel amet doloremque possimus neque omnis quisquam non debitis."
    },
    {
      "label": "Neque Ut Quasi",
      "content": "Recusandae aut est dolores. Maxime eveniet vel quis distinctio voluptatem quia nisi quia. Minima dolore et. Autem reiciendis minima distinctio est perspiciatis eum dolores quia maiores."
    }
  ],
  "standAlone": false
}

There are no notes for this item.