<header class="js-header sticky top-0 w-full z-20 transform ease-in-out duration-500 flex-shrink-0 flex-grow-0 bg-bkg" data-vanilla-module="StickyHeader" data-theme="teal" data-mode="dark">
<div class="py-6 relative">
<div class="lg:container px-4 xl:px-0">
<div class="flex flex-row justify-between items-stretch">
<a href="./index.html" class="flex items-center justify-center w-32 lg:w-auto text-heading max-w-44 h-[87px]">
<svg class="w-full h-auto fill-current">
<use href="/front-end/sprite.svg#icon-logo"></use>
</svg>
</a>
<div class="flex items-center mt-8 xl:justify-around xl:flex-1 xl:ml-20">
<div class="items-center flex lg:hidden gap-2 mr-2">
<div class="flex items-center">
<button class="block w-8 h-8 bg-button-surface hover:bg-button-surface-hover text-bkg rounded-lg p-2" data-micromodal-trigger="search-modal">
<span class="sr-only">
Open Search Modal
</span>
<svg class="fill-current w-full h-full text-bkg transition-colors ease-in-out duration-300" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-search"></use>
</svg>
</button>
</div>
<button class="js-mobile-second-level-trigger-forward hidden lg:flex items-center justify-center gap-2 bg-button-surface text-bkg text-base font-bold rounded-lg uppercase hover:bg-button-surface-hover transition duration-300 ease-in-out w-8 h-8" aria-expanded="false" aria-controls="mega-menu-account" aria-haspopup="true" type="button">
<span class="sr-only">
Open My account menu
</span>
<span class="h-4 w-4">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-user"></use>
</svg>
</span>
</button>
<a href="./sign-in.html" class="flex items-center justify-center gap-2 bg-button-surface text-bkg text-base font-bold rounded-lg uppercase hover:bg-button-surface-hover transition duration-300 ease-in-out w-8 h-8">
<span class="sr-only">
Log in
</span>
<span class="h-4 w-4">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-user"></use>
</svg>
</span>
</a>
</div>
<button aria-controls="menu" aria-expanded="false" data-vanilla-module="MobileMenuToggle" class="w-8 h-8 p-2 block relative transform lg:hidden rounded-lg group bg-button-surface hover:bg-button-surface-hover" data-state="off">
<span aria-hidden="true" class="block rounded-md absolute left-1/2 top-1/2 -translate-x-1/2 -mt-px h-0.5 w-4 bg-bkg transform transition duration-500 ease-in-out group-data-[state=off]:-translate-y-1 group-data-[state=on]:rotate-45"></span>
<span aria-hidden="true" class="block rounded-md absolute left-1/2 top-1/2 -translate-x-1/2 -mt-px h-0.5 w-4 bg-bkg transform transition duration-500 ease-in-out group-data-[state=on]:opacity-0"></span>
<span aria-hidden="true" class="block rounded-md absolute left-1/2 top-1/2 -translate-x-1/2 -mt-px h-0.5 w-4 bg-bkg transform transition duration-500 ease-in-out group-data-[state=off]:translate-y-1 group-data-[state=on]:-rotate-45"></span>
<span class="sr-only">Toggle Menu</span>
</button>
<nav id="menu" data-vanilla-module="Menu" class="items-center h-[calc(100dvh-var(--mobile-header-height))] hidden absolute overflow-hidden lg:overflow-visible z-50 top-full left-0 bg-bkg w-full lg:h-full lg:flex lg:bg-transparent lg:static lg:p-0 lg:left-auto lg:w-auto">
<div class="overflow-y-auto lg:overflow-visible h-full js-menu-overlay">
<ul class="bg-bkg overflow-y-auto lg:bg-transparent lg:h-full lg:flex lg:items-end lg:overflow-visible">
<li class="js-menu-item lg:pr-6 2xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-end group ">
<a class="font-semibold h-full relative py-3 px-4 flex flex-1 items-center text-2xl transition duration-150 text-body lg:p-0 lg:text-lg lg:self-end lg:after:transition-opacity lg:after:duration-300 lg:after:ease-in-out lg:after:w-full lg:after:absolute lg:after:h-0.5 lg:after:bottom-1 lg:after:bg-button-2-surface lg:after:opacity-0 " href="./component-demo.html">About us
</a>
</li>
<li class="js-menu-item lg:pr-6 2xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-end group ">
<a class="font-semibold h-full relative py-3 px-4 flex flex-1 items-center text-2xl transition duration-150 text-body lg:p-0 lg:text-lg lg:self-end lg:after:transition-opacity lg:after:duration-300 lg:after:ease-in-out lg:after:w-full lg:after:absolute lg:after:h-0.5 lg:after:bottom-1 lg:after:bg-button-2-surface lg:after:opacity-0 " href="./topics.html">Topics
<div class="hidden lg:block h-3 w-3 ml-2 transition-transform duration-300 ease-in-out">
<svg class="w-full h-full fill-current text-button-2-surface rotate-90 group-hover:-rotate-90 transition-transform duration-300 ease-in-out" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
<button class="js-mobile-second-level-trigger-forward transition lg:hidden p-4 border-l border-button-2-surface/50" aria-expanded="false" aria-controls="mega-menu-2" aria-haspopup="true">
<span class="sr-only">
Open Second Level
</span>
<div class="h-6 w-6">
<svg class="w-full h-full fill-current text-button-2-surface transform" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</button>
<div id="second-level-menu-topics" class="js-second-level-panel invisible lg:visible z-50 transition-transform duration-300 bg-grey-100 absolute translate-x-full w-full h-full top-0 lg:top-full left-0 lg:pt-7 lg:overflow-y-visible lg:bg-transparent lg:h-auto lg:-translate-y-7 lg:opacity-0 lg:-translate-x-full lg:transition-none lg:z-40 group-hover:opacity-100 lg:group-hover:translate-x-0 lg:focus-within:opacity-100 lg:focus-within:translate-x-0">
<div class="overflow-y-auto lg:overflow-visible h-full">
<div class="h-full lg:h-auto z-20 lg:relative bg-bkg lg:bg-white">
<div class="h-full lg:h-auto lg:container lg:py-12 lg:group-hover:animate-fadeQuick">
<button class="js-mobile-second-level-trigger-back w-full lg:hidden bg-bkg p-4 flex items-center text-body" aria-controls="second-level-menu-topics" aria-expanded="false" aria-controls="second-level-menu-topics">
<div class="w-4 h-4 mr-4">
<svg class="w-full h-full fill-current text-button-2-surface transform rotate-180" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
<span class="hover:underline">
Back
</span>
</button>
<div class="space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-6 xl:gap-12 bg-bkg lg:bg-white pb-10 md:pb-0">
<div class="lg:col-span-6">
<ul>
<li>
<h2 class="flex font-heading leading-tight lg:block text-button-2-arrow lg:mb-5 lg:pb-2">
<span class="flex-1 py-4 px-4 lg:px-0 text-4xl lg:text-5xl lg:block text-body lg:text-bkg lg:bg-white">Topics</span>
</h2>
<div class="overflow-y-auto lg:overflow-visible h-full w-full">
<div class="lg:flex space-x-8 text-body lg:text-grey">
<ul class="lg:flex-1">
<li class="lg:mb-6">
<a class="text-2xl lg:text-lg font-bold block lg:inline-block px-4 py-2 lg:p-0 transition-colors ease-in-out duration-200 lg:hover:underline" href="./index.html">Pensions</a>
</li>
<li class="lg:mb-6">
<a class="text-2xl lg:text-lg font-bold block lg:inline-block px-4 py-2 lg:p-0 transition-colors ease-in-out duration-200 lg:hover:underline" href="./index.html">Employee Experience</a>
</li>
<li class="lg:mb-6">
<a class="text-2xl lg:text-lg font-bold block lg:inline-block px-4 py-2 lg:p-0 transition-colors ease-in-out duration-200 lg:hover:underline" href="./index.html">JNCHES</a>
</li>
</ul>
<ul class="lg:flex-1">
<li class="lg:mb-6">
<a class="text-2xl lg:text-lg font-bold block lg:inline-block px-4 py-2 lg:p-0 transition-colors ease-in-out duration-200 lg:hover:underline" href="./index.html">Framework Agreement</a>
</li>
<li class="lg:mb-6">
<a class="text-2xl lg:text-lg font-bold block lg:inline-block px-4 py-2 lg:p-0 transition-colors ease-in-out duration-200 lg:hover:underline" href="./index.html">Health, Safety and Wellbeing</a>
</li>
<li class="lg:mb-6">
<a class="text-2xl lg:text-lg font-bold block lg:inline-block px-4 py-2 lg:p-0 transition-colors ease-in-out duration-200 lg:hover:underline" href="./index.html">Equality and Pay Gaps</a>
</li>
</ul>
</div>
<div class="mt-8 px-4 lg:px-0">
<div class="hidden lg:block">
<a href="./topics.html" class="btn bg-button-2-surface text-button-2-arrow border-2 border-button-2-surface hover:bg-button-2-surface-hover hover:border-button-2-surface-hover">
View all
</a>
</div>
<div class="lg:hidden pb-12">
<a href="./topics.html" class="btn bg-transparent text-button-2-surface border-2 border-button-2-surface inline-flex justify-center">
View all
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="max-w-md lg:max-w-none py-2 px-4 lg:px-0 lg:py-0 lg:col-span-3 lg:flex lg:h-8/12 xl:h-10/12 mt-8 xl:mt-0">
<a class="bg-bkg-white-mix lg:!bg-bkg flex flex-col lg:flex-1 rounded-bl-2xl rounded-tr-2xl transition ease-in-out duration-150 hover:shadow-xl" href="./topics-detail.html">
<div class="mb-4 shrink-0">
<picture class="block overflow-hidden rounded-tr-2xl w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-9@1200w.jpg">
</picture>
</div>
<div class="p-6 pt-2 flex flex-col flex-1">
<h2 class="text-button-surface leading-tight mb-3 text-xl font-semibold">Employment and Workforce</h2>
<p class="text-body"></p>
</div>
</a>
</div>
<div class="max-w-md lg:max-w-none py-2 px-4 lg:px-0 lg:py-0 lg:col-span-3 lg:flex lg:h-8/12 xl:h-10/12 mt-8 xl:mt-0">
<a class="bg-bkg-white-mix lg:!bg-bkg flex flex-col lg:flex-1 rounded-bl-2xl rounded-tr-2xl transition ease-in-out duration-150 hover:shadow-xl" href="./index.html">
<div class="mb-4 shrink-0">
<picture class="block overflow-hidden rounded-tr-2xl w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@16-9@1200w.jpg">
</picture>
</div>
<div class="p-6 pt-2 flex flex-col flex-1">
<h2 class="text-button-surface leading-tight mb-3 text-xl font-semibold">Pay and Reward</h2>
<p class="text-body"></p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="js-menu-item lg:pr-6 2xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-end group ">
<a class="font-semibold h-full relative py-3 px-4 flex flex-1 items-center text-2xl transition duration-150 text-body lg:p-0 lg:text-lg lg:self-end lg:after:transition-opacity lg:after:duration-300 lg:after:ease-in-out lg:after:w-full lg:after:absolute lg:after:h-0.5 lg:after:bottom-1 lg:after:bg-button-2-surface lg:after:opacity-0 " href="./article-list.html">Resources
</a>
</li>
<li class="js-menu-item lg:pr-6 2xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-end group ">
<a class="font-semibold h-full relative py-3 px-4 flex flex-1 items-center text-2xl transition duration-150 text-body lg:p-0 lg:text-lg lg:self-end lg:after:transition-opacity lg:after:duration-300 lg:after:ease-in-out lg:after:w-full lg:after:absolute lg:after:h-0.5 lg:after:bottom-1 lg:after:bg-button-2-surface lg:after:opacity-0 " href="./article-list--news.html">News
</a>
</li>
<li class="js-menu-item lg:pr-6 2xl:pr-12 lg:last:pr-0 flex justify-between lg:h-full lg:items-end group ">
<a class="font-semibold h-full relative py-3 px-4 flex flex-1 items-center text-2xl transition duration-150 text-body lg:p-0 lg:text-lg lg:self-end lg:after:transition-opacity lg:after:duration-300 lg:after:ease-in-out lg:after:w-full lg:after:absolute lg:after:h-0.5 lg:after:bottom-1 lg:after:bg-button-2-surface lg:after:opacity-0 " href="./event-list.html">Events & training
</a>
</li>
</ul>
<ul class="lg:hidden">
</ul>
</div>
</nav>
<div class="items-center ml-auto hidden lg:flex lg:pl-4 h-full">
<div class="flex items-center">
<button class="block w-8 h-8 bg-button-surface hover:bg-button-surface-hover text-bkg rounded-lg p-2" data-micromodal-trigger="search-modal">
<span class="sr-only">
Open Search Modal
</span>
<svg class="fill-current w-full h-full text-bkg transition-colors ease-in-out duration-300" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-search"></use>
</svg>
</button>
</div>
<div class="ml-3">
<a href="./sign-in.html" class="flex items-center gap-2 bg-action text-bkg text-base font-bold px-4 py-1 rounded-lg uppercase bg-button-surface hover:bg-button-surface-hover text-bkg transition duration-300 ease-in-out">
<div class="h-4 w-4">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-user"></use>
</svg>
</div>
Log in
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="search-modal" 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-md 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-body pointer-events-none">
<use href="/front-end/sprite.svg#icon-close"></use>
</svg>
<span class="sr-only">Close Search Modal</span>
</button>
</div>
<div class="js-model-content flex flex-col items-center justify-center z-10 relative bg-white p-8 shadow-xl w-full rounded-md" role="dialog" aria-modal="true">
<main class="w-full">
<form action="./search-results.html" class="pb-2">
<label class="block text-center font-bold text-4xl mb-2 text-body" for="modalSearchTerm">Search</label>
<div class="flex justify-center w-full items-stretch">
<div class="flex-1 mr-4">
<input class="w-full p-4 focus:ring-0 border-0 transition-colors focus:border-0 ease-in-out duration-300 focus:outline-none bg-grey-100" id="modalSearchTerm" name="searchTerm" placeholder="Search term" type="text" value="">
</div>
<button>
<span class="sr-only">Search site</span>
<div class="w-6 h-6">
<svg class="fill-current w-full h-full text-body transition-colors ease-in-out duration-300">
<use href="/front-end/sprite.svg#icon-search"></use>
</svg>
</div>
</button>
</div>
</form>
</main>
</div>
</div>
</div>
</div>
<header class="js-header sticky top-0 w-full z-20 transform ease-in-out duration-500 flex-shrink-0 flex-grow-0 bg-bkg" data-vanilla-module="StickyHeader" {% if dataTheme %}data-theme="{{dataTheme}}"{% endif %} {% if dataMode %}data-mode="{{dataMode}}"{% endif %}>
<div class="py-6 relative">
<div class="lg:container px-4 xl:px-0">
<div class="flex flex-row justify-between items-stretch">
{% render "@logo" %}
<div class="flex items-center mt-8 xl:justify-around xl:flex-1 xl:ml-20">
{% render "@navigation", { pageTitle: pageTitle, navItems: navItems, dropDownButtons: dropDownButtons, dataTheme: dataTheme, dataMode: dataMode, loggedIn: loggedIn, accountNavItem: accountNavItem } %}
</div>
</div>
</div>
</div>
</header>
{% render "@search-modal" %}
{
"siteName": "UCEA",
"dataTheme": "teal",
"dataMode": "dark",
"quickLinks": [
{
"name": "Login",
"url": "./sign-in.html",
"icon": "icon-user"
},
{
"name": "Contact us",
"url": "./contact-us"
}
],
"navItems": [
{
"menu_item": "About us",
"url": "./component-demo"
},
{
"menu_item": "Topics",
"url": "./topics.html",
"megaList": [
{
"component": "mega-secondary-list",
"data": {
"colHeading": "Topics",
"viewAll": {
"url": "./topics.html",
"text": "View all"
},
"columns": [
{
"list": [
{
"url": "./index",
"name": "Pensions"
},
{
"url": "./index",
"name": "Employee Experience"
},
{
"url": "./index",
"name": "JNCHES"
}
]
},
{
"list": [
{
"url": "./index",
"name": "Framework Agreement"
},
{
"url": "./index",
"name": "Health, Safety and Wellbeing"
},
{
"url": "./index",
"name": "Equality and Pay Gaps"
}
]
}
]
}
},
{
"component": "mega-card",
"data": {
"colHeading": "Featured",
"url": "./topics-detail.html",
"heading": "Employment and Workforce",
"image": {
"src": "images/test-imagery/example2@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example2@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
},
{
"component": "mega-card",
"data": {
"colHeading": "Featured",
"url": "./index",
"heading": "Pay and Reward",
"image": {
"src": "images/test-imagery/example3@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example3@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
}
]
},
{
"menu_item": "Resources",
"url": "./article-list"
},
{
"menu_item": "News",
"url": "./article-list--news"
},
{
"menu_item": "Events & training",
"url": "./event-list"
}
]
}
No notes defined.