<div class="js-component relative z-0 container component-spacer-margin" data-vanilla-module="Accordion">
<div class="max-w-screen-md mx-auto ">
<div class="">
<div class="">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl block font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor</h2>
<div class="prose xl:prose-lg mt-4 lg:mt-6 max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="js-accordion-button-list ">
<div class="border-b-2 border-grey-300">
<button id="accordion-button-1" aria-controls="accordion-panel-1" class="js-accordion-item-button group peer font-heading font-bold leading-tight flex w-full items-center justify-between py-6 px-4 transition" aria-expanded="false">
<p class="text-xl text-bravo transition-colors ease-in-out group-hover:text-alpha text-left pr-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<div class="js-accordion-item-icon w-6 h-6 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
<svg class="fill-current text-bravo w-full h-full transition-colors ease-in-out group-hover:text-alpha">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</button>
<div id="accordion-panel-1" aria-labelledby="accordion-button-1" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block">
<div class="js-accordion-item-content p-4">
<div class="prose xl:prose-lg max-w-none">
<p><a href=''>Lorem Ipsum is simply dummy text of the printing and typesetting industry</a>. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<ul>
<li>In eu tristique est</li>
<li>In eu tristique est</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="border-b-2 border-grey-300">
<button id="accordion-button-2" aria-controls="accordion-panel-2" class="js-accordion-item-button group peer font-heading font-bold leading-tight flex w-full items-center justify-between py-6 px-4 transition" aria-expanded="false">
<p class="text-xl text-bravo transition-colors ease-in-out group-hover:text-alpha text-left pr-4">Title Two</p>
<div class="js-accordion-item-icon w-6 h-6 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
<svg class="fill-current text-bravo w-full h-full transition-colors ease-in-out group-hover:text-alpha">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</button>
<div id="accordion-panel-2" aria-labelledby="accordion-button-2" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block">
<div class="js-accordion-item-content p-4">
<div class="prose xl:prose-lg max-w-none">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam enim nunc, lobortis at tincidunt id, tempus a augue. Morbi vestibulum arcu maximus augue auctor, id finibus mauris suscipit. Praesent ante erat, molestie in facilisis in, ornare et sem. Morbi gravida faucibus nulla, id malesuada turpis placerat id. Aliquam at felis at diam volutpat dictum. Fusce sed orci sed quam pulvinar tempus vel nec dolor. Maecenas fermentum quam et arcu porttitor elementum. Sed tincidunt orci libero, in vehicula orci feugiat quis.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce maximus, quam non facilisis pellentesque, ante sapien tristique sapien, sed auctor arcu magna quis urna. Sed dictum felis sit amet quam rutrum maximus. Nulla et finibus nibh, vel finibus nisi. Integer leo metus, mattis nec lacus vitae, egestas ultricies ex. Fusce efficitur mauris metus, quis auctor turpis elementum eget. Duis mollis mattis ipsum sit amet interdum.Donec id ultricies erat. Aliquam molestie ante quis venenatis eleifend. Nullam ac feugiat nulla, quis varius risus. Morbi sollicitudin eget libero sit amet mollis. Etiam velit ex, pellentesque non mi eget, commodo mollis nunc. Fusce dolor sapien, ultricies ut enim consectetur, fringilla hendrerit nibh. Donec sodales ornare tempor. Morbi sit amet mi eu nisl porta consectetur.Phasellus vel efficitur quam, id scelerisque elit. Donec et nisl vulputate, tristique urna a, sodales metus. Curabitur scelerisque erat quis pulvinar faucibus. Proin odio nisl, rutrum in venenatis vitae, porttitor at urna. Etiam pellentesque nisl ac facilisis bibendum. Vestibulum ullamcorper velit eget convallis consectetur. Cras fringilla nibh tellus, et vestibulum sapien efficitur sit amet. Mauris pellentesque odio diam, vitae lacinia eros luctus ac. Proin mollis ac mi semper accumsan. Cras ut nibh justo.Donec vitae ex lectus. Donec id velit aliquet, ullamcorper purus a, viverra turpis. Praesent posuere tortor tellus, at accumsan nibh sodales eu. Phasellus arcu sapien, sollicitudin sit amet laoreet sit amet, tempus eget dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam facilisis, eros id facilisis consequat, nunc nibh convallis lectus, nec mattis augue sapien vel massa. Etiam placerat eu erat faucibus lacinia. </p>
</div>
</div>
</div>
</div>
<div class="border-b-2 border-grey-300">
<button id="accordion-button-3" aria-controls="accordion-panel-3" class="js-accordion-item-button group peer font-heading font-bold leading-tight flex w-full items-center justify-between py-6 px-4 transition" aria-expanded="false">
<p class="text-xl text-bravo transition-colors ease-in-out group-hover:text-alpha text-left pr-4">Title Three</p>
<div class="js-accordion-item-icon w-6 h-6 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
<svg class="fill-current text-bravo w-full h-full transition-colors ease-in-out group-hover:text-alpha">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</button>
<div id="accordion-panel-3" aria-labelledby="accordion-button-3" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block">
<div class="js-accordion-item-content p-4">
<div class="prose xl:prose-lg max-w-none">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin" data-vanilla-module="Accordion">
<div class="{% if not twoCols %}max-w-screen-md{% endif %} mx-auto {{componentModifier}}">
<div class="{% if twoCols %}lg:grid grid-flow-col lg:gap-x-14 xl:gap-x-28 gap-y-12 grid-cols-12{% endif %}">
<div class="{% if twoCols %}col-span-5{% endif %}">
{% render "@headline", headline %}
</div>
<div class="js-accordion-button-list {% if twoCols %}col-span-7 {% endif %}">
{% for item in list %}
<div class="border-b-2 border-grey-300">
<button id="accordion-button-{{item.id}}" aria-controls="accordion-panel-{{item.id}}" class="js-accordion-item-button group peer font-heading font-bold leading-tight flex w-full items-center justify-between py-6 px-4 transition" aria-expanded="false">
<p class="text-xl text-bravo transition-colors ease-in-out group-hover:text-alpha text-left pr-4">{{ item.tag }}</p>
<div class="js-accordion-item-icon w-6 h-6 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
{% render "@icon", { name: "icon-chevron", modifier: 'fill-current text-bravo w-full h-full transition-colors ease-in-out group-hover:text-alpha' } %}
</div>
</button>
<div id="accordion-panel-{{item.id}}" aria-labelledby="accordion-button-{{item.id}}" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block">
<div class="js-accordion-item-content p-4">
<div class="prose xl:prose-lg max-w-none">
{{ item.dropDown | safe }}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{
"siteName": "MentorKit Pattern Library",
"headline": {
"heading": "Lorem ipsum dolor",
"summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"textAlign": "center"
},
"list": [
{
"id": 1,
"tag": "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
"dropDown": "<p><a href=''>Lorem Ipsum is simply dummy text of the printing and typesetting industry</a>. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><ul><li>In eu tristique est</li><li>In eu tristique est</li><li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li></ul>"
},
{
"id": 2,
"tag": "Title Two",
"dropDown": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam enim nunc, lobortis at tincidunt id, tempus a augue. Morbi vestibulum arcu maximus augue auctor, id finibus mauris suscipit. Praesent ante erat, molestie in facilisis in, ornare et sem. Morbi gravida faucibus nulla, id malesuada turpis placerat id. Aliquam at felis at diam volutpat dictum. Fusce sed orci sed quam pulvinar tempus vel nec dolor. Maecenas fermentum quam et arcu porttitor elementum. Sed tincidunt orci libero, in vehicula orci feugiat quis.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce maximus, quam non facilisis pellentesque, ante sapien tristique sapien, sed auctor arcu magna quis urna. Sed dictum felis sit amet quam rutrum maximus. Nulla et finibus nibh, vel finibus nisi. Integer leo metus, mattis nec lacus vitae, egestas ultricies ex. Fusce efficitur mauris metus, quis auctor turpis elementum eget. Duis mollis mattis ipsum sit amet interdum.Donec id ultricies erat. Aliquam molestie ante quis venenatis eleifend. Nullam ac feugiat nulla, quis varius risus. Morbi sollicitudin eget libero sit amet mollis. Etiam velit ex, pellentesque non mi eget, commodo mollis nunc. Fusce dolor sapien, ultricies ut enim consectetur, fringilla hendrerit nibh. Donec sodales ornare tempor. Morbi sit amet mi eu nisl porta consectetur.Phasellus vel efficitur quam, id scelerisque elit. Donec et nisl vulputate, tristique urna a, sodales metus. Curabitur scelerisque erat quis pulvinar faucibus. Proin odio nisl, rutrum in venenatis vitae, porttitor at urna. Etiam pellentesque nisl ac facilisis bibendum. Vestibulum ullamcorper velit eget convallis consectetur. Cras fringilla nibh tellus, et vestibulum sapien efficitur sit amet. Mauris pellentesque odio diam, vitae lacinia eros luctus ac. Proin mollis ac mi semper accumsan. Cras ut nibh justo.Donec vitae ex lectus. Donec id velit aliquet, ullamcorper purus a, viverra turpis. Praesent posuere tortor tellus, at accumsan nibh sodales eu. Phasellus arcu sapien, sollicitudin sit amet laoreet sit amet, tempus eget dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam facilisis, eros id facilisis consequat, nunc nibh convallis lectus, nec mattis augue sapien vel massa. Etiam placerat eu erat faucibus lacinia. </p>"
},
{
"id": 3,
"tag": "Title Three",
"dropDown": "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>"
}
]
}
No notes defined.