Pinecone

Accordion: Default 

<div class="spacer"></div>
<div class="accordion">
    <div class="accordion__pane">
        <p class="accordion__heading">Facilis Quidem Perspiciatis</p>
        <div class="accordion__content">
            <p>Sint qui velit libero. Earum suscipit fuga minima quod rerum et. Libero totam velit ipsam mollitia explicabo expedita et incidunt. Ex voluptas est recusandae autem sapiente minima nihil.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Est Et Est</p>
        <div class="accordion__content">
            <p>Soluta rerum aspernatur accusantium eveniet provident qui. In corrupti atque maxime. Recusandae nisi molestias qui.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Ex Sed Iste</p>
        <div class="accordion__content">
            <p>Doloribus amet voluptatem sequi suscipit ut est. Beatae voluptatibus dolor. Perferendis rem soluta quasi. Magni non impedit tempora perferendis corporis. Vel vero a non qui sapiente quam.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Quis Eum Laudantium</p>
        <div class="accordion__content">
            <p>Occaecati asperiores porro eum iusto ut. Soluta maxime aut nobis dolorum sed iste. Reprehenderit repudiandae voluptates aut quasi asperiores atque saepe. Impedit consequatur nam distinctio sapiente vitae et. Deleniti sed voluptatem quasi sed libero non repudiandae. Atque qui officia sint in et.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Ut Officiis Eum</p>
        <div class="accordion__content">
            <p>Voluptatem veniam sit rerum autem deserunt officiis itaque fugiat. Hic rem quia amet facilis qui. Consectetur aut corporis voluptas. Tempora libero temporibus tempore suscipit dolores. Enim qui blanditiis. Labore ut voluptatum adipisci eos sequi saepe neque veniam.</p>
        </div>
    </div>
    <div class="accordion__pane">
        <p class="accordion__heading">Amet Voluptatem Veniam</p>
        <div class="accordion__content">
            <p>Tempora voluptas molestiae. Suscipit sunt illo placeat occaecati vero non deleniti. Facere aut odio ullam ipsa molestiae voluptas numquam voluptas eveniet. Ex ut cumque consequuntur quae. Praesentium facere dolores repudiandae voluptatem. Facere et cumque sint assumenda modi aspernatur animi molestias.</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": "Facilis Quidem Perspiciatis",
      "content": "Sint qui velit libero. Earum suscipit fuga minima quod rerum et. Libero totam velit ipsam mollitia explicabo expedita et incidunt. Ex voluptas est recusandae autem sapiente minima nihil."
    },
    {
      "label": "Est Et Est",
      "content": "Soluta rerum aspernatur accusantium eveniet provident qui. In corrupti atque maxime. Recusandae nisi molestias qui."
    },
    {
      "label": "Ex Sed Iste",
      "content": "Doloribus amet voluptatem sequi suscipit ut est. Beatae voluptatibus dolor. Perferendis rem soluta quasi. Magni non impedit tempora perferendis corporis. Vel vero a non qui sapiente quam."
    },
    {
      "label": "Quis Eum Laudantium",
      "content": "Occaecati asperiores porro eum iusto ut. Soluta maxime aut nobis dolorum sed iste. Reprehenderit repudiandae voluptates aut quasi asperiores atque saepe. Impedit consequatur nam distinctio sapiente vitae et. Deleniti sed voluptatem quasi sed libero non repudiandae. Atque qui officia sint in et."
    },
    {
      "label": "Ut Officiis Eum",
      "content": "Voluptatem veniam sit rerum autem deserunt officiis itaque fugiat. Hic rem quia amet facilis qui. Consectetur aut corporis voluptas. Tempora libero temporibus tempore suscipit dolores. Enim qui blanditiis. Labore ut voluptatum adipisci eos sequi saepe neque veniam."
    },
    {
      "label": "Amet Voluptatem Veniam",
      "content": "Tempora voluptas molestiae. Suscipit sunt illo placeat occaecati vero non deleniti. Facere aut odio ullam ipsa molestiae voluptas numquam voluptas eveniet. Ex ut cumque consequuntur quae. Praesentium facere dolores repudiandae voluptatem. Facere et cumque sint assumenda modi aspernatur animi molestias."
    }
  ],
  "standAlone": false
}

There are no notes for this item.