<div class="js-component relative component-spacer-padding">
<div class="bg-grey-gradient absolute top-0 left-0 w-full h-full angled-mask-media-content z-0"></div>
<div class="container relative">
<div class="max-w-screen-xl mx-auto">
<div class="text-center mb-10 lg:mb-16">
<div>
<div class="uppercase text-grey-600 mb-3 font-semibold">
<p>Heading Label</p>
</div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Lorem ipsum dolor</h2>
</div>
<div class="">
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl 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 class="mt-12">
<a href="./index.html" class="btn group bg-alpha text-white border-2 border-alpha">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="relative z-0 rounded-2xl lg:order-none lg:row-start-1 lg:col-start-8 lg:col-end-16 lg:angled-mask">
<picture class="block overflow-hidden h-full rounded-2xl w-full">
<img class="lazyload h-full object-cover rounded-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-10@1200w.jpg">
</picture>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container">
<div class="max-w-screen-lg mx-auto">
<div class="prose prose-rte max-w-none">
<h2>Terms and conditions</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>uisque ullamcorper, neque at consequat laoreet, magna nulla ultricies elit, vitae luctus nisl lorem eu nunc.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin" data-vanilla-module="Accordion">
<div>
<div class="">
<div class="">
<div class="text-center mb-10 lg:mb-16">
<div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Lorem ipsum dolor</h2>
</div>
<div class="">
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl 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>
<div class="js-accordion-button-list ">
<div class="border-b border-grey-300 first:border-t first: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 lg:py-8 transition" aria-expanded="false">
<p class="text-xl lg:text-4xl text-bravo transition-colors ease-in-out group-hover:underline group-hover:decoration-1 text-left pr-4 max-w-5xl">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-col flex-nowrap top-0 left-0 -translate-y-full transition ease-in-out duration-500 group-hover:translate-y-0">
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
<div id="accordion-panel-1" aria-labelledby="accordion-button-1" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block max-w-5xl">
<div class="js-accordion-item-content pb-6 lg:pb-8">
<div class="prose prose-rte 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 border-grey-300 first:border-t first: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 lg:py-8 transition" aria-expanded="false">
<p class="text-xl lg:text-4xl text-bravo transition-colors ease-in-out group-hover:underline group-hover:decoration-1 text-left pr-4 max-w-5xl">Title Two</p>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-col flex-nowrap top-0 left-0 -translate-y-full transition ease-in-out duration-500 group-hover:translate-y-0">
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
<div id="accordion-panel-2" aria-labelledby="accordion-button-2" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block max-w-5xl">
<div class="js-accordion-item-content pb-6 lg:pb-8">
<div class="prose prose-rte 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 border-grey-300 first:border-t first: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 lg:py-8 transition" aria-expanded="false">
<p class="text-xl lg:text-4xl text-bravo transition-colors ease-in-out group-hover:underline group-hover:decoration-1 text-left pr-4 max-w-5xl">Title Three</p>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-col flex-nowrap top-0 left-0 -translate-y-full transition ease-in-out duration-500 group-hover:translate-y-0">
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
<div id="accordion-panel-3" aria-labelledby="accordion-button-3" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block max-w-5xl">
<div class="js-accordion-item-content pb-6 lg:pb-8">
<div class="prose prose-rte 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>
{% for component in componentsList %}
{% render "@" + component.name, component.data, true %}
{% endfor %}
{
"siteName": "Gigaclear Pattern Library",
"pageName": "Contact Us",
"activeSection": "personal",
"staticHeader": true,
"componentsList": [
{
"name": "media-content-panel-style-2-component--grey-background"
},
{
"name": "rich-text-component",
"data": {
"text": "<h2>Terms and conditions</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p><ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li><li>uisque ullamcorper, neque at consequat laoreet, magna nulla ultricies elit, vitae luctus nisl lorem eu nunc.</li></ul>"
}
},
{
"name": "accordion-component",
"data": {
"text": "<h2>Terms and conditions</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p><ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li><li>uisque ullamcorper, neque at consequat laoreet, magna nulla ultricies elit, vitae luctus nisl lorem eu nunc.</li></ul>"
}
}
]
}
No notes defined.