Pinecone

Accordion: Inverse 

<div class="spacer"></div>
<div class="accordion accordion--inverse">
    <div class="accordion__pane">
        <p class="accordion__heading">Explicabo Sed Sunt</p>
        <div class="accordion__content">
            <p>Vitae aliquid maxime. Aspernatur fuga similique necessitatibus qui ut. Velit aut praesentium dicta maiores distinctio iste et et. Beatae et repudiandae necessitatibus sequi possimus dolor ea necessitatibus. Modi veniam aspernatur tenetur ipsa labore.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Et Totam Qui</p>
        <div class="accordion__content">
            <p>Reprehenderit necessitatibus numquam. Adipisci voluptatibus laudantium eos velit ut. Similique recusandae voluptatibus a quod nam. Accusantium necessitatibus et. Quas officia magnam molestiae earum sint aut.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Voluptatem Officiis Officiis</p>
        <div class="accordion__content">
            <p>Ut incidunt eius voluptatem. Quia beatae ut aliquid iste perspiciatis odit. Doloremque reprehenderit sapiente quod non et voluptas sit reiciendis. Velit velit est suscipit natus iure consequatur aperiam quis. Consequuntur laborum a qui ratione aperiam eum dolorem delectus vel.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Est Voluptas Qui</p>
        <div class="accordion__content">
            <p>Animi enim dolor architecto. Nihil recusandae consequatur qui. Labore sed laborum et ea molestias.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Enim Vel Velit</p>
        <div class="accordion__content">
            <p>Consequuntur neque eos. Nulla consequuntur odio. Magnam expedita et dolorem enim et voluptatem et. Perspiciatis ipsum aut.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Ut Quia Blanditiis</p>
        <div class="accordion__content">
            <p>Est quia nobis sed fugiat velit. Distinctio ipsa dicta totam est dicta aliquam vel enim. Ipsa voluptas aut possimus non non illum in qui. Cupiditate quos aut ut neque assumenda consectetur consequatur ad recusandae.</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": "Explicabo Sed Sunt",
      "content": "Vitae aliquid maxime. Aspernatur fuga similique necessitatibus qui ut. Velit aut praesentium dicta maiores distinctio iste et et. Beatae et repudiandae necessitatibus sequi possimus dolor ea necessitatibus. Modi veniam aspernatur tenetur ipsa labore."
    },
    {
      "label": "Et Totam Qui",
      "content": "Reprehenderit necessitatibus numquam. Adipisci voluptatibus laudantium eos velit ut. Similique recusandae voluptatibus a quod nam. Accusantium necessitatibus et. Quas officia magnam molestiae earum sint aut."
    },
    {
      "label": "Voluptatem Officiis Officiis",
      "content": "Ut incidunt eius voluptatem. Quia beatae ut aliquid iste perspiciatis odit. Doloremque reprehenderit sapiente quod non et voluptas sit reiciendis. Velit velit est suscipit natus iure consequatur aperiam quis. Consequuntur laborum a qui ratione aperiam eum dolorem delectus vel."
    },
    {
      "label": "Est Voluptas Qui",
      "content": "Animi enim dolor architecto. Nihil recusandae consequatur qui. Labore sed laborum et ea molestias."
    },
    {
      "label": "Enim Vel Velit",
      "content": "Consequuntur neque eos. Nulla consequuntur odio. Magnam expedita et dolorem enim et voluptatem et. Perspiciatis ipsum aut."
    },
    {
      "label": "Ut Quia Blanditiis",
      "content": "Est quia nobis sed fugiat velit. Distinctio ipsa dicta totam est dicta aliquam vel enim. Ipsa voluptas aut possimus non non illum in qui. Cupiditate quos aut ut neque assumenda consectetur consequatur ad recusandae."
    }
  ],
  "standAlone": false,
  "modifier": "inverse",
  "bodyClass": "has-blue-500-background-color"
}

There are no notes for this item.