<div class="js-component relative z-0 bg-white component-spacer-margin">
<div class="container z-10 relative">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-5xl xl:text-7xl block font-heading font-normal leading-tight text-heading">Discover more</h2>
<div class="prose xl:prose-lg mt-4 lg:mt-6 max-w-screen-sm mx-auto">
<p>UCEA and the HE trade unions have developed this stress and mental wellbeing resources pack for HE institutions.</p>
</div>
</div>
<div class="block space-y-6 md:space-y-0 md:grid md:gap-6 md:grid-cols-3">
<div data-mode="dark">
<a href="" class="bg-bkg-white-mix flex flex-col lg:h-full flex-1 transition ease-in-out duration-300 group overflow-hidden shadow-md hover:shadow-lg rounded-lg">
<div class="relative z-0 order-first ">
<div class="w-full aspect-[4/3] overflow-hidden">
<picture class="block overflow-hidden object-cover w-full h-full ">
<img class="lazyload w-full h-full object-cover transition ease-in-out duration-300 group-hover:scale-110 [&_img]:w-full [&_img]:h-full [&_img]:object-cover " 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>
<div class="flex flex-1 relative z-10 flex-col p-6 xl:p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl xl:text-3xl text-heading font-bold leading-tight pb-2">Employee Experience</h2>
<p class="py-2 text-body text-base xl:text-xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</a>
</div>
<div data-mode="dark">
<a href="" class="bg-bkg-white-mix flex flex-col lg:h-full flex-1 transition ease-in-out duration-300 group overflow-hidden shadow-md hover:shadow-lg rounded-lg">
<div class="relative z-0 order-first ">
<div class="w-full aspect-[4/3] overflow-hidden">
<picture class="block overflow-hidden object-cover w-full h-full ">
<img class="lazyload w-full h-full object-cover transition ease-in-out duration-300 group-hover:scale-110 [&_img]:w-full [&_img]:h-full [&_img]:object-cover " 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 class="flex flex-1 relative z-10 flex-col p-6 xl:p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl xl:text-3xl text-heading font-bold leading-tight pb-2">Employee Relations and Trade Unions</h2>
<p class="py-2 text-body text-base xl:text-xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</a>
</div>
<div data-mode="dark">
<a href="" class="bg-bkg-white-mix flex flex-col lg:h-full flex-1 transition ease-in-out duration-300 group overflow-hidden shadow-md hover:shadow-lg rounded-lg">
<div class="relative z-0 order-first ">
<div class="w-full aspect-[4/3] overflow-hidden">
<picture class="block overflow-hidden object-cover w-full h-full ">
<img class="lazyload w-full h-full object-cover transition ease-in-out duration-300 group-hover:scale-110 [&_img]:w-full [&_img]:h-full [&_img]:object-cover " 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>
<div class="flex flex-1 relative z-10 flex-col p-6 xl:p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl xl:text-3xl text-heading font-bold leading-tight pb-2">Equality and Pay Gaps</h2>
<p class="py-2 text-body text-base xl:text-xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</a>
</div>
</div>
</div>
</div>
{% if whiteBg %}
{% set bgColour = "bg-white component-spacer-margin" %}
{% else %}
{% set bgColour = "bg-bkg component-spacer-padding" %}
{% endif %}
<div
class="js-component relative z-0 {{ bgColour }}"
{% if dataTheme %}data-theme="{{ dataTheme }}"{% endif %}
{% if dataMode %}data-mode="{{ dataMode }}"{% endif %}
>
{% if pattern %}
<div class="absolute inset-0 overflow-hidden pointer-events-none z-0 opacity-90">
<div class="{{ patternClass or 'absolute bottom-0 left-0 w-full' }}">
{% render "@" + pattern, { modifier: "text-button-2-surface w-full h-auto", ariaHidden: true } %}
</div>
</div>
{% endif %}
<div class="container z-10 relative">
{% render "@headline", headline %}
<div class="block space-y-6 md:space-y-0 md:grid md:gap-6 md:grid-cols-3">
{% for item in ctaCardList %}
<div data-mode="dark">
{% render "@content-card", {
heading: item.heading,
image: item.image,
url: item.url,
copy: item.copy,
centerText: false,
showArrow: false
}, true %}
</div>
{% endfor %}
</div>
</div>
</div>
{
"siteName": "UCEA",
"pattern": "",
"patternClass": "absolute bottom-0 -left-4 w-1/3",
"headline": {
"heading": "Discover more",
"summary": "UCEA and the HE trade unions have developed this stress and mental wellbeing resources pack for HE institutions."
},
"ctaCardList": [
{
"heading": "Employee Experience",
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"image": {
"src": "images/test-imagery/example1@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example1@16-10@1200w.jpg",
"size": "1200"
}
]
}
},
{
"heading": "Employee Relations and Trade Unions",
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"image": {
"src": "images/test-imagery/example2@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example2@16-10@1200w.jpg",
"size": "1200"
}
]
}
},
{
"heading": "Equality and Pay Gaps",
"copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"image": {
"src": "images/test-imagery/example3@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example3@16-10@1200w.jpg",
"size": "1200"
}
]
}
}
],
"dataTheme": "",
"dataMode": "",
"whiteBg": true
}
No notes defined.