Pinecone

Accordion: Inverse 

<div class="spacer"></div>
<div class="accordion accordion--inverse">
    <div class="accordion__pane">
        <p class="accordion__heading">Quibusdam Eos minus</p>
        <div class="accordion__content">
            <p>Quasi culpa culpa doloribus assumenda iure quo doloremque ut. Enim facere mollitia a debitis fugit vel. Quia est velit aut beatae qui est ratione. Dolorum modi voluptas veritatis quasi sed. Commodi aliquam totam vel soluta sed quo.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Qui Animi Hic</p>
        <div class="accordion__content">
            <p>Molestiae magni eligendi eius sed sed autem nemo est. Quia debitis deleniti aut corrupti. Adipisci alias et fuga a veniam. Dolore velit earum et maiores voluptas aliquam non quo quas.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Porro Suscipit Nisi</p>
        <div class="accordion__content">
            <p>Nam repellat et. Ipsum voluptas inventore laborum aut debitis itaque dicta cupiditate. Et at et et accusamus blanditiis explicabo aut eum. Quibusdam ipsa sint qui est delectus ad.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Similique Est Non</p>
        <div class="accordion__content">
            <p>Vel voluptatem distinctio. Occaecati delectus possimus molestias maxime praesentium molestiae. Eligendi repudiandae in veniam in suscipit ut. Unde ut nihil aspernatur ipsam dolorem molestiae ratione culpa fugiat.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Ut Sequi Soluta</p>
        <div class="accordion__content">
            <p>Vel perferendis exercitationem error alias pariatur sed. Dolor aliquam consequatur adipisci minima fugit. Sit excepturi ut velit tempore corporis praesentium est maxime ut.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Ad Qui Quia</p>
        <div class="accordion__content">
            <p>Impedit et consequatur maxime quaerat quam aut vitae et. Repellat sunt earum repudiandae. Et similique vitae molestiae vitae a perferendis. Libero maiores non saepe ratione velit impedit harum. Aliquam ut ex facere aut ipsum quisquam quia dolorem beatae. Cumque fugiat est dicta qui voluptatem ea doloribus atque.</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": "Quibusdam Eos minus",
      "content": "Quasi culpa culpa doloribus assumenda iure quo doloremque ut. Enim facere mollitia a debitis fugit vel. Quia est velit aut beatae qui est ratione. Dolorum modi voluptas veritatis quasi sed. Commodi aliquam totam vel soluta sed quo."
    },
    {
      "label": "Qui Animi Hic",
      "content": "Molestiae magni eligendi eius sed sed autem nemo est. Quia debitis deleniti aut corrupti. Adipisci alias et fuga a veniam. Dolore velit earum et maiores voluptas aliquam non quo quas."
    },
    {
      "label": "Porro Suscipit Nisi",
      "content": "Nam repellat et. Ipsum voluptas inventore laborum aut debitis itaque dicta cupiditate. Et at et et accusamus blanditiis explicabo aut eum. Quibusdam ipsa sint qui est delectus ad."
    },
    {
      "label": "Similique Est Non",
      "content": "Vel voluptatem distinctio. Occaecati delectus possimus molestias maxime praesentium molestiae. Eligendi repudiandae in veniam in suscipit ut. Unde ut nihil aspernatur ipsam dolorem molestiae ratione culpa fugiat."
    },
    {
      "label": "Ut Sequi Soluta",
      "content": "Vel perferendis exercitationem error alias pariatur sed. Dolor aliquam consequatur adipisci minima fugit. Sit excepturi ut velit tempore corporis praesentium est maxime ut."
    },
    {
      "label": "Ad Qui Quia",
      "content": "Impedit et consequatur maxime quaerat quam aut vitae et. Repellat sunt earum repudiandae. Et similique vitae molestiae vitae a perferendis. Libero maiores non saepe ratione velit impedit harum. Aliquam ut ex facere aut ipsum quisquam quia dolorem beatae. Cumque fugiat est dicta qui voluptatem ea doloribus atque."
    }
  ],
  "standAlone": false,
  "modifier": "inverse",
  "bodyClass": "has-blue-500-background-color"
}

There are no notes for this item.