<div class="js-component md:bg-grey-50 relative block md:grid grid-cols-1 auto-rows-auto md:grid-cols-1 md:grid-rows-1 overflow-hidden z-0 bg-alpha">
<div class="md:col-start-1 md:col-end-md:row-start-1 md:row-end-2 relative hero-clip md:clip-path-none">
<picture class="block overflow-hidden h-full w-full">
<source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example5@16-10@1200w.jpg 1200w">
<img class="lazyload h-full object-cover w-full" alt="" width="1920" height="720" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example5@16-6@2000w.jpg 1200w" data-src="/front-end/images/test-imagery/example5@16-6@2000w.jpg">
</picture>
</div>
<div class="md:col-start-1 md:col-end-1 md:row-start-1 md:row-end-2 md:flex md:items-center relative -mt-3/10 md:mt-0">
<div class="mx-auto max-xsm:max-w-screen-xsm max-sm:max-w-screen-sm md:container">
<div class="px-4 md:px-20 md:w-8/12 lg:w-6/12 xl:w-5/12 pt-10 sm:pt-14 xl:pt-12 pb-10 sm:pb-14 lg:pb-12 relative rounded-lg bg-alpha">
<div class="relative flex flex-col justify-center">
<h1 class="text-4xl xl:text-7xl font-bold font-heading leading-tight text-white ">Products</h1>
<div class="block prose xl:prose-xl mt-8 prose-white">
<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-6">
<a href="./.html" class="btn bg-bravo text-white border-2 border-bravo hover:border-bravo-600 hover:bg-bravo-600">
Find out more
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<nav class=" items-center md:flex py-3 text-lg bg-grey-50 border-t border-b border-grey-300">
<ul class="container flex min-w-0">
<li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
<a href="./.html" class="hover:underline ">Lorem</a>
<div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
<svg class="w-full h-full fill-current text-grey-800 transform -rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</li>
<li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
<a href="./.html" class="hover:underline ">Ipsum</a>
<div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
<svg class="w-full h-full fill-current text-grey-800 transform -rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</li>
<li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
<a href="./.html" class="hover:underline truncate" aria-current="page">Dolor</a>
<div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
<svg class="w-full h-full fill-current text-grey-800 transform -rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</li>
</ul>
</nav>
<div class="min-h-[300px]" id="listing">
<div data-vue-module="ContentListing" data-search-configuration-api="/front-end/mock-json/products/searchConfiguration.json" data-root-nodes="1073,1023" data-search-configuration-id="1234"></div>
</div>
{% render "@hero-variant-2--alpha-colour", hero, true %}
{% if breadcrumbs %}
{% render "@breadcrumbs", { breadcrumbs: breadcrumbs } %}
{% endif %}
{% for component in componentsList %}
{% render "@" + component.name, component.data, true %}
{% endfor %}
{% render "@product-listing" %}
{
"siteName": "MentorKit Pattern Library",
"pageName": "Products",
"hero": {
"heading": "Products",
"caption": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
"link": {
"text": "Find out more",
"url": "./"
},
"image": {
"src": "images/test-imagery/example5@16-6@2000w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example5@16-6@2000w.jpg",
"size": 1200
}
],
"mdMax": {
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
]
}
}
},
"breadcrumbs": [
{
"text": "Lorem",
"url": "./"
},
{
"text": "Ipsum",
"url": "./"
},
{
"text": "Dolor",
"url": "./"
}
],
"componentsList": []
}
No notes defined.