<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-grey-50">
<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="" height="" srcset="/front-end/images/test-imagery/example5@16-10@1200w.jpg 1200w">
<img class="lazyload h-full object-cover w-full" alt="" width="" height="" 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-grey-50">
<div class="relative flex flex-col justify-center">
<h1 class="text-4xl xl:text-7xl font-bold font-heading leading-tight text-grey-800 ">A news detail page...</h1>
<div class="block prose xl:prose-xl mt-8 ">
<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-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800">
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="./article-list.html" class="hover:underline ">Articles</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="../../index.html" class="hover:underline truncate" aria-current="page">A news detail page</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="js-component relative z-0 component-spacer-margin">
<div class="container">
<div class="max-w-screen-md mx-auto">
<div class="prose xl:prose-lg max-w-none">
<h2>Sub heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra sed odio sagittis tristique. Proin interdum nunc magna. Praesent imperdiet magna et euismod scelerisque. In sollicitudin nulla quis accumsan auctor. Morbi at ultrices orci. In eu tristique est, ut laoreet nisl. Mauris sit amet neque non sem cursus accumsan et ut erat.</p>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="w-full max-w-screen-md mx-auto ">
<div class="w-24 h-24 bg-alpha rounded-full flex items-center justify-center ml-auto mr-auto mb-6">
<div class="w-10 h-10">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-quote"></use>
</svg>
</div>
</div>
<h2 class="text-lg md:text-4xl text-alpha text-center font-heading font-bold leading-tight whitespace-pre-line">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>
<span class="block font-bold text-xl mt-4 text-center whitespace-pre-line">Proin venenatis</span>
<span class="block text-base mt-2 text-center whitespace-pre-line">Lorem ipsum dolor</span>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container ">
<div class="w-full mx-auto gap-6 flex flex-col md:flex-row justify-center">
<div class="flex-1 flex justify-center">
<div class="w-full max-w-screen-lg">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-md 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 class="mt-3 text-grey-800">
Lorem ipsum dolor
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container">
<div class="max-w-screen-md mx-auto">
<div class="prose xl:prose-lg max-w-none">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra sed odio sagittis tristique. Proin interdum nunc magna. Praesent imperdiet magna et euismod scelerisque. In sollicitudin nulla quis accumsan auctor. Morbi at ultrices orci. In eu tristique est, ut laoreet nisl. <a href=''>Mauris sit amet neque non sem cursus accumsan et ut erat</a>.</p>
<ul>
<li>In eu tristique est</li>
<li>In eu tristique est</li>
<li>In eu tristique est</li>
</ul>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 my-8 lg:my-16">
<div class="container">
<div class="border-t pt-10 border-grey-300 max-w-screen-md mx-auto">
<div class="flex flex-col gap-6 lg:flex-row lg:gap-12">
<div class="flex-1">
<h2 class="text-2xl font-heading font-bold text-bravo mb-3">
Lorem ipsum title
</h2>
<div class="prose mb-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="mb-8">
<span class="font-bold text-bravo">Published date: </span> 05/10/2022
</div>
<div class="flex gap-4">
<div class="">
<a href="./.html" class="btn bg-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800">
Call to action
</a>
</div>
<div class="relative inline-block" data-vanilla-module="ShareButton">
<button aria-controls="SocialOptions" aria-expanded="false" class="js-trigger w-12 h-12 rounded-full bg-bravo hover:bg-bravo-600 transition ease-in-out duration-300 flex items-center justify-center relative">
<div class="w-5 h-5">
<svg class="w-full h-full fill-current text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-share"></use>
</svg>
</div>
<span class="sr-only">Share article</span>
</button>
<div id="SocialOptions" class="js-reveal absolute transition ease-in-out duration-300 left-0 -bottom-4 translate-y-full md:top-2/4 md:left-auto md:-translate-y-2/4 md:bottom-auto md:-right-4 shadow-lg md:translate-x-full w-32 opacity-0 invisible">
<div class="w-full p-3 justify-center bg-bravo z-0 relative rounded-md border-2 border-white">
<div class="triangle border-b-bravo md:border-b-transparent md:border-r-bravo absolute top-0 -translate-y-full -translate-x-2/4 left-2/4 md:top-2/4 md:-translate-y-2/4 md:left-0 md:-translate-x-full"></div>
<ul class="flex space-x-3 justify-around w-full">
<li>
<a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" class="block relative group">
<span class="sr-only">Share on facebook</span>
<div class="w-5 h-5">
<svg class="transition ease-in-out duration-300 fill-current text-white w-full h-full group-hover:fill-alpha" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-facebook"></use>
</svg>
</div>
</a>
</li>
<li>
<a href="https://twitter.com/intent/tweet?text=" class="block relative group" target="_blank">
<span class="sr-only">Share on twitter</span>
<div class="w-5 h-5">
<svg class="transition ease-in-out duration-300 fill-current text-white w-full h-full group-hover:fill-alpha" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-twitter"></use>
</svg>
</div>
</a>
</li>
<li>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=&source=" class="relative group" target="_blank">
<span class="sr-only">Share on linkedin</span>
<div class="w-5 h-5">
<svg class="transition ease-in-out duration-300 fill-current text-white w-full h-full group-hover:fill-alpha" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-linkedin"></use>
</svg>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="flex-1">
<div class="flex-1">
<h2 class="text-2xl font-heading font-bold text-bravo mb-4">Tags</h2>
<div class="flex gap-4 flex-wrap">
<a class="text-grey px-4 leading-none py-1.5 bg-grey-50 transition ease-in-out duration-300 rounded-md hover:bg-grey-200" href="./article-list?Example Single Filter=../../Events.html">
Events
</a>
<a class="text-grey px-4 leading-none py-1.5 bg-grey-50 transition ease-in-out duration-300 rounded-md hover:bg-grey-200" href="./article-list?Example Multi-Filter=../../Scotland.html">
Scotland
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl block font-heading font-bold leading-tight text-bravo">Discover more</h2>
</div>
<div class="block space-y-6 md:space-y-0 md:grid md:gap-6 md:grid-cols-3">
<div>
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 text-center items-center" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Our Products</h2>
<p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
<div class="w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 text-center items-center" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Our Services</h2>
<p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
<div class="w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 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>
</a>
</div>
<div>
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 text-center items-center" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Our Services</h2>
<p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
<div class="w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
</div>
</div>
{% render "@hero-variant-2--bravo-colour", hero %}
{% if breadcrumbs %}
{% render "@breadcrumbs", { breadcrumbs: breadcrumbs } %}
{% endif %}
{% for component in componentsList %}
{% render "@" + component.name, component.data, true %}
{% endfor %}
{
"siteName": "MentorKit Pattern Library",
"pageName": "News & insights",
"hero": {
"heading": "A news detail page...",
"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
}
],
"smMax": {
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
]
},
"mdMax": {
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
]
}
}
},
"breadcrumbs": [
{
"text": "Articles",
"url": "./article-list"
},
{
"text": "A news detail page",
"url": "/"
}
],
"componentsList": [
{
"name": "rich-text-component",
"data": {
"text": "<h2>Sub heading</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra sed odio sagittis tristique. Proin interdum nunc magna. Praesent imperdiet magna et euismod scelerisque. In sollicitudin nulla quis accumsan auctor. Morbi at ultrices orci. In eu tristique est, ut laoreet nisl. Mauris sit amet neque non sem cursus accumsan et ut erat.</p>"
}
},
{
"name": "quote-component",
"data": {
"quote": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"citation": "Ut enim ad minim veniam"
}
},
{
"name": "image-list-component"
},
{
"name": "rich-text-component",
"data": {
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra sed odio sagittis tristique. Proin interdum nunc magna. Praesent imperdiet magna et euismod scelerisque. In sollicitudin nulla quis accumsan auctor. Morbi at ultrices orci. In eu tristique est, ut laoreet nisl. <a href=''>Mauris sit amet neque non sem cursus accumsan et ut erat</a>.</p><ul><li>In eu tristique est</li><li>In eu tristique est</li><li>In eu tristique est</li></ul>"
}
},
{
"name": "article-sign-off-component"
},
{
"name": "cta-card-list-style-1-component"
}
]
}
No notes defined.