Pinecone

Accordion: Inverse 

<div class="spacer"></div>
<div class="accordion accordion--inverse">
    <div class="accordion__pane">
        <p class="accordion__heading">Distinctio in Et</p>
        <div class="accordion__content">
            <p>Aliquam temporibus corporis ipsam et cupiditate consectetur id nam laudantium. Et et at quia a architecto optio. Minima quis laudantium quidem. Blanditiis ex est ducimus quibusdam impedit dolorum eveniet. Ipsa facere vel animi rerum labore. Et qui soluta qui.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Minus Est Qui</p>
        <div class="accordion__content">
            <p>Vitae commodi non id dignissimos libero quo ut dolorem consequatur. Eum recusandae eos laborum voluptate placeat repellat. Eligendi perferendis iusto vero quia. Aut consequuntur facilis aperiam.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Voluptas Esse Reiciendis</p>
        <div class="accordion__content">
            <p>Excepturi sapiente iusto et quia. Eum fuga est sed nostrum voluptatum laboriosam et. Repudiandae ut temporibus qui praesentium eum placeat velit provident. Perspiciatis et aliquam animi reprehenderit consequatur nobis iure aut delectus.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Ipsum Vero Sunt</p>
        <div class="accordion__content">
            <p>Ut voluptatem quo sed nostrum quos. Veritatis quo facere. Rem eveniet esse ad quo enim et harum. Doloremque sed repellendus ut nam qui.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Sed Quidem Ea</p>
        <div class="accordion__content">
            <p>Voluptatem sit ea voluptatibus inventore repudiandae corrupti quas dicta. Delectus fugit enim fuga sit nihil ut sit. Quod architecto et ea expedita perspiciatis facere. Accusamus odit provident rerum dolores sint. Odio totam quaerat cupiditate molestiae accusantium ut deserunt. Facilis et aut culpa dignissimos consequuntur nesciunt ut est.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Sunt Iste Distinctio</p>
        <div class="accordion__content">
            <p>Possimus non eum explicabo fuga sequi iste quia facilis. Voluptas voluptatem adipisci impedit similique eum deleniti repudiandae blanditiis sit. Alias et architecto labore. Aut sit in reiciendis ipsam nesciunt sed expedita voluptatibus. Similique veritatis odit ut ex.</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": "Distinctio in Et",
      "content": "Aliquam temporibus corporis ipsam et cupiditate consectetur id nam laudantium. Et et at quia a architecto optio. Minima quis laudantium quidem. Blanditiis ex est ducimus quibusdam impedit dolorum eveniet. Ipsa facere vel animi rerum labore. Et qui soluta qui."
    },
    {
      "label": "Minus Est Qui",
      "content": "Vitae commodi non id dignissimos libero quo ut dolorem consequatur. Eum recusandae eos laborum voluptate placeat repellat. Eligendi perferendis iusto vero quia. Aut consequuntur facilis aperiam."
    },
    {
      "label": "Voluptas Esse Reiciendis",
      "content": "Excepturi sapiente iusto et quia. Eum fuga est sed nostrum voluptatum laboriosam et. Repudiandae ut temporibus qui praesentium eum placeat velit provident. Perspiciatis et aliquam animi reprehenderit consequatur nobis iure aut delectus."
    },
    {
      "label": "Ipsum Vero Sunt",
      "content": "Ut voluptatem quo sed nostrum quos. Veritatis quo facere. Rem eveniet esse ad quo enim et harum. Doloremque sed repellendus ut nam qui."
    },
    {
      "label": "Sed Quidem Ea",
      "content": "Voluptatem sit ea voluptatibus inventore repudiandae corrupti quas dicta. Delectus fugit enim fuga sit nihil ut sit. Quod architecto et ea expedita perspiciatis facere. Accusamus odit provident rerum dolores sint. Odio totam quaerat cupiditate molestiae accusantium ut deserunt. Facilis et aut culpa dignissimos consequuntur nesciunt ut est."
    },
    {
      "label": "Sunt Iste Distinctio",
      "content": "Possimus non eum explicabo fuga sequi iste quia facilis. Voluptas voluptatem adipisci impedit similique eum deleniti repudiandae blanditiis sit. Alias et architecto labore. Aut sit in reiciendis ipsam nesciunt sed expedita voluptatibus. Similique veritatis odit ut ex."
    }
  ],
  "standAlone": false,
  "modifier": "inverse",
  "bodyClass": "has-blue-500-background-color"
}

There are no notes for this item.