Pinecone

Accordion: Default 

<div class="spacer"></div>
<div class="accordion">
    <div class="accordion__pane">
        <p class="accordion__heading">Perferendis Eveniet Aliquam</p>
        <div class="accordion__content">
            <p>Molestiae quia quia deleniti sint quia occaecati autem quia. Quo in rerum id. Nisi in iusto officiis unde. Et et libero totam.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">In Eveniet Voluptatum</p>
        <div class="accordion__content">
            <p>Id molestias ut ullam eligendi. Fugit adipisci consequatur. Vero qui rerum accusamus et quod. Alias esse et a quis laboriosam deleniti. Cum repudiandae provident doloremque atque vel hic recusandae voluptas. Cumque et laudantium unde eum consequatur.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Recusandae Amet Occaecati</p>
        <div class="accordion__content">
            <p>Nam perspiciatis architecto rem excepturi possimus accusamus. Dicta alias dignissimos quos aspernatur mollitia. Iusto consectetur id eveniet laudantium culpa repudiandae commodi. Ex voluptate nobis voluptates occaecati aperiam facere maxime vero. Voluptatibus et est cum quis nihil in. Qui fugit omnis tenetur asperiores ea.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Sunt Autem Sint</p>
        <div class="accordion__content">
            <p>Perspiciatis eum placeat ut voluptas modi quia velit aperiam sed. Fuga id voluptatem et beatae quisquam itaque. Facilis sit dicta non minus.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Qui Atque Et</p>
        <div class="accordion__content">
            <p>Dolor qui ut id. Quia esse nam veniam rerum aut deleniti voluptas itaque dicta. Placeat commodi qui praesentium rerum alias dicta ea ad cum. Temporibus nesciunt quia cum sequi molestias. Vitae eum dolore nihil reiciendis quia soluta similique quas culpa. Corporis repudiandae deleniti aut consequuntur.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Nihil Fuga Delectus</p>
        <div class="accordion__content">
            <p>Qui inventore distinctio aliquid tenetur. Voluptas quia velit iusto similique. Iste aut odit molestias quae tempore qui consequatur quo voluptatum. Iusto minus optio dolorem sit odio laboriosam qui. Adipisci adipisci facere assumenda officiis. Et ut et aut sed blanditiis.</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": "Perferendis Eveniet Aliquam",
      "content": "Molestiae quia quia deleniti sint quia occaecati autem quia. Quo in rerum id. Nisi in iusto officiis unde. Et et libero totam."
    },
    {
      "label": "In Eveniet Voluptatum",
      "content": "Id molestias ut ullam eligendi. Fugit adipisci consequatur. Vero qui rerum accusamus et quod. Alias esse et a quis laboriosam deleniti. Cum repudiandae provident doloremque atque vel hic recusandae voluptas. Cumque et laudantium unde eum consequatur."
    },
    {
      "label": "Recusandae Amet Occaecati",
      "content": "Nam perspiciatis architecto rem excepturi possimus accusamus. Dicta alias dignissimos quos aspernatur mollitia. Iusto consectetur id eveniet laudantium culpa repudiandae commodi. Ex voluptate nobis voluptates occaecati aperiam facere maxime vero. Voluptatibus et est cum quis nihil in. Qui fugit omnis tenetur asperiores ea."
    },
    {
      "label": "Sunt Autem Sint",
      "content": "Perspiciatis eum placeat ut voluptas modi quia velit aperiam sed. Fuga id voluptatem et beatae quisquam itaque. Facilis sit dicta non minus."
    },
    {
      "label": "Qui Atque Et",
      "content": "Dolor qui ut id. Quia esse nam veniam rerum aut deleniti voluptas itaque dicta. Placeat commodi qui praesentium rerum alias dicta ea ad cum. Temporibus nesciunt quia cum sequi molestias. Vitae eum dolore nihil reiciendis quia soluta similique quas culpa. Corporis repudiandae deleniti aut consequuntur."
    },
    {
      "label": "Nihil Fuga Delectus",
      "content": "Qui inventore distinctio aliquid tenetur. Voluptas quia velit iusto similique. Iste aut odit molestias quae tempore qui consequatur quo voluptatum. Iusto minus optio dolorem sit odio laboriosam qui. Adipisci adipisci facere assumenda officiis. Et ut et aut sed blanditiis."
    }
  ],
  "standAlone": false
}

There are no notes for this item.