Pinecone

Accordion: Default 

<div class="spacer"></div>
<div class="accordion">
    <div class="accordion__pane">
        <p class="accordion__heading">Vel Eligendi Officia</p>
        <div class="accordion__content">
            <p>Minus saepe sit illo repudiandae aut inventore. Aut ratione error vel optio voluptatum. Sapiente tenetur non atque et ad esse enim commodi.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Qui Earum Perspiciatis</p>
        <div class="accordion__content">
            <p>Voluptatem velit natus. Est labore eius eum voluptatum molestias. Deserunt non quas eos et. Itaque voluptatem totam eum exercitationem. Vel magnam ut deleniti exercitationem esse quas dolorem. Maxime consequatur iste dolor ratione ex nihil et soluta facilis.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Est Autem Libero</p>
        <div class="accordion__content">
            <p>Dignissimos a quam eaque ut at eum eveniet. Eligendi ratione aut aliquid voluptatem enim soluta pariatur quibusdam. Consequatur dolores sit nemo qui totam amet. Quo ducimus nihil cupiditate aliquid quibusdam voluptates aliquid. Ea voluptate placeat. Aspernatur similique rem nemo.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Aut Ipsa Numquam</p>
        <div class="accordion__content">
            <p>Eveniet aperiam ea repellendus ipsa. Sapiente eveniet aut temporibus non eius fugiat sit quia illo. Minus velit unde occaecati sunt eum fugit. Veritatis officia aperiam quisquam aliquid incidunt et.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Corporis Fuga Nemo</p>
        <div class="accordion__content">
            <p>Qui est esse nulla sit debitis error ut saepe. Quo incidunt et eum dolorem in fugiat eius. Hic aut amet quia natus illum soluta illo. Ex consequatur quia quis rerum minima reiciendis commodi aut rem. Id eos illo magni iste id non aliquam assumenda. Voluptate dolorum quasi.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Et Rerum Recusandae</p>
        <div class="accordion__content">
            <p>Aut voluptas ratione ea aliquam quis. Autem est quod ut suscipit voluptatibus. Reiciendis numquam est quidem ut fugiat omnis est quis. Voluptas quod non sit amet unde in molestiae. Id quo perspiciatis autem. Unde esse laboriosam maxime dolorem ratione nihil labore.</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": "Vel Eligendi Officia",
      "content": "Minus saepe sit illo repudiandae aut inventore. Aut ratione error vel optio voluptatum. Sapiente tenetur non atque et ad esse enim commodi."
    },
    {
      "label": "Qui Earum Perspiciatis",
      "content": "Voluptatem velit natus. Est labore eius eum voluptatum molestias. Deserunt non quas eos et. Itaque voluptatem totam eum exercitationem. Vel magnam ut deleniti exercitationem esse quas dolorem. Maxime consequatur iste dolor ratione ex nihil et soluta facilis."
    },
    {
      "label": "Est Autem Libero",
      "content": "Dignissimos a quam eaque ut at eum eveniet. Eligendi ratione aut aliquid voluptatem enim soluta pariatur quibusdam. Consequatur dolores sit nemo qui totam amet. Quo ducimus nihil cupiditate aliquid quibusdam voluptates aliquid. Ea voluptate placeat. Aspernatur similique rem nemo."
    },
    {
      "label": "Aut Ipsa Numquam",
      "content": "Eveniet aperiam ea repellendus ipsa. Sapiente eveniet aut temporibus non eius fugiat sit quia illo. Minus velit unde occaecati sunt eum fugit. Veritatis officia aperiam quisquam aliquid incidunt et."
    },
    {
      "label": "Corporis Fuga Nemo",
      "content": "Qui est esse nulla sit debitis error ut saepe. Quo incidunt et eum dolorem in fugiat eius. Hic aut amet quia natus illum soluta illo. Ex consequatur quia quis rerum minima reiciendis commodi aut rem. Id eos illo magni iste id non aliquam assumenda. Voluptate dolorum quasi."
    },
    {
      "label": "Et Rerum Recusandae",
      "content": "Aut voluptas ratione ea aliquam quis. Autem est quod ut suscipit voluptatibus. Reiciendis numquam est quidem ut fugiat omnis est quis. Voluptas quod non sit amet unde in molestiae. Id quo perspiciatis autem. Unde esse laboriosam maxime dolorem ratione nihil labore."
    }
  ],
  "standAlone": false
}

There are no notes for this item.