Pinecone

Accordion: Inverse 

<div class="spacer"></div>
<div class="accordion accordion--inverse">
    <div class="accordion__pane">
        <p class="accordion__heading">Qui Eum Nesciunt</p>
        <div class="accordion__content">
            <p>Sed ipsum suscipit veritatis natus ea est. Quidem aperiam quaerat. Voluptas exercitationem odit est in modi.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Quae Doloremque Accusantium</p>
        <div class="accordion__content">
            <p>Occaecati assumenda sed culpa eius ut. Animi sit omnis autem ea. Exercitationem ut unde architecto ratione nisi minima praesentium. Perspiciatis modi excepturi deleniti incidunt sint sunt eos et. Iusto illo et. Illum sed quos voluptas mollitia aperiam quia.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Nihil Et Et</p>
        <div class="accordion__content">
            <p>Et possimus iusto consequuntur autem. Fugit sunt esse neque. Et voluptatibus quia pariatur aut ipsam.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Omnis Aperiam Adipisci</p>
        <div class="accordion__content">
            <p>Officiis ipsum ut incidunt voluptatem aliquid. Illo suscipit veritatis at. Aut nobis aut dolorem ipsam impedit quia voluptate laboriosam. Soluta accusantium saepe. Est mollitia blanditiis quo natus incidunt et.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Hic Totam Doloremque</p>
        <div class="accordion__content">
            <p>Illum eum et omnis nesciunt illo sed dolorem laboriosam. Possimus nobis aperiam vel iure quas. Eligendi incidunt eveniet sed hic cum aut praesentium in sunt. Deleniti sapiente voluptas. Dolorem ea quibusdam. Vel cumque ut ad qui consequuntur quo voluptas non.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Fugiat Nesciunt Sit</p>
        <div class="accordion__content">
            <p>Sint omnis nostrum ut labore velit et sit molestias velit. Sit consequatur aspernatur ut distinctio dolorem esse praesentium. Aperiam iste odit est soluta est laudantium ex et.</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": "Qui Eum Nesciunt",
      "content": "Sed ipsum suscipit veritatis natus ea est. Quidem aperiam quaerat. Voluptas exercitationem odit est in modi."
    },
    {
      "label": "Quae Doloremque Accusantium",
      "content": "Occaecati assumenda sed culpa eius ut. Animi sit omnis autem ea. Exercitationem ut unde architecto ratione nisi minima praesentium. Perspiciatis modi excepturi deleniti incidunt sint sunt eos et. Iusto illo et. Illum sed quos voluptas mollitia aperiam quia."
    },
    {
      "label": "Nihil Et Et",
      "content": "Et possimus iusto consequuntur autem. Fugit sunt esse neque. Et voluptatibus quia pariatur aut ipsam."
    },
    {
      "label": "Omnis Aperiam Adipisci",
      "content": "Officiis ipsum ut incidunt voluptatem aliquid. Illo suscipit veritatis at. Aut nobis aut dolorem ipsam impedit quia voluptate laboriosam. Soluta accusantium saepe. Est mollitia blanditiis quo natus incidunt et."
    },
    {
      "label": "Hic Totam Doloremque",
      "content": "Illum eum et omnis nesciunt illo sed dolorem laboriosam. Possimus nobis aperiam vel iure quas. Eligendi incidunt eveniet sed hic cum aut praesentium in sunt. Deleniti sapiente voluptas. Dolorem ea quibusdam. Vel cumque ut ad qui consequuntur quo voluptas non."
    },
    {
      "label": "Fugiat Nesciunt Sit",
      "content": "Sint omnis nostrum ut labore velit et sit molestias velit. Sit consequatur aspernatur ut distinctio dolorem esse praesentium. Aperiam iste odit est soluta est laudantium ex et."
    }
  ],
  "standAlone": false,
  "modifier": "inverse",
  "bodyClass": "has-blue-500-background-color"
}

There are no notes for this item.