<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/example8@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/example8@16-6@2000w.jpg 1200w" data-src="/front-end/images/test-imagery/example8@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-6 py-7 lg:px-12 lg:py-13 md:w-96 lg:w-[420px] xl:w-[580px] relative rounded-3xl bg-grey-50">
<div class="relative flex flex-col justify-center z-20">
<h1 class="text-5xl xl:text-9xl font-medium font-heading leading-none text-bravo-900 ">A news detail page...</h1>
<div class="block prose prose-p:font-light prose-lg lg:prose:xl prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl mt-6 ">
<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 group bg-alpha-700 text-white border-2 border-alpha-700">
<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#icon-chevron"></use>
</svg>
</div>
</a>
</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 prose-rte 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 container component-spacer-margin">
<div class="w-full max-w-screen-md mx-auto ">
<div class="space-y-6 px-4">
<div class="relative">
<div class="absolute -top-4 -left-5 md:-left-7 z-0">
<svg class="fill-current w-14 h-9 text-grey-100 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-quote"></use>
</svg>
</div>
<h2 class="relative z-10 text-1xl md:text-4xl text-bravo-900 font-heading font-medium 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>
<div class="absolute -bottom-5 -right-7 z-0">
<svg class="fill-current w-14 h-9 text-grey-100 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-quote"></use>
</svg>
</div>
</div>
<div class="relative z-10">
<span class="font-bold text-xl whitespace-pre-line">Paul Ferrito</span>
<span class="text-base whitespace-pre-line"> - Drain Technology</span>
</div>
</div>
</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-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@16-10@1200w.jpg">
</picture>
<div class="mt-3 text-bravo-900">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</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 prose-rte 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-4 border-grey-500 max-w-screen-lg mx-auto">
<div class="flex flex-col gap-6 lg:flex-row lg:gap-12 items-center">
<div class="flex-1">
<ul class="mt-4 flex gap-1">
<div class="tag bg-charlie text-bravo-900 w-max py-px px-2 rounded-full text-tiny font-heading uppercase">
Event
</div>
<div class="tag bg-grey-100 text-bravo-900 w-max py-px px-2 rounded-full text-tiny font-heading uppercase">
Tag name
</div>
</ul>
</div>
<div class="text-tiny text-bravo-900">15 Dec 2023</div>
<div class="flex-1 lg:text-right">
<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-900 hover:bg-bravo-800 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 top-2/4 md:left-auto -translate-y-2/4 bottom-auto right-48 shadow-lg translate-x-full w-32 opacity-0 invisible">
<div class="w-full p-3 justify-center bg-bravo z-0 relative rounded-2xl border-2 border-white">
<div class="triangle rotate-45 border-t-bravo border-r-bravo absolute top-2/4 -translate-y-2/4 left-[130px] -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>
</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 lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">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-100 hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center text-center items-center flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-2xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Our Products</h2>
<p class="mt-2 text-bravo-900 ">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 grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg 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-100 hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center text-center items-center flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-2xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Our Services</h2>
<p class="mt-2 text-bravo-900 ">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 grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg 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/example11@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="bg-grey-100 hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center text-center items-center flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-2xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Our Services</h2>
<p class="mt-2 text-bravo-900 ">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 grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg 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-background", hero %}
{% for component in componentsList %}
{% render "@" + component.name, component.data, true %}
{% endfor %}
{
"siteName": "BIR 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/example8@16-6@2000w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example8@16-6@2000w.jpg",
"size": 1200
}
],
"smMax": {
"srcSet": [
{
"url": "images/test-imagery/example8@16-10@1200w.jpg",
"size": 1200
}
]
},
"mdMax": {
"srcSet": [
{
"url": "images/test-imagery/example8@16-10@1200w.jpg",
"size": 1200
}
]
}
}
},
"breadcrumbs": [
{
"text": "Articles",
"url": "./news"
},
{
"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.