Pinecone

Accordion: Inverse 

<div class="spacer"></div>
<div class="accordion accordion--inverse">
    <div class="accordion__pane">
        <p class="accordion__heading">Corrupti in Provident</p>
        <div class="accordion__content">
            <p>Est autem non a voluptatum mollitia possimus. Eos omnis nobis nesciunt. Distinctio in est.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Debitis Repellat Inventore</p>
        <div class="accordion__content">
            <p>Nemo pariatur sit non repellendus ipsa illum culpa. Iste natus ut autem reiciendis asperiores perspiciatis quo. Accusamus repudiandae maxime.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Asperiores Nihil Illo</p>
        <div class="accordion__content">
            <p>Minus quia aliquid quas quibusdam debitis pariatur aliquid maiores quisquam. Tenetur nostrum repellat nostrum omnis quia recusandae voluptas minima. Similique voluptas et culpa illo iure animi dolor sunt. Deleniti hic accusantium et. Dolorem fugiat reprehenderit temporibus.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Doloremque Earum Quos</p>
        <div class="accordion__content">
            <p>Possimus voluptas laudantium in accusantium recusandae. Doloremque accusantium quia corporis sequi quas omnis. Dolor culpa cumque et quia in et. Sit iste eum repellendus nobis voluptatem expedita repudiandae distinctio.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Dolores Iusto Sit</p>
        <div class="accordion__content">
            <p>Quis dolorem voluptatem iure. Est aut ab aut aut consequatur architecto. Et nihil consequatur placeat.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Quo in Repudiandae</p>
        <div class="accordion__content">
            <p>Perspiciatis ut consectetur ullam. Totam nihil et. Architecto voluptate ab aspernatur saepe. Labore cumque hic aspernatur similique. Error perspiciatis illo.</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": "Corrupti in Provident",
      "content": "Est autem non a voluptatum mollitia possimus. Eos omnis nobis nesciunt. Distinctio in est."
    },
    {
      "label": "Debitis Repellat Inventore",
      "content": "Nemo pariatur sit non repellendus ipsa illum culpa. Iste natus ut autem reiciendis asperiores perspiciatis quo. Accusamus repudiandae maxime."
    },
    {
      "label": "Asperiores Nihil Illo",
      "content": "Minus quia aliquid quas quibusdam debitis pariatur aliquid maiores quisquam. Tenetur nostrum repellat nostrum omnis quia recusandae voluptas minima. Similique voluptas et culpa illo iure animi dolor sunt. Deleniti hic accusantium et. Dolorem fugiat reprehenderit temporibus."
    },
    {
      "label": "Doloremque Earum Quos",
      "content": "Possimus voluptas laudantium in accusantium recusandae. Doloremque accusantium quia corporis sequi quas omnis. Dolor culpa cumque et quia in et. Sit iste eum repellendus nobis voluptatem expedita repudiandae distinctio."
    },
    {
      "label": "Dolores Iusto Sit",
      "content": "Quis dolorem voluptatem iure. Est aut ab aut aut consequatur architecto. Et nihil consequatur placeat."
    },
    {
      "label": "Quo in Repudiandae",
      "content": "Perspiciatis ut consectetur ullam. Totam nihil et. Architecto voluptate ab aspernatur saepe. Labore cumque hic aspernatur similique. Error perspiciatis illo."
    }
  ],
  "standAlone": false,
  "modifier": "inverse",
  "bodyClass": "has-blue-500-background-color"
}

There are no notes for this item.