<div class="js-component relative z-0 container component-spacer-margin">
<div class="w-full max-w-screen-md 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>
</div>
<div class="overflow-hidden">
<a href="./" class="flex items-center border-b border-grey-300 first:border-t first:border-grey-300 px-2 py-4 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg lg:text-xl text-bravo font-bold group-hover:underline">Site name</h3>
<h2 class="text-grey-600 font-light text-tiny lg:text-base">Page title or description
</div>
<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-nowrap top-0 left-0 -translate-x-full transition ease-in-out duration-500 group-hover:translate-x-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%] -mr-0.5">
<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-arrow"></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%] -mr-0.5">
<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-arrow"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="./" class="flex items-center border-b border-grey-300 first:border-t first:border-grey-300 px-2 py-4 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg lg:text-xl text-bravo font-bold group-hover:underline">Site name</h3>
<h2 class="text-grey-600 font-light text-tiny lg:text-base">Page title or description
</div>
<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-nowrap top-0 left-0 -translate-x-full transition ease-in-out duration-500 group-hover:translate-x-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%] -mr-0.5">
<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-arrow"></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%] -mr-0.5">
<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-arrow"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="./" class="flex items-center border-b border-grey-300 first:border-t first:border-grey-300 px-2 py-4 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg lg:text-xl text-bravo font-bold group-hover:underline">Site name</h3>
<h2 class="text-grey-600 font-light text-tiny lg:text-base">Page title or description
</div>
<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-nowrap top-0 left-0 -translate-x-full transition ease-in-out duration-500 group-hover:translate-x-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%] -mr-0.5">
<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-arrow"></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%] -mr-0.5">
<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-arrow"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="./" class="flex items-center border-b border-grey-300 first:border-t first:border-grey-300 px-2 py-4 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg lg:text-xl text-bravo font-bold group-hover:underline">Site name</h3>
<h2 class="text-grey-600 font-light text-tiny lg:text-base">Page title or description
</div>
<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-nowrap top-0 left-0 -translate-x-full transition ease-in-out duration-500 group-hover:translate-x-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%] -mr-0.5">
<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-arrow"></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%] -mr-0.5">
<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-arrow"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="w-full max-w-screen-md mx-auto">
{% render "@headline", headline %}
<div class="overflow-hidden">
{% for item in list %}
<a href="{{item.url}}" class="flex items-center border-b border-grey-300 first:border-t first:border-grey-300 px-2 py-4 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg lg:text-xl text-bravo font-bold group-hover:underline">{{item.label}}</h3>
<h2 class="text-grey-600 font-light text-tiny lg:text-base">{{item.heading}}
</div>
<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-nowrap top-0 left-0 -translate-x-full transition ease-in-out duration-500 group-hover:translate-x-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%] -mr-0.5">
{% render "@icon", { name: "icon-arrow", modifier: 'fill-current text-white w-4 h-4 transition-colors ease-in-out' } %}
</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%] -mr-0.5">
{% render "@icon", { name: "icon-arrow", modifier: 'fill-current text-white w-4 h-4 transition-colors ease-in-out' } %}
</div>
</div>
</div>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</div>
{
"siteName": "Gigaclear 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.",
"preheading": "Heading Label"
},
"list": [
{
"label": "Site name",
"heading": "Page title or description",
"url": "./"
},
{
"label": "Site name",
"heading": "Page title or description",
"url": "./"
},
{
"label": "Site name",
"heading": "Page title or description",
"url": "./"
},
{
"label": "Site name",
"heading": "Page title or description",
"url": "./"
}
]
}
No notes defined.