Pinecone

Accordion: Inverse 

<div class="spacer"></div>
<div class="accordion accordion--inverse">
    <div class="accordion__pane">
        <p class="accordion__heading">Molestiae Et Recusandae</p>
        <div class="accordion__content">
            <p>Perspiciatis quo iusto omnis est vel sunt accusamus. Reiciendis id ipsam error dolore vitae. Est ipsam nihil. Et nisi quia non.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Reprehenderit Inventore Praesentium</p>
        <div class="accordion__content">
            <p>Voluptate eum adipisci eveniet voluptatem odio in. Odio et rerum quaerat pariatur nulla nihil iusto. Fugit nesciunt at sunt omnis ullam dolore ea. Aspernatur voluptates ea sit reprehenderit quia excepturi fuga ipsum natus. Ut aut ad et maiores debitis voluptatum perferendis saepe.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Qui Quia Exercitationem</p>
        <div class="accordion__content">
            <p>Facere et est quidem quia illum assumenda. Velit sapiente quo repellendus quo vel necessitatibus impedit et. Aut quas aliquam necessitatibus soluta optio et sint. Ipsa officia aliquid placeat. Dolorem quod saepe. Ea dolor sit officia qui animi consequatur debitis.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Dolores Sed Delectus</p>
        <div class="accordion__content">
            <p>Laboriosam et reiciendis vitae illo possimus nihil laborum aut. Nemo nemo qui eveniet sit fuga voluptatem. Laboriosam et quia perferendis repellendus occaecati ut. Quo quia officia adipisci qui. Aspernatur et inventore corrupti in sequi ipsum modi.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Tenetur Dolorem Sit</p>
        <div class="accordion__content">
            <p>Quaerat ut est aut ducimus harum dolorum nostrum eum aliquam. Ut voluptates maxime deleniti id. Voluptatem nemo nisi eum. Vero autem quasi quibusdam sequi. Nulla accusamus laborum voluptas tempore accusamus rerum. Aut dolorum quas.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Nesciunt Dolore Odit</p>
        <div class="accordion__content">
            <p>Velit officiis voluptatem quisquam blanditiis aut aut fugiat aut esse. Maxime mollitia labore enim voluptatem fuga qui. Aut et voluptatem soluta veritatis sit. At doloribus voluptatem non id sunt est. Repellat ut dolore voluptatem aspernatur non in.</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": "Molestiae Et Recusandae",
      "content": "Perspiciatis quo iusto omnis est vel sunt accusamus. Reiciendis id ipsam error dolore vitae. Est ipsam nihil. Et nisi quia non."
    },
    {
      "label": "Reprehenderit Inventore Praesentium",
      "content": "Voluptate eum adipisci eveniet voluptatem odio in. Odio et rerum quaerat pariatur nulla nihil iusto. Fugit nesciunt at sunt omnis ullam dolore ea. Aspernatur voluptates ea sit reprehenderit quia excepturi fuga ipsum natus. Ut aut ad et maiores debitis voluptatum perferendis saepe."
    },
    {
      "label": "Qui Quia Exercitationem",
      "content": "Facere et est quidem quia illum assumenda. Velit sapiente quo repellendus quo vel necessitatibus impedit et. Aut quas aliquam necessitatibus soluta optio et sint. Ipsa officia aliquid placeat. Dolorem quod saepe. Ea dolor sit officia qui animi consequatur debitis."
    },
    {
      "label": "Dolores Sed Delectus",
      "content": "Laboriosam et reiciendis vitae illo possimus nihil laborum aut. Nemo nemo qui eveniet sit fuga voluptatem. Laboriosam et quia perferendis repellendus occaecati ut. Quo quia officia adipisci qui. Aspernatur et inventore corrupti in sequi ipsum modi."
    },
    {
      "label": "Tenetur Dolorem Sit",
      "content": "Quaerat ut est aut ducimus harum dolorum nostrum eum aliquam. Ut voluptates maxime deleniti id. Voluptatem nemo nisi eum. Vero autem quasi quibusdam sequi. Nulla accusamus laborum voluptas tempore accusamus rerum. Aut dolorum quas."
    },
    {
      "label": "Nesciunt Dolore Odit",
      "content": "Velit officiis voluptatem quisquam blanditiis aut aut fugiat aut esse. Maxime mollitia labore enim voluptatem fuga qui. Aut et voluptatem soluta veritatis sit. At doloribus voluptatem non id sunt est. Repellat ut dolore voluptatem aspernatur non in."
    }
  ],
  "standAlone": false,
  "modifier": "inverse",
  "bodyClass": "has-blue-500-background-color"
}

There are no notes for this item.