<div class="js-component relative z-0 overflow-x-hidden w-full lg:grid lg:breakout-screen-lg xl:breakout-screen-xl 2xl:breakout-screen-2xl component-spacer-padding bg-white" data-theme="teal">
<div class="flex flex-col lg:col-start-2 lg:col-end-6 lg:row-start-1 z-50">
<div class="w-full max-w-screen-xsm sm:max-w-screen-sm md:max-w-screen-md lg:max-w-none sm:w-3/4 lg:w-11/12 lg:mx-0 px-4 xl:px-0 pb-4">
<h2 class="text-5xl xl:text-7xl mb-4 leading-tight font-heading text-heading">Upcoming events</h2>
<div class="mb-8 prose xl:prose-lg font-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed.</p>
</div>
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-2">
<div>
<a href="./event-list.html" class="btn bg-button-surface text-button-text border-2 border-button-surface hover:bg-button-surface-hover hover:border-button-surface-hover">
View all
</a>
</div>
</div>
</div>
</div>
</div>
<div class="w-full h-full overflow-hidden pl-4 pt-6 relative lg:row-start-1 lg:col-start-6 lg:col-end-15">
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{"perPage":1,"mediaQuery":"min","pagination":false,"arrows":true,"gap":"1.5rem","padding":{"right":"4.5rem"},"updateOnMove":true,"breakpoints":{"640":{"perPage":2,"arrows":true,"gap":"1.5rem","padding":{"right":"4.5rem"}},"1024":{"perPage":2,"arrows":true,"gap":"1.5rem","padding":{"right":"4.5rem"}},"1284":{"perPage":3,"arrows":true,"gap":"1rem","padding":{"right":"4.5rem"}}}}'>
<div class="splide__track !overflow-visible">
<div class="splide__list">
<div class="splide__slide" data-theme="teal" 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">
Event
</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="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-12@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@16-12@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 class="inline-flex w-4 h-4 shrink-0 text-grey-500" aria-hidden="true">
<svg class="fill-current w-full h-full -mt-0.5" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-calendar"></use>
</svg>
</span>
<span>1 July 2026</span>
</div>
<h2 class="relative text-xl text-grey font-bold leading-tight pb-2">Getting the most from UCEA membership</h2>
</div>
</a>
</div>
<div class="splide__slide" data-theme="teal" 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">
Event
</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="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example11@16-12@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@16-12@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 class="inline-flex w-4 h-4 shrink-0 text-grey-500" aria-hidden="true">
<svg class="fill-current w-full h-full -mt-0.5" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-calendar"></use>
</svg>
</span>
<span>1 July 2026</span>
</div>
<h2 class="relative text-xl text-grey font-bold leading-tight pb-2">Immigration HR Network meeting </h2>
</div>
</a>
</div>
<div class="splide__slide" data-theme="teal" 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">
Event
</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="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-12@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-12@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 class="inline-flex w-4 h-4 shrink-0 text-grey-500" aria-hidden="true">
<svg class="fill-current w-full h-full -mt-0.5" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-calendar"></use>
</svg>
</span>
<span>2 July 2026</span>
</div>
<h2 class="relative text-xl text-grey font-bold leading-tight pb-2">Introduction to workplace investigator skills workshop</h2>
</div>
</a>
</div>
<div class="splide__slide" data-theme="teal" data-mode="">
<a href="./event-detail--red-theme.html" 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">
Event
</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="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example5@16-12@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example5@16-12@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 class="inline-flex w-4 h-4 shrink-0 text-grey-500" aria-hidden="true">
<svg class="fill-current w-full h-full -mt-0.5" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-calendar"></use>
</svg>
</span>
<span>21 October 2026</span>
</div>
<h2 class="relative text-xl text-grey font-bold leading-tight pb-2">UCEA Reward Network Meeting - Total Reward Statement (TRS)</h2>
</div>
</a>
</div>
</div>
</div>
<div class="flex items-center lg:w-8/12 mt-10">
<div class="splide__arrows flex justify-center items-center lg:block">
<div class="flex gap-2">
<button class="group splide__arrow splide__arrow--prev w-8 h-8 transition ease-in-out duration-300 inline-flex items-center justify-center bg-button-2-surface hover:bg-button-2-surface-hover rounded-full">
<span class="rotate-90 inline-flex items-center justify-center">
<svg class="w-4 h-3 fill-current block rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</span>
<span class="sr-only">Previous</span>
</button>
<button class="group splide__arrow splide__arrow--next w-8 h-8 transition ease-in-out duration-300 inline-flex items-center justify-center bg-button-2-surface hover:bg-button-2-surface-hover rounded-full">
<span class="-rotate-90 inline-flex items-center justify-center text-button-2-arrow">
<svg class="w-4 h-3 fill-current block rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
<div class="flex flex-1 justify-center items-center px-4">
<div class="w-full">
<div class="bg-[color-mix(in_srgb,var(--color-heading)_50%,transparent)] rounded-full splide-progress-bar overflow-hidden">
<div class="h-2 w-0 bg-button-2-surface transition-all ease-in-out duration-300 splide-progress-bar__step"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% if whiteBg %}
{% set bgColour = "bg-white" %}
{% else %}
{% set bgColour = "bg-bkg" %}
{% endif %}
<div class="js-component relative z-0 overflow-x-hidden w-full lg:grid lg:breakout-screen-lg xl:breakout-screen-xl 2xl:breakout-screen-2xl component-spacer-padding {{ 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="flex flex-col lg:col-start-2 lg:col-end-6 lg:row-start-1 z-50">
<div class="w-full max-w-screen-xsm sm:max-w-screen-sm md:max-w-screen-md lg:max-w-none sm:w-3/4 lg:w-11/12 lg:mx-0 px-4 xl:px-0 pb-4">
<h2 class="text-5xl xl:text-7xl mb-4 leading-tight font-heading text-heading">{{heading}}</h2>
<div class="mb-8 prose xl:prose-lg font-body">
<p>{{description}}</p>
</div>
<div class="flex flex-col gap-2">
{% if link %}
{% set buttonColour = buttonColour or "light" %}
<div class="flex flex-col gap-2">
<div>
{% render "@button--" + buttonColour, link, true %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
<div class="w-full h-full overflow-hidden pl-4 pt-6 relative lg:row-start-1 lg:col-start-6 lg:col-end-15">
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{{ sliderData | dump | safe }}'>
<div class="splide__track !overflow-visible">
<div class="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,
date: item.date,
image: item.image,
url: item.url,
tag: item.tag,
whiteBg: true,
copy: item.copy or false,
event: item.event or event,
news: item.news or news,
showArrow: false
}, true %}
</div>
{% endfor %}
</div>
</div>
<div class="flex items-center lg:w-8/12 mt-10">
<div class="splide__arrows flex justify-center items-center lg:block">
<div class="flex gap-2">
<button class="group splide__arrow splide__arrow--prev w-8 h-8 {{ buttonClass }} transition ease-in-out duration-300 inline-flex items-center justify-center bg-button-2-surface hover:bg-button-2-surface-hover rounded-full">
<span class="rotate-90 inline-flex items-center justify-center">
{% render "@icon", { name: "icon-chevron", modifier: "w-4 h-3 fill-current block rotate-90", ariaHidden: true } %}
</span>
<span class="sr-only">Previous</span>
</button>
<button class="group splide__arrow splide__arrow--next w-8 h-8 {{ buttonClass }} transition ease-in-out duration-300 inline-flex items-center justify-center bg-button-2-surface hover:bg-button-2-surface-hover rounded-full">
<span class="-rotate-90 inline-flex items-center justify-center text-button-2-arrow">
{% render "@icon", { name: "icon-chevron", modifier: "w-4 h-3 fill-current block rotate-90", ariaHidden: true } %}
</span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
<div class="flex flex-1 justify-center items-center px-4">
<div class="w-full">
<div class="bg-[color-mix(in_srgb,var(--color-heading)_50%,transparent)] rounded-full splide-progress-bar overflow-hidden">
<div class="h-2 w-0 bg-button-2-surface transition-all ease-in-out duration-300 splide-progress-bar__step"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"siteName": "UCEA",
"dataTheme": "teal",
"pattern": "",
"patternClass": "absolute bottom-0 -left-4 w-1/3",
"heading": "Upcoming events",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed.",
"buttonColour": "themed",
"link": {
"text": "View all",
"url": "./event-list.html"
},
"cardList": [
{
"event": true,
"date": "1 July 2026",
"heading": "Getting the most from UCEA membership",
"tag": {
"tag": "true",
"text": "Event",
"url": "./index"
},
"image": {
"src": "images/test-imagery/example3@16-12@1200w.jpg",
"width": 1200,
"height": 900,
"srcSet": [
{
"url": "images/test-imagery/example3@16-12@1200w.jpg",
"size": "1200"
}
]
}
},
{
"event": true,
"heading": "Immigration HR Network meeting ",
"date": "1 July 2026",
"tag": {
"tag": "true",
"text": "Event",
"url": "./index"
},
"image": {
"src": "images/test-imagery/example11@16-12@1200w.jpg",
"width": 1200,
"height": 900,
"srcSet": [
{
"url": "images/test-imagery/example11@16-12@1200w.jpg",
"size": "1200"
}
]
}
},
{
"event": true,
"date": "2 July 2026",
"heading": "Introduction to workplace investigator skills workshop",
"tag": {
"tag": "true",
"text": "Event",
"url": "./index"
},
"image": {
"src": "images/test-imagery/example1@16-12@1200w.jpg",
"width": 1200,
"height": 900,
"srcSet": [
{
"url": "images/test-imagery/example1@16-12@1200w.jpg",
"size": "1200"
}
]
}
},
{
"event": true,
"date": "21 October 2026",
"heading": "UCEA Reward Network Meeting - Total Reward Statement (TRS)",
"url": "./event-detail--red-theme.html",
"tag": {
"tag": "true",
"text": "Event",
"url": "./index"
},
"image": {
"src": "images/test-imagery/example5@16-12@1200w.jpg",
"width": 1200,
"height": 900,
"srcSet": [
{
"url": "images/test-imagery/example5@16-12@1200w.jpg",
"size": "1200"
}
]
}
}
],
"sliderData": {
"perPage": 1,
"mediaQuery": "min",
"pagination": false,
"arrows": true,
"gap": "1.5rem",
"padding": {
"right": "4.5rem"
},
"updateOnMove": true,
"breakpoints": {
"640": {
"perPage": 2,
"arrows": true,
"gap": "1.5rem",
"padding": {
"right": "4.5rem"
}
},
"1024": {
"perPage": 2,
"arrows": true,
"gap": "1.5rem",
"padding": {
"right": "4.5rem"
}
},
"1284": {
"perPage": 3,
"arrows": true,
"gap": "1rem",
"padding": {
"right": "4.5rem"
}
}
}
},
"dataMode": "",
"whiteBg": true
}
No notes defined.