<div class="js-component relative z-0 overflow-hidden lg:overflow-visible bg-bkg component-spacer-padding" data-theme="red" data-mode="dark">
<div class="absolute inset-0 overflow-hidden pointer-events-none z-0 opacity-90">
<div class="absolute bottom-0 -left-4 w-1/3">
<svg class="text-button-2-surface w-full h-auto" viewBox="0 0 729 453" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<g clip-path="url(#clip0_508_3879)">
<path d="M223.062 459.782L271.131 371.912" stroke="currentColor" stroke-width="18.3701" />
<path d="M293.484 459.782L341.553 371.912" stroke="currentColor" stroke-width="15.3084" />
<path d="M363.906 459.782L411.975 371.912" stroke="currentColor" stroke-width="12.2467" />
<path d="M434.32 459.782L482.389 371.912" stroke="currentColor" stroke-width="9.18503" />
<path d="M504.742 459.782L552.811 371.912" stroke="currentColor" stroke-width="7.34802" />
<path d="M575.156 459.782L623.225 371.912" stroke="currentColor" stroke-width="4.89868" />
<path d="M645.578 459.782L693.646 371.912" stroke="currentColor" stroke-width="3.06168" />
<path d="M715.992 459.782L764.061 371.912" stroke="currentColor" stroke-width="2.44283" />
<path d="M152.648 459.782L200.717 371.912" stroke="currentColor" stroke-width="21.4317" />
<path d="M82.2266 459.782L130.295 371.912" stroke="currentColor" stroke-width="24.4934" />
<path d="M11.8047 459.782L59.873 371.912" stroke="currentColor" stroke-width="27.5551" />
</g>
<g clip-path="url(#clip1_508_3879)">
<path d="M223.883 360.441L271.951 272.571" stroke="currentColor" stroke-width="18.3701" />
<path d="M294.297 360.441L342.365 272.571" stroke="currentColor" stroke-width="15.3084" />
<path d="M364.719 360.441L412.787 272.571" stroke="currentColor" stroke-width="12.2467" />
<path d="M435.133 360.441L483.201 272.571" stroke="currentColor" stroke-width="9.18503" />
<path d="M505.555 360.441L553.623 272.571" stroke="currentColor" stroke-width="7.34802" />
<path d="M575.977 360.441L624.045 272.571" stroke="currentColor" stroke-width="4.89868" />
<path d="M646.391 360.441L694.459 272.571" stroke="currentColor" stroke-width="3.06168" />
<path d="M716.805 360.441L764.873 272.571" stroke="currentColor" stroke-width="2.44283" />
<path d="M153.461 360.441L201.529 272.571" stroke="currentColor" stroke-width="21.4317" />
<path d="M83.0469 360.441L131.115 272.571" stroke="currentColor" stroke-width="24.4934" />
<path d="M12.625 360.441L60.6933 272.571" stroke="currentColor" stroke-width="24.4934" />
</g>
<g clip-path="url(#clip2_508_3879)">
<path d="M233.258 260.548L281.326 172.678" stroke="currentColor" stroke-width="11.022" />
<path d="M303.672 260.548L351.74 172.678" stroke="currentColor" stroke-width="9.79736" />
<path d="M374.094 260.548L422.162 172.678" stroke="currentColor" stroke-width="9.18503" />
<path d="M444.516 260.548L492.584 172.678" stroke="currentColor" stroke-width="7.34802" />
<path d="M514.93 260.548L562.998 172.678" stroke="currentColor" stroke-width="4.89868" />
<path d="M585.352 260.548L633.42 172.678" stroke="currentColor" stroke-width="3.06168" />
<path d="M655.766 260.548L703.834 172.678" stroke="currentColor" stroke-width="1.83701" />
<path d="M726.188 260.548L774.256 172.678" stroke="currentColor" stroke-width="1.62855" />
<path d="M162.836 260.548L210.904 172.678" stroke="currentColor" stroke-width="13.4714" />
<path d="M92.4219 260.548L140.49 172.678" stroke="currentColor" stroke-width="15.3084" />
<path d="M22 260.548L70.0683 172.678" stroke="currentColor" stroke-width="18.3701" />
</g>
<g clip-path="url(#clip3_508_3879)">
<path d="M234.07 174.209L282.139 86.3394" stroke="currentColor" stroke-width="7.34802" />
<path d="M304.492 174.209L352.561 86.3394" stroke="currentColor" stroke-width="6.12335" />
<path d="M374.914 174.209L422.982 86.3394" stroke="currentColor" stroke-width="4.89868" />
<path d="M445.328 174.209L493.396 86.3394" stroke="currentColor" stroke-width="3.67401" />
<path d="M515.742 174.209L563.811 86.3394" stroke="currentColor" stroke-width="3.06168" />
<path d="M586.164 174.209L634.232 86.3394" stroke="currentColor" stroke-width="2.44934" />
<path d="M656.578 174.209L704.646 86.3394" stroke="currentColor" stroke-width="1.22467" />
<path d="M727 174.209L775.068 86.3394" stroke="currentColor" stroke-width="0.814276" />
<path d="M163.648 174.209L211.717 86.3394" stroke="currentColor" stroke-width="11.022" />
<path d="M93.2344 174.209L141.303 86.3394" stroke="currentColor" stroke-width="12.2467" />
<path d="M22.8203 174.209L70.8886 86.3394" stroke="currentColor" stroke-width="12.2467" />
</g>
<g clip-path="url(#clip4_508_3879)">
<path d="M235.695 81.1348L283.764 -6.73534" stroke="currentColor" stroke-width="4.28635" />
<path d="M306.117 81.1348L354.186 -6.73534" stroke="currentColor" stroke-width="3.67401" />
<path d="M376.539 81.1348L424.607 -6.73534" stroke="currentColor" stroke-width="3.06168" />
<path d="M446.953 81.1348L495.021 -6.73534" stroke="currentColor" stroke-width="2.44934" />
<path d="M517.375 81.1348L565.443 -6.73534" stroke="currentColor" stroke-width="1.83701" />
<path d="M587.797 81.1348L635.865 -6.73534" stroke="currentColor" stroke-width="1.22467" />
<path d="M658.211 81.1348L706.279 -6.73534" stroke="currentColor" stroke-width="0.612335" />
<path d="M728.633 81.1348L776.701 -6.73534" stroke="currentColor" stroke-width="0.407138" />
<path d="M165.281 81.1348L213.35 -6.73534" stroke="currentColor" stroke-width="4.89868" />
<path d="M94.8672 81.1348L142.936 -6.73534" stroke="currentColor" stroke-width="5.51102" />
<path d="M24.4453 81.1348L72.5136 -6.73534" stroke="currentColor" stroke-width="6.12335" />
</g>
<defs>
<clipPath id="clip0_508_3879">
<rect width="745.062" height="74.0991" fill="white" transform="translate(0 378.648)" />
</clipPath>
<clipPath id="clip1_508_3879">
<rect width="745.062" height="73.2848" fill="white" transform="translate(0 279.307)" />
</clipPath>
<clipPath id="clip2_508_3879">
<rect width="750.111" height="73.4802" fill="white" transform="translate(0.382812 179.414)" />
</clipPath>
<clipPath id="clip3_508_3879">
<rect width="750.111" height="73.4802" fill="white" transform="translate(0.382812 93.0747)" />
</clipPath>
<clipPath id="clip4_508_3879">
<rect width="750.111" height="73.4802" fill="white" transform="translate(0.382812)" />
</clipPath>
</defs>
</svg>
</div>
</div>
<div class="container ">
<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">News & insights</h2>
</div>
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{"perPage":1,"mediaQuery":"min","pagination":true,"arrows":false,"gap":"1.5rem","padding":{"right":"4.5rem"},"breakpoints":{"768":{"perPage":2,"mediaQuery":"min","pagination":true,"arrows":false,"gap":"1.5rem","padding":{"right":"0rem"}},"1024":{"destroy":true}}}'>
<div class="splide__track !overflow-visible">
<div class="lg:!grid lg:!gap-6 lg:!grid-cols-4 splide__list">
<div class="splide__slide" data-theme="red" data-mode=" ">
<a href="" class="bg-white 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="absolute top-0 left-6 xl:left-8 z-10">
<div class="tag bg-heading px-2 py-1 text-sm text-white rounded-b-sm">
News
</div>
</div>
<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/example4@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@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">
<div class="text-sm mb-2 font-semibold text-grey-500 flex items-center gap-1">
<span>23 April 2026</span>
</div>
<h2 class="relative text-xl text-grey font-bold leading-tight pb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
</div>
</a>
</div>
<div class="splide__slide" data-theme="red" data-mode=" ">
<a href="" class="bg-white 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="absolute top-0 left-6 xl:left-8 z-10">
<div class="tag bg-heading px-2 py-1 text-sm text-white rounded-b-sm">
News
</div>
</div>
<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">
<div class="text-sm mb-2 font-semibold text-grey-500 flex items-center gap-1">
<span>23 April 2026</span>
</div>
<h2 class="relative text-xl text-grey font-bold leading-tight pb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
</div>
</a>
</div>
<div class="splide__slide" data-theme="red" data-mode=" ">
<a href="" class="bg-white 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="absolute top-0 left-6 xl:left-8 z-10">
<div class="tag bg-heading px-2 py-1 text-sm text-white rounded-b-sm">
News
</div>
</div>
<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">
<div class="text-sm mb-2 font-semibold text-grey-500 flex items-center gap-1">
<span>23 April 2026</span>
</div>
<h2 class="relative text-xl text-grey font-bold leading-tight pb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
</div>
</a>
</div>
<div class="splide__slide" data-theme="red" data-mode=" ">
<a href="" class="bg-white 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="absolute top-0 left-6 xl:left-8 z-10">
<div class="tag bg-heading px-2 py-1 text-sm text-white rounded-b-sm">
News
</div>
</div>
<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">
<div class="text-sm mb-2 font-semibold text-grey-500 flex items-center gap-1">
<span>23 April 2026</span>
</div>
<h2 class="relative text-xl text-grey font-bold leading-tight pb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 overflow-hidden lg:overflow-visible bg-bkg component-spacer-padding" {% 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 ">
{% render "@headline", headline %}
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{{ sliderData | dump | safe }}'>
<div class="splide__track !overflow-visible">
<div class="lg:!grid lg:!gap-6 lg:!grid-cols-4 splide__list">
{% for item in cardList %}
<div class="splide__slide" {% if dataTheme %}data-theme="{{ dataTheme }}"{% endif %} data-mode=" ">
{% render "@content-card--date", {
heading: item.heading,
image: item.image, copy: '',
tag: item.tag,
showArrow: false,
news: item.news,
event: item.event,
whiteBg: true
}, true %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{
"siteName": "UCEA",
"dataTheme": "red",
"dataMode": "dark",
"pattern": "diagonal-pattern",
"patternClass": "absolute bottom-0 -left-4 w-1/3",
"headline": {
"heading": "News & insights"
},
"cardList": [
{
"news": true,
"heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"tag": {
"tag": "true",
"text": "News",
"url": "./index"
},
"image": {
"src": "images/test-imagery/example4@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example4@16-10@1200w.jpg",
"size": "1200"
}
]
}
},
{
"news": true,
"heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"tag": {
"tag": "true",
"text": "News",
"url": "./index"
},
"image": {
"src": "images/test-imagery/example3@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example3@16-10@1200w.jpg",
"size": "1200"
}
]
}
},
{
"news": true,
"heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"tag": {
"tag": "true",
"text": "News",
"url": "./index"
},
"image": {
"src": "images/test-imagery/example2@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example2@16-10@1200w.jpg",
"size": "1200"
}
]
}
},
{
"news": true,
"heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"tag": {
"tag": "true",
"text": "News",
"url": "./index"
},
"image": {
"src": "images/test-imagery/example1@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example1@16-10@1200w.jpg",
"size": "1200"
}
]
}
}
],
"sliderData": {
"perPage": 1,
"mediaQuery": "min",
"pagination": true,
"arrows": false,
"gap": "1.5rem",
"padding": {
"right": "4.5rem"
},
"breakpoints": {
"768": {
"perPage": 2,
"mediaQuery": "min",
"pagination": true,
"arrows": false,
"gap": "1.5rem",
"padding": {
"right": "0rem"
}
},
"1024": {
"destroy": true
}
}
}
}
No notes defined.