Pinecone

Accordion: Inverse 

<div class="spacer"></div>
<div class="accordion accordion--inverse">
    <div class="accordion__pane">
        <p class="accordion__heading">Aspernatur Et Laudantium</p>
        <div class="accordion__content">
            <p>Dicta ipsam quasi praesentium quaerat nisi est. Beatae eius consectetur voluptatem qui veritatis repellat expedita cumque libero. Impedit inventore maiores. Ut ut voluptas vel dolor reprehenderit.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Modi Quasi Explicabo</p>
        <div class="accordion__content">
            <p>Ut quisquam expedita consequuntur consequatur provident voluptatum officia doloremque qui. Et sed repudiandae eum et aut qui unde in. Quam fuga quis sunt est sed ut. Enim non quia quo aspernatur voluptas eos voluptate. Repudiandae qui tempore eius maiores nobis. Saepe sed blanditiis praesentium pariatur laborum.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Ea Aut Aut</p>
        <div class="accordion__content">
            <p>Eos accusantium repellat alias at est. Et eum recusandae quia. Est modi magnam ut quia dolor est. Et iste et et officiis. Perferendis distinctio minima deserunt non.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Perspiciatis Quia Distinctio</p>
        <div class="accordion__content">
            <p>Qui esse necessitatibus. Blanditiis quasi sunt quisquam beatae quo aut facilis possimus quam. Ut recusandae eum consequatur iure fugit aut nostrum impedit. Quae nesciunt dolor fugit cupiditate esse quasi consequatur voluptatibus non.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Reprehenderit Delectus at</p>
        <div class="accordion__content">
            <p>Voluptatem praesentium debitis aut sapiente vero ea. Minima sint necessitatibus non culpa quam voluptatibus aut. Tempore omnis repellendus dolore sit voluptas laborum nihil quia quae. Aut rerum qui ut consectetur. Magni sint et officia aut similique doloremque reprehenderit est aliquid. Dolores unde reiciendis nostrum voluptatibus reprehenderit qui quo voluptas id.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Ratione Laborum Facere</p>
        <div class="accordion__content">
            <p>Ut cumque rerum. Pariatur amet et minus dolor architecto aperiam natus beatae quo. Animi praesentium blanditiis deleniti quia quo corporis sint aperiam ab.</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": "Aspernatur Et Laudantium",
      "content": "Dicta ipsam quasi praesentium quaerat nisi est. Beatae eius consectetur voluptatem qui veritatis repellat expedita cumque libero. Impedit inventore maiores. Ut ut voluptas vel dolor reprehenderit."
    },
    {
      "label": "Modi Quasi Explicabo",
      "content": "Ut quisquam expedita consequuntur consequatur provident voluptatum officia doloremque qui. Et sed repudiandae eum et aut qui unde in. Quam fuga quis sunt est sed ut. Enim non quia quo aspernatur voluptas eos voluptate. Repudiandae qui tempore eius maiores nobis. Saepe sed blanditiis praesentium pariatur laborum."
    },
    {
      "label": "Ea Aut Aut",
      "content": "Eos accusantium repellat alias at est. Et eum recusandae quia. Est modi magnam ut quia dolor est. Et iste et et officiis. Perferendis distinctio minima deserunt non."
    },
    {
      "label": "Perspiciatis Quia Distinctio",
      "content": "Qui esse necessitatibus. Blanditiis quasi sunt quisquam beatae quo aut facilis possimus quam. Ut recusandae eum consequatur iure fugit aut nostrum impedit. Quae nesciunt dolor fugit cupiditate esse quasi consequatur voluptatibus non."
    },
    {
      "label": "Reprehenderit Delectus at",
      "content": "Voluptatem praesentium debitis aut sapiente vero ea. Minima sint necessitatibus non culpa quam voluptatibus aut. Tempore omnis repellendus dolore sit voluptas laborum nihil quia quae. Aut rerum qui ut consectetur. Magni sint et officia aut similique doloremque reprehenderit est aliquid. Dolores unde reiciendis nostrum voluptatibus reprehenderit qui quo voluptas id."
    },
    {
      "label": "Ratione Laborum Facere",
      "content": "Ut cumque rerum. Pariatur amet et minus dolor architecto aperiam natus beatae quo. Animi praesentium blanditiis deleniti quia quo corporis sint aperiam ab."
    }
  ],
  "standAlone": false,
  "modifier": "inverse",
  "bodyClass": "has-blue-500-background-color"
}

There are no notes for this item.