<div class=" px-4 ">
<div class="js-component bg-white xl:rounded-xl relative z-0 " data-theme="red">
<div class="max-w-[1532px] mx-auto">
<div class="flex flex-col lg:flex-row w-full p-0 pt-6 lg:p-4 lg:py-12 xl:px-12 xl:py-24 ">
<div class="lg:flex-1 lg:w-4/12 flex flex-col justify-center align-center mb-0 order-2 lg:order-none lg:pr-12 xl:pr-32 w-full sm:w-4/5 lg:w-full">
<div>
<h2 class="text-3xl xl:text-6xl mb-4 font-bold leading-tight text-heading">Real-terms change in the New JNCHES pay spine</h2>
<div class="md:mb-8 max-w-none prose xl:prose-lg">
<div>
<p>Independent calculations, commissioned by UCEA, looking at the real-terms change in the value of the New JNCHES pay spine show that all pay spine points have kept pace with CPIH inflation since 2013-14.</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetur.</li>
<li>Donec suscipit pulvinar felis eu auctor orci lobortis lorem et eget. </li>
<li>Fusce venenatis est eu magna porttitor </li>
</ul>
</div>
<div class="flex gap-4 flex-wrap mt-8">
<div>
<a href="./index.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">
Download report
</a>
</div>
</div>
</div>
</div>
</div>
<div class="lg:flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0 order-1 lg:order-none">
<div class="relative w-full h-full pb-4 lg:pb-0">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-xl w-full" 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>
</div>
</div>
</div>
{% if bgContrast %}
{% set bgClass = "p-4 py-6 lg:p-6 lg:py-8 xl:px-12 xl:py-24 bg-bkg" %}
{% else %}
{% set bgClass = "bg-white " %}
{% endif %}
{% if flipped %}
{% set textClass = "order-2 lg:order-last lg:pl-12 xl:pl-32" %}
{% set imageClass = "order-1 lg:order-none" %}
{% else %}
{% set textClass = "order-2 lg:order-none lg:pr-12 xl:pr-32" %}
{% set imageClass = "order-1 lg:order-none" %}
{% endif %}
<div class="{% if bgContrast %}component-spacer-margin xl:px-4 {% else %} px-4 {% endif %}">
<div class="js-component {{bgClass}} xl:rounded-xl relative z-0 " {% if dataTheme %}data-theme="{{dataTheme}}"{% endif %} {% if dataMode %}data-mode="{{dataMode}}"{% endif %}>
<div class="max-w-[1532px] mx-auto">
<div class="flex flex-col lg:flex-row w-full {% if not bgContrast %} p-0 pt-6 lg:p-4 lg:py-12 xl:px-12 xl:py-24 {% endif %}">
<div class="lg:flex-1 lg:w-4/12 flex flex-col justify-center align-center mb-0 {{ textClass }} w-full sm:w-4/5 lg:w-full">
<div>
{% if subHeading %}
<span class="text-sm xl:text-base mb-1 block uppercase font-bold leading-tight">{{ subHeading }}</span>
{% endif %}
<h2 class="text-3xl xl:text-6xl mb-4 font-bold leading-tight text-heading">{{heading}}</h2>
<div class="md:mb-8 max-w-none prose xl:prose-lg">
<div>{{ description | safe }}</div>
<div class="flex gap-4 flex-wrap mt-8">
{% for item in links %}
{% set buttonColour = "light" %}
{% if item.buttonColour %}
{% set buttonColour = item.buttonColour %}
{% endif %}
<div>
{% render "@button--" + buttonColour, item, true %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="lg:flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0 {{ imageClass }}">
{% if image %}
<div class="relative w-full h-full pb-4 lg:pb-0">
{% if image.modal %}
<button class="rounded-xl overflow-hidden relative w-full" data-micromodal-trigger="{{ image.modal.id }}">
<span class="sr-only">Open Video</span>
<div class="w-24 h-24 absolute top-2/4 left-2/4 -translate-x-2/4 -translate-y-2/4 z-20 pointer-events-none">
{% render "@icon", { name: "icon-play", modifier: "fill-current w-full h-full text-white drop-shadow-lg" } %}
</div>
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, width: 1200, height: 750, modifier: 'transition ease-in-out duration-300 hover:scale-110' } %}
</button>
{% render "@video-modal", { id: image.modal.id, url: image.modal.url } %}
{% else %}
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, width: 1200, height: 750, modifier: 'rounded-xl' } %}
{% endif %}
</div>
{% elseif backgroundVideo %}
<div class="relative w-full h-auto">
<div class="relative w-full">
<div class="aspect-[16/10]"></div>
<video preload="none" class="lazyload absolute object-cover w-full h-full top-0 left-0 rounded-xl" muted autoplay loop playsinline>
<source src="{{backgroundVideo.src}}" type="video/mp4">
</video>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{
"siteName": "UCEA",
"dataTheme": "red",
"dataMode": "",
"heading": "Real-terms change in the New JNCHES pay spine",
"description": "<p>Independent calculations, commissioned by UCEA, looking at the real-terms change in the value of the New JNCHES pay spine show that all pay spine points have kept pace with CPIH inflation since 2013-14.</p><ul><li>Lorem ipsum dolor sit amet consectetur.</li><li>Donec suscipit pulvinar felis eu auctor orci lobortis lorem et eget. </li><li>Fusce venenatis est eu magna porttitor </li></ul>",
"image": {
"src": "images/test-imagery/example3@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example3@16-10@1200w.jpg",
"size": "1200"
}
]
},
"links": [
{
"text": "Download report",
"url": "./index"
}
]
}
No notes defined.