Pinecone

Accordion: Inverse 

<div class="spacer"></div>
<div class="accordion accordion--inverse">
    <div class="accordion__pane">
        <p class="accordion__heading">Beatae Error Voluptates</p>
        <div class="accordion__content">
            <p>Aut non aliquam. Doloremque voluptas recusandae atque perferendis maxime consequatur dolor. Minima ratione voluptas placeat. Architecto aut et dolore at dicta quo. Voluptatem ducimus quia. Est vel qui dignissimos minima.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Id Praesentium Atque</p>
        <div class="accordion__content">
            <p>Atque sint ratione rerum incidunt tempore id. Mollitia aliquid nulla ducimus est enim ut quos. Consequatur dolores doloribus. Eum autem magni quia aut. Qui dolores qui.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Dolor Non Est</p>
        <div class="accordion__content">
            <p>Praesentium voluptas et odit et hic molestias delectus. Esse qui atque explicabo labore voluptatem. Quos dolorem est illum autem sit voluptate earum qui et. Ut tempore ut commodi veniam qui facilis. Occaecati at nemo commodi.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Quam Autem Accusantium</p>
        <div class="accordion__content">
            <p>In perferendis esse. At ullam cupiditate quibusdam ipsam non odio beatae vero occaecati. Inventore tempore aut.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Sint Dolorem Molestiae</p>
        <div class="accordion__content">
            <p>Autem sed alias consequatur nisi in est blanditiis voluptates numquam. Quibusdam voluptas distinctio. Nemo quam vel. Optio impedit et. Voluptas neque ut. Sed suscipit quidem.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Minus Ratione Doloremque</p>
        <div class="accordion__content">
            <p>Cupiditate velit molestias eaque. Numquam accusantium ipsam quas et quia. A et amet voluptatem minima beatae. Nostrum quod sed occaecati atque reiciendis eveniet vel illum voluptate. Ex aperiam dolorem sequi veniam. Quia quo aperiam nihil sit.</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": "Beatae Error Voluptates",
      "content": "Aut non aliquam. Doloremque voluptas recusandae atque perferendis maxime consequatur dolor. Minima ratione voluptas placeat. Architecto aut et dolore at dicta quo. Voluptatem ducimus quia. Est vel qui dignissimos minima."
    },
    {
      "label": "Id Praesentium Atque",
      "content": "Atque sint ratione rerum incidunt tempore id. Mollitia aliquid nulla ducimus est enim ut quos. Consequatur dolores doloribus. Eum autem magni quia aut. Qui dolores qui."
    },
    {
      "label": "Dolor Non Est",
      "content": "Praesentium voluptas et odit et hic molestias delectus. Esse qui atque explicabo labore voluptatem. Quos dolorem est illum autem sit voluptate earum qui et. Ut tempore ut commodi veniam qui facilis. Occaecati at nemo commodi."
    },
    {
      "label": "Quam Autem Accusantium",
      "content": "In perferendis esse. At ullam cupiditate quibusdam ipsam non odio beatae vero occaecati. Inventore tempore aut."
    },
    {
      "label": "Sint Dolorem Molestiae",
      "content": "Autem sed alias consequatur nisi in est blanditiis voluptates numquam. Quibusdam voluptas distinctio. Nemo quam vel. Optio impedit et. Voluptas neque ut. Sed suscipit quidem."
    },
    {
      "label": "Minus Ratione Doloremque",
      "content": "Cupiditate velit molestias eaque. Numquam accusantium ipsam quas et quia. A et amet voluptatem minima beatae. Nostrum quod sed occaecati atque reiciendis eveniet vel illum voluptate. Ex aperiam dolorem sequi veniam. Quia quo aperiam nihil sit."
    }
  ],
  "standAlone": false,
  "modifier": "inverse",
  "bodyClass": "has-blue-500-background-color"
}

There are no notes for this item.