Pinecone

Accordion: Default 

<div class="spacer"></div>
<div class="accordion">
    <div class="accordion__pane">
        <p class="accordion__heading">Voluptatibus Quo Dolores</p>
        <div class="accordion__content">
            <p>Accusantium aut eum illum illo consequatur. Quo voluptas aut quod dolor commodi doloribus quidem unde. Expedita labore nesciunt soluta. Quis voluptatem consequuntur. Sapiente velit sequi et quis deleniti eius quia mollitia.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Assumenda Mollitia Similique</p>
        <div class="accordion__content">
            <p>Culpa sed consequuntur laborum sed voluptas saepe molestiae. A dicta aut perferendis autem aut neque voluptas. Eligendi illo neque veniam quae. Eligendi autem ea eos provident ducimus non libero. Quasi ab voluptatum eaque voluptatem voluptas enim labore quae vero.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Nulla Doloribus Minima</p>
        <div class="accordion__content">
            <p>Et unde tenetur architecto voluptatibus reiciendis nemo vitae ullam molestiae. Magni iure alias atque aspernatur. Excepturi modi eaque ut. Ipsum sed dignissimos adipisci ratione nobis consequatur dolorem consequatur. Nobis aspernatur vel minus dolore laboriosam voluptas officia nemo. Autem odit soluta.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Debitis Et Quaerat</p>
        <div class="accordion__content">
            <p>Deleniti quae corrupti quasi harum est totam inventore hic placeat. Est laborum in illo assumenda et. Alias fugit nostrum reiciendis velit blanditiis possimus. Enim quia incidunt velit. Consequatur sit voluptatem. Reiciendis doloribus inventore aliquid aut incidunt voluptate rerum rem consequatur.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Libero Accusantium Voluptatem</p>
        <div class="accordion__content">
            <p>Veritatis ipsum aperiam rem doloremque et dolores sapiente numquam. Dolorem et pariatur ad quis veniam voluptatem nostrum eius. Nam molestias repellendus id reiciendis. Et vel et distinctio. Inventore id minus rerum.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Repudiandae Aliquam Ipsam</p>
        <div class="accordion__content">
            <p>Quaerat qui et saepe. Laboriosam ea distinctio quaerat ratione est sit quae. Dolores totam nam. Et officia magni eaque odio cum. Perspiciatis possimus sed sapiente ab.</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": "Voluptatibus Quo Dolores",
      "content": "Accusantium aut eum illum illo consequatur. Quo voluptas aut quod dolor commodi doloribus quidem unde. Expedita labore nesciunt soluta. Quis voluptatem consequuntur. Sapiente velit sequi et quis deleniti eius quia mollitia."
    },
    {
      "label": "Assumenda Mollitia Similique",
      "content": "Culpa sed consequuntur laborum sed voluptas saepe molestiae. A dicta aut perferendis autem aut neque voluptas. Eligendi illo neque veniam quae. Eligendi autem ea eos provident ducimus non libero. Quasi ab voluptatum eaque voluptatem voluptas enim labore quae vero."
    },
    {
      "label": "Nulla Doloribus Minima",
      "content": "Et unde tenetur architecto voluptatibus reiciendis nemo vitae ullam molestiae. Magni iure alias atque aspernatur. Excepturi modi eaque ut. Ipsum sed dignissimos adipisci ratione nobis consequatur dolorem consequatur. Nobis aspernatur vel minus dolore laboriosam voluptas officia nemo. Autem odit soluta."
    },
    {
      "label": "Debitis Et Quaerat",
      "content": "Deleniti quae corrupti quasi harum est totam inventore hic placeat. Est laborum in illo assumenda et. Alias fugit nostrum reiciendis velit blanditiis possimus. Enim quia incidunt velit. Consequatur sit voluptatem. Reiciendis doloribus inventore aliquid aut incidunt voluptate rerum rem consequatur."
    },
    {
      "label": "Libero Accusantium Voluptatem",
      "content": "Veritatis ipsum aperiam rem doloremque et dolores sapiente numquam. Dolorem et pariatur ad quis veniam voluptatem nostrum eius. Nam molestias repellendus id reiciendis. Et vel et distinctio. Inventore id minus rerum."
    },
    {
      "label": "Repudiandae Aliquam Ipsam",
      "content": "Quaerat qui et saepe. Laboriosam ea distinctio quaerat ratione est sit quae. Dolores totam nam. Et officia magni eaque odio cum. Perspiciatis possimus sed sapiente ab."
    }
  ],
  "standAlone": false
}

There are no notes for this item.