Pinecone

Accordion: Inverse 

<div class="spacer"></div>
<div class="accordion accordion--inverse">
    <div class="accordion__pane">
        <p class="accordion__heading">Provident Eius Aut</p>
        <div class="accordion__content">
            <p>Corrupti impedit et placeat sint. Aut in at ut est itaque. Ut blanditiis corporis. Tenetur fugit nobis vel quis minus expedita rerum.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Error Ut Omnis</p>
        <div class="accordion__content">
            <p>In similique adipisci quod odio modi. Debitis doloremque dolores iste qui harum. Hic perspiciatis porro libero eum dolore. Saepe voluptatem aliquam dicta nihil qui consequuntur cum.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Quam Quia Dolor</p>
        <div class="accordion__content">
            <p>Eligendi autem animi. Quaerat qui tenetur quaerat illo explicabo necessitatibus maiores et. Accusamus architecto sint autem non maiores ut et nostrum. Non voluptatem dolores voluptates rerum qui. Tempore itaque rem. Eaque amet harum cupiditate est ducimus earum modi ut.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Veniam Mollitia Explicabo</p>
        <div class="accordion__content">
            <p>Minus qui nostrum. Quia quod repellendus. Praesentium eius maiores id ex aspernatur reprehenderit sint. Molestias beatae quam temporibus et nam voluptatem alias ut consectetur. Est sint possimus sed. Nihil odit corporis blanditiis ut.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Quos Ipsum Libero</p>
        <div class="accordion__content">
            <p>Expedita sit ut sint quibusdam rerum. Veniam aspernatur esse enim est ut nesciunt. In minus eos rerum iste dolorem odio mollitia non dolorem. Minima dolor et.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Possimus Nihil Consequatur</p>
        <div class="accordion__content">
            <p>Quis qui natus aut similique dignissimos minus officia. Laboriosam nulla iste quidem tempore voluptas porro laboriosam dolorem. Sit tempora iste dolore.</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": "Provident Eius Aut",
      "content": "Corrupti impedit et placeat sint. Aut in at ut est itaque. Ut blanditiis corporis. Tenetur fugit nobis vel quis minus expedita rerum."
    },
    {
      "label": "Error Ut Omnis",
      "content": "In similique adipisci quod odio modi. Debitis doloremque dolores iste qui harum. Hic perspiciatis porro libero eum dolore. Saepe voluptatem aliquam dicta nihil qui consequuntur cum."
    },
    {
      "label": "Quam Quia Dolor",
      "content": "Eligendi autem animi. Quaerat qui tenetur quaerat illo explicabo necessitatibus maiores et. Accusamus architecto sint autem non maiores ut et nostrum. Non voluptatem dolores voluptates rerum qui. Tempore itaque rem. Eaque amet harum cupiditate est ducimus earum modi ut."
    },
    {
      "label": "Veniam Mollitia Explicabo",
      "content": "Minus qui nostrum. Quia quod repellendus. Praesentium eius maiores id ex aspernatur reprehenderit sint. Molestias beatae quam temporibus et nam voluptatem alias ut consectetur. Est sint possimus sed. Nihil odit corporis blanditiis ut."
    },
    {
      "label": "Quos Ipsum Libero",
      "content": "Expedita sit ut sint quibusdam rerum. Veniam aspernatur esse enim est ut nesciunt. In minus eos rerum iste dolorem odio mollitia non dolorem. Minima dolor et."
    },
    {
      "label": "Possimus Nihil Consequatur",
      "content": "Quis qui natus aut similique dignissimos minus officia. Laboriosam nulla iste quidem tempore voluptas porro laboriosam dolorem. Sit tempora iste dolore."
    }
  ],
  "standAlone": false,
  "modifier": "inverse",
  "bodyClass": "has-blue-500-background-color"
}

There are no notes for this item.