Pinecone

Accordion: Inverse 

<div class="spacer"></div>
<div class="accordion accordion--inverse">
    <div class="accordion__pane">
        <p class="accordion__heading">Est Et Quos</p>
        <div class="accordion__content">
            <p>Eos repellat voluptates eius reprehenderit ex non harum labore. Earum et placeat natus fugiat officiis facere molestiae vel. Eligendi est enim soluta dignissimos ex et quo impedit quo. Enim libero sint et ratione.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">In Voluptate Quibusdam</p>
        <div class="accordion__content">
            <p>Velit repudiandae totam omnis dolorem beatae. Ducimus quia corrupti reprehenderit cumque et ducimus libero. Sit facere vel rem suscipit et consequatur. Sint in tempore vitae vel numquam facere a quam saepe. Et dolor et beatae et cupiditate. Eum repellendus aut dolorum recusandae voluptate amet consequatur.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Dolorem Ipsam Blanditiis</p>
        <div class="accordion__content">
            <p>Blanditiis totam et. Itaque iste vel. Numquam aliquam aut placeat voluptatum expedita. Consequatur est et veniam laborum eos ut alias qui. Aut rerum aspernatur quidem non quidem similique.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Neque Placeat Sequi</p>
        <div class="accordion__content">
            <p>Non molestiae quas magnam dolores ex sapiente fugiat maiores officiis. Sit dolores ducimus occaecati adipisci voluptatem facere. Id eaque autem autem sunt suscipit magni explicabo mollitia.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Dolores Similique Dolores</p>
        <div class="accordion__content">
            <p>Quasi veniam in sit perspiciatis dignissimos voluptatem. Qui sed aperiam aperiam pariatur. Nemo non explicabo nemo nostrum dolor aut tempora dignissimos dolores.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Labore Voluptas Excepturi</p>
        <div class="accordion__content">
            <p>Necessitatibus molestias odio tempore voluptas quod laudantium ut assumenda. Consectetur ducimus voluptatem est incidunt mollitia nihil et. Corrupti blanditiis voluptate saepe numquam corporis provident quod quisquam. Dolor quam veniam. Quidem quas nulla aut sit labore 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": "Est Et Quos",
      "content": "Eos repellat voluptates eius reprehenderit ex non harum labore. Earum et placeat natus fugiat officiis facere molestiae vel. Eligendi est enim soluta dignissimos ex et quo impedit quo. Enim libero sint et ratione."
    },
    {
      "label": "In Voluptate Quibusdam",
      "content": "Velit repudiandae totam omnis dolorem beatae. Ducimus quia corrupti reprehenderit cumque et ducimus libero. Sit facere vel rem suscipit et consequatur. Sint in tempore vitae vel numquam facere a quam saepe. Et dolor et beatae et cupiditate. Eum repellendus aut dolorum recusandae voluptate amet consequatur."
    },
    {
      "label": "Dolorem Ipsam Blanditiis",
      "content": "Blanditiis totam et. Itaque iste vel. Numquam aliquam aut placeat voluptatum expedita. Consequatur est et veniam laborum eos ut alias qui. Aut rerum aspernatur quidem non quidem similique."
    },
    {
      "label": "Neque Placeat Sequi",
      "content": "Non molestiae quas magnam dolores ex sapiente fugiat maiores officiis. Sit dolores ducimus occaecati adipisci voluptatem facere. Id eaque autem autem sunt suscipit magni explicabo mollitia."
    },
    {
      "label": "Dolores Similique Dolores",
      "content": "Quasi veniam in sit perspiciatis dignissimos voluptatem. Qui sed aperiam aperiam pariatur. Nemo non explicabo nemo nostrum dolor aut tempora dignissimos dolores."
    },
    {
      "label": "Labore Voluptas Excepturi",
      "content": "Necessitatibus molestias odio tempore voluptas quod laudantium ut assumenda. Consectetur ducimus voluptatem est incidunt mollitia nihil et. Corrupti blanditiis voluptate saepe numquam corporis provident quod quisquam. Dolor quam veniam. Quidem quas nulla aut sit labore dolore."
    }
  ],
  "standAlone": false,
  "modifier": "inverse",
  "bodyClass": "has-blue-500-background-color"
}

There are no notes for this item.