<div class="js-component bg-bkg relative ">
<div class="absolute inset-0 overflow-hidden pointer-events-none z-0">
<div class="absolute top-20 right-0 lg:top-auto lg:-bottom-12 lg:-right-16 w-3/4 sm:w-1/2 xl:w-full max-w-[784px]">
<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="flex flex-col lg:flex-auto lg:grid lg:breakout-screen-lg xl:breakout-screen-xl 2xl:breakout-screen-2xl xl:min-h-[348px]">
<div class="w-full order-last lg:order-none lg:row-start-1 lg:col-start-2 lg:col-end-8 relative z-10 flex items-center align-end lg:py-8 xsm:max-w-screen-xsm sm:max-w-screen-sm md:max-w-screen-md lg:max-w-none">
<div class="items-start text-left flex flex-col w-11/12 lg:w-full gap-y-4 py-6 px-4 xl:pr-2 xl:pl-0">
<h1 class="text-5xl xl:text-7xl font-normal font-heading leading-[40px] xl:leading-[72px] text-heading">UCEA is the leading voice on employment and reward matters in the UK HE sector </h1>
<div class="block prose xl:prose-xl text-body lg:w-9/12">
<p>Membership is open to UK HE providers and associated sector bodies. </p>
</div>
<div class="pt-3 xl:pt-5">
<button class="btn bg-button-surface text-button-text border-2 border-button-surface hover:bg-button-surface-hover hover:border-button-surface-hover" data-micromodal-trigger="video-modal-1234">
Play full video
</button>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="video-modal-1234" aria-hidden="true" data-vanilla-module="Modal">
<div tabindex="-1" class="w-full h-full flex px-4 py-12 lg:px-8" data-micromodal-close>
<div class="js-model-content w-full md:max-w-screen-xl m-auto" role="dialog" aria-modal="true">
<div class="flex justify-end pb-4">
<button class="w-10 h-10 border-white group transition ease-in-out duration-300 hover:bg-white border rounded-full z-20 flex items-center justify-center" aria-label="Close modal" data-micromodal-close>
<svg class="fill-current w-5 h-5 text-white group-hover:text-blue pointer-events-none">
<use href="/front-end/sprite.svg#icon-close"></use>
</svg>
<span class="sr-only">Close Video Modal</span>
</button>
</div>
<div class="relative aspect-[16/9] bg-black shadow-xl overflow-hidden rounded-md">
<iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="https://www.youtube.com/embed/NZrX_ES93JA" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="order-first lg:order-none lg:row-start-1 lg:col-start-8 lg:col-end-14 relative z-0 flex items-center lg:justify-center py-0 pr-6 xl:pr-0">
<div class="relative z-10 w-10/12 md:w-full max-w-[620px] rounded-xl overflow-hidden mx-0 p-6 pb-0">
<video preload="none" class="lazyload w-full object-cover aspect-[10/6] rounded-xl" muted="muted" autoplay="autoplay" loop="loop" playsinline="playsinline">
<source src="https://player.vimeo.com/external/392924695.hd.mp4?s=5abd506422ab485f2e2174982ef5c07b2e309e38&profile_id=175" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
{% set buttonModifier = 'themed' %}
{% set isEvent = ContentTypeAlias === 'eventPage' %}
{% set hasMedia = image or backgroundVideo %}
{% if isEvent %}
{% set contentColEnd = 'lg:col-end-9' %}
{% elseif hasMedia %}
{% set contentColEnd = 'lg:col-end-8' %}
{% else %}
{% set contentColEnd = 'lg:col-end-10' %}
{% endif %}
<div class="js-component bg-bkg relative {% if image and image2 %} md:mb-24 {% endif %}" {% 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">
<div class="{{ patternClass or 'absolute top-20 right-0 lg:top-auto lg:-bottom-12 lg:-right-16 w-3/4 sm:w-1/2 xl:w-full'}} max-w-[784px]">
{% render "@" + pattern, { modifier: "text-button-2-surface w-full h-auto ", ariaHidden: true } %}
</div>
</div>
{% endif %}
<div class="flex flex-col lg:flex-auto lg:grid lg:breakout-screen-lg xl:breakout-screen-xl 2xl:breakout-screen-2xl xl:min-h-[348px]">
<div class="w-full order-last lg:order-none lg:row-start-1 lg:col-start-2 {{ contentColEnd }} relative z-10 flex items-center align-end lg:py-8 xsm:max-w-screen-xsm sm:max-w-screen-sm md:max-w-screen-md lg:max-w-none">
<div class="items-start text-left flex flex-col w-11/12 lg:w-full gap-y-4 {% if hasMedia %} py-6 {% else %} py-12 {% endif %} px-4 xl:pr-2 xl:pl-0">
{% if heading %}
<h1 class="text-5xl xl:text-7xl font-normal font-heading leading-[40px] xl:leading-[72px] text-heading">{{ heading | safe }}</h1>
{% endif %}
{% if caption %}
<div class="block prose xl:prose-xl text-body lg:w-9/12">
<p>{{ caption | safe }}</p>
</div>
{% endif %}
{% if isEvent %}
<div class="grid grid-cols-2 gap-x-6 gap-y-4 mt-2 border-t border-heading pt-4 xl:w-2/3">
{% if eventDate %}
<div class="pb-4 border-b border-heading/50">
<p class="uppercase text-sm lg:text-base tracking-wide text-heading">Date</p>
<p class="font-semibold text-base lg:text-xl">{{ eventDate }}</p>
</div>
{% endif %}
{% if eventTime %}
<div class="pb-4 border-b border-heading/50">
<p class="uppercase text-sm lg:text-base tracking-wide text-heading">Time</p>
<p class="font-semibold text-base lg:text-xl">{{ eventTime }}</p>
</div>
{% endif %}
{% if eventLocation %}
<div class="pb-4">
<p class="uppercase text-sm lg:text-base tracking-wide text-heading">Location</p>
<p class="font-semibold text-base lg:text-xl">{{ eventLocation }}</p>
</div>
{% endif %}
{% if eventCost %}
<div class="pb-4">
<p class="uppercase text-sm lg:text-base tracking-wide text-heading">Cost</p>
<p class="font-semibold text-base lg:text-xl">{{ eventCost }}</p>
</div>
{% endif %}
</div>
{% endif %}
{% if link %}
<div class="pt-3 xl:pt-5">
{% render "@button--themed", link, true %}
</div>
{% endif %}
</div>
</div>
<div class="order-first lg:order-none lg:row-start-1 {% if isEvent %}lg:col-start-9{% else %}lg:col-start-8{% endif %} lg:col-end-14 relative z-0 flex {% if isEvent %}items-start lg:pt-16{% else %}items-center{% endif %} lg:justify-center py-0 pr-6 xl:pr-0">
{% if image and image2 %}
<div class="relative w-full h-full flex items-center lg:justify-end gap-2 lg:gap-6 pl-4 lg:pl-0 pb-14 lg:pb-0 pt-10 xl:pt-0">
<div class="relative z-10 w-[50%] max-w-[200px] lg:max-w-[300px] rounded-xl overflow-hidden self-end mb-[-1rem]">
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, modifier: 'w-full object-cover aspect-[3.5/6]', width: 400, height: 533 } %}
</div>
<div class="relative z-0 w-[50%] max-w-[200px] lg:max-w-[300px] rounded-xl overflow-hidden self-end mb-[-3rem]">
{% render "@image-frame", { src: image2.src, srcSet: image2.srcSet, modifier: 'w-full object-cover aspect-[3.5/6]', width: 400, height: 533 } %}
</div>
</div>
{% elseif image %}
<div class="relative z-10 w-10/12 md:w-full max-w-[620px] rounded-xl overflow-hidden mx-0 pl-4 lg:pl-0 pt-4 lg:py-10">
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, smMax: image.smMax, mdMax: image.mdMax, modifier: 'w-full object-cover aspect-[11/7] rounded-lg', frameModifier: 'h-full', width: 800, height: 600 } %}
</div>
{% elseif backgroundVideo %}
<div class="relative z-10 w-10/12 md:w-full max-w-[620px] rounded-xl overflow-hidden mx-0 p-6 pb-0">
<video preload="none" class="lazyload w-full object-cover aspect-[10/6] rounded-xl" muted="muted" autoplay="autoplay" loop="loop" playsinline="playsinline">
<source src="{{backgroundVideo.src}}" type="video/mp4">
</video>
</div>
{% endif %}
</div>
</div>
</div>
{
"siteName": "UCEA",
"heading": "UCEA is the leading voice on employment and reward matters in the UK HE sector ",
"caption": "Membership is open to UK HE providers and associated sector bodies. ",
"dataTheme": "",
"pattern": "diagonal-pattern",
"image": "",
"image2": null,
"link": {
"text": "Play full video",
"url": "https://www.youtube.com/embed/NZrX_ES93JA",
"modal": true,
"id": "video-modal-1234",
"renderAsButton": true
},
"backgroundVideo": {
"src": "https://player.vimeo.com/external/392924695.hd.mp4?s=5abd506422ab485f2e2174982ef5c07b2e309e38&profile_id=175"
}
}
No notes defined.