Pinecone

Accordion: Default 

<div class="spacer"></div>
<div class="accordion">
    <div class="accordion__pane">
        <p class="accordion__heading">Sit Ad Veniam</p>
        <div class="accordion__content">
            <p>Repudiandae at amet similique assumenda sit. Doloremque blanditiis dignissimos dicta deserunt est rerum sint. Unde aspernatur sunt aliquam odit enim. Quaerat provident excepturi et voluptatem. Ut mollitia tenetur ipsum amet optio libero.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Distinctio Recusandae Et</p>
        <div class="accordion__content">
            <p>Non et aut sapiente incidunt molestiae est perferendis. Itaque unde nemo et. Mollitia autem excepturi sint. Porro aliquam dolore nesciunt quis. Adipisci omnis quisquam veritatis debitis in amet.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Qui Cumque Magni</p>
        <div class="accordion__content">
            <p>Autem quibusdam odit iste et et. Eaque quisquam natus earum fugiat fugiat porro quos. Dolores error quisquam distinctio ullam nesciunt. Et quos nihil unde quasi fuga et et qui.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Maxime Sed Occaecati</p>
        <div class="accordion__content">
            <p>Asperiores occaecati esse quis veniam consequuntur ut. Veniam cupiditate autem commodi omnis excepturi aut. Suscipit nemo molestiae est sint magnam odio quasi dolorem qui.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Accusamus Autem Ipsum</p>
        <div class="accordion__content">
            <p>Dignissimos qui eius. Eum omnis sed. Consequatur odio suscipit et omnis et mollitia voluptas qui. Tempora minima et et aspernatur cumque libero. Reprehenderit quaerat pariatur qui modi aperiam.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Id Alias Officiis</p>
        <div class="accordion__content">
            <p>Consequatur deleniti dolorem et. Dignissimos dolores itaque aliquid alias consectetur ratione. Sed facilis quidem quibusdam repellat iure. Id non ut maiores animi non sed.</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": "Sit Ad Veniam",
      "content": "Repudiandae at amet similique assumenda sit. Doloremque blanditiis dignissimos dicta deserunt est rerum sint. Unde aspernatur sunt aliquam odit enim. Quaerat provident excepturi et voluptatem. Ut mollitia tenetur ipsum amet optio libero."
    },
    {
      "label": "Distinctio Recusandae Et",
      "content": "Non et aut sapiente incidunt molestiae est perferendis. Itaque unde nemo et. Mollitia autem excepturi sint. Porro aliquam dolore nesciunt quis. Adipisci omnis quisquam veritatis debitis in amet."
    },
    {
      "label": "Qui Cumque Magni",
      "content": "Autem quibusdam odit iste et et. Eaque quisquam natus earum fugiat fugiat porro quos. Dolores error quisquam distinctio ullam nesciunt. Et quos nihil unde quasi fuga et et qui."
    },
    {
      "label": "Maxime Sed Occaecati",
      "content": "Asperiores occaecati esse quis veniam consequuntur ut. Veniam cupiditate autem commodi omnis excepturi aut. Suscipit nemo molestiae est sint magnam odio quasi dolorem qui."
    },
    {
      "label": "Accusamus Autem Ipsum",
      "content": "Dignissimos qui eius. Eum omnis sed. Consequatur odio suscipit et omnis et mollitia voluptas qui. Tempora minima et et aspernatur cumque libero. Reprehenderit quaerat pariatur qui modi aperiam."
    },
    {
      "label": "Id Alias Officiis",
      "content": "Consequatur deleniti dolorem et. Dignissimos dolores itaque aliquid alias consectetur ratione. Sed facilis quidem quibusdam repellat iure. Id non ut maiores animi non sed."
    }
  ],
  "standAlone": false
}

There are no notes for this item.