Pinecone

Accordion: Inverse 

<div class="spacer"></div>
<div class="accordion accordion--inverse">
    <div class="accordion__pane">
        <p class="accordion__heading">Dolorem Distinctio Labore</p>
        <div class="accordion__content">
            <p>Et sint maxime repellat possimus ab soluta est id. Eum accusamus et ipsam doloremque. Aspernatur molestiae minus voluptas occaecati dicta culpa non. Suscipit labore autem quis nisi voluptas fugiat tenetur quis quia.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Et Quam Voluptate</p>
        <div class="accordion__content">
            <p>Excepturi et in fugit aliquam exercitationem similique magnam est. Sit accusamus veritatis veniam nisi aut in optio atque nisi. Occaecati suscipit vel aliquam et voluptatem. Consequatur eos dolores laborum.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Quod Amet Voluptatem</p>
        <div class="accordion__content">
            <p>Et cupiditate non et sunt aliquid. Voluptatem explicabo odio fugit. Minima esse repellendus. Excepturi porro quidem eum animi laborum iusto reiciendis. Soluta quaerat praesentium quam.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Nostrum Id Eius</p>
        <div class="accordion__content">
            <p>Repellendus modi harum deserunt odio consequuntur ut. Esse ut qui aut a magni quia. Voluptas animi repudiandae. Culpa sed saepe et voluptas quis repellat.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Minus Libero Est</p>
        <div class="accordion__content">
            <p>Atque culpa omnis culpa amet quibusdam non distinctio optio. Quia et qui eum enim sapiente itaque. Dolorum est eius hic eos consectetur ea.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Voluptatem Assumenda Veritatis</p>
        <div class="accordion__content">
            <p>Cupiditate omnis dolor. Iusto a corporis aut quo est fugiat temporibus. Quo qui sit exercitationem adipisci et non corporis.</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": "Dolorem Distinctio Labore",
      "content": "Et sint maxime repellat possimus ab soluta est id. Eum accusamus et ipsam doloremque. Aspernatur molestiae minus voluptas occaecati dicta culpa non. Suscipit labore autem quis nisi voluptas fugiat tenetur quis quia."
    },
    {
      "label": "Et Quam Voluptate",
      "content": "Excepturi et in fugit aliquam exercitationem similique magnam est. Sit accusamus veritatis veniam nisi aut in optio atque nisi. Occaecati suscipit vel aliquam et voluptatem. Consequatur eos dolores laborum."
    },
    {
      "label": "Quod Amet Voluptatem",
      "content": "Et cupiditate non et sunt aliquid. Voluptatem explicabo odio fugit. Minima esse repellendus. Excepturi porro quidem eum animi laborum iusto reiciendis. Soluta quaerat praesentium quam."
    },
    {
      "label": "Nostrum Id Eius",
      "content": "Repellendus modi harum deserunt odio consequuntur ut. Esse ut qui aut a magni quia. Voluptas animi repudiandae. Culpa sed saepe et voluptas quis repellat."
    },
    {
      "label": "Minus Libero Est",
      "content": "Atque culpa omnis culpa amet quibusdam non distinctio optio. Quia et qui eum enim sapiente itaque. Dolorum est eius hic eos consectetur ea."
    },
    {
      "label": "Voluptatem Assumenda Veritatis",
      "content": "Cupiditate omnis dolor. Iusto a corporis aut quo est fugiat temporibus. Quo qui sit exercitationem adipisci et non corporis."
    }
  ],
  "standAlone": false,
  "modifier": "inverse",
  "bodyClass": "has-blue-500-background-color"
}

There are no notes for this item.