Pinecone

Accordion: Inverse 

<div class="spacer"></div>
<div class="accordion accordion--inverse">
    <div class="accordion__pane">
        <p class="accordion__heading">Est Nostrum Praesentium</p>
        <div class="accordion__content">
            <p>Eaque incidunt nisi possimus ex deserunt voluptate enim. Aliquam aliquam dolor non provident voluptates incidunt illo. Asperiores quo repellat explicabo sed. Autem enim ab. Et ut adipisci expedita vitae praesentium corrupti quasi. Nihil nihil reprehenderit consequatur veritatis ullam.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Exercitationem Est Adipisci</p>
        <div class="accordion__content">
            <p>Voluptas dignissimos reprehenderit ea nihil quis odio tenetur. Eligendi voluptatum nisi maxime distinctio qui illum dicta culpa perferendis. Adipisci debitis velit ut vel est ut. Dolor debitis non libero ipsum consequuntur doloribus voluptas aliquam. Eos dolores cumque ut minima.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Fugit Beatae Alias</p>
        <div class="accordion__content">
            <p>Minima animi quod tempora et quaerat quam et. Qui quo occaecati optio corporis nihil minima. Reprehenderit qui suscipit est.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Ex Id Doloribus</p>
        <div class="accordion__content">
            <p>Facilis voluptas labore libero repellendus quam. Quo aut dicta qui atque facilis explicabo deleniti facilis libero. Est molestiae aut excepturi accusantium autem consequatur sint hic dolores. Earum inventore quisquam maiores et dolor facilis ullam quisquam. Quam neque ut harum quos.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Illo Atque Necessitatibus</p>
        <div class="accordion__content">
            <p>Praesentium ut et ut voluptatum nesciunt aut dolor ut architecto. Quos at vero. Non corrupti molestiae consectetur. Neque incidunt est.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Quas Fuga Est</p>
        <div class="accordion__content">
            <p>Rerum pariatur sunt blanditiis aut quia sint tenetur. Quod voluptatem sed atque quis repellendus temporibus. Occaecati perferendis modi.</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 Nostrum Praesentium",
      "content": "Eaque incidunt nisi possimus ex deserunt voluptate enim. Aliquam aliquam dolor non provident voluptates incidunt illo. Asperiores quo repellat explicabo sed. Autem enim ab. Et ut adipisci expedita vitae praesentium corrupti quasi. Nihil nihil reprehenderit consequatur veritatis ullam."
    },
    {
      "label": "Exercitationem Est Adipisci",
      "content": "Voluptas dignissimos reprehenderit ea nihil quis odio tenetur. Eligendi voluptatum nisi maxime distinctio qui illum dicta culpa perferendis. Adipisci debitis velit ut vel est ut. Dolor debitis non libero ipsum consequuntur doloribus voluptas aliquam. Eos dolores cumque ut minima."
    },
    {
      "label": "Fugit Beatae Alias",
      "content": "Minima animi quod tempora et quaerat quam et. Qui quo occaecati optio corporis nihil minima. Reprehenderit qui suscipit est."
    },
    {
      "label": "Ex Id Doloribus",
      "content": "Facilis voluptas labore libero repellendus quam. Quo aut dicta qui atque facilis explicabo deleniti facilis libero. Est molestiae aut excepturi accusantium autem consequatur sint hic dolores. Earum inventore quisquam maiores et dolor facilis ullam quisquam. Quam neque ut harum quos."
    },
    {
      "label": "Illo Atque Necessitatibus",
      "content": "Praesentium ut et ut voluptatum nesciunt aut dolor ut architecto. Quos at vero. Non corrupti molestiae consectetur. Neque incidunt est."
    },
    {
      "label": "Quas Fuga Est",
      "content": "Rerum pariatur sunt blanditiis aut quia sint tenetur. Quod voluptatem sed atque quis repellendus temporibus. Occaecati perferendis modi."
    }
  ],
  "standAlone": false,
  "modifier": "inverse",
  "bodyClass": "has-blue-500-background-color"
}

There are no notes for this item.