<a href="#" class="bg-grey-100 hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Professor Erika Denton</h2>
<p class="mt-2 text-bravo-900 line-clamp-3 ">Erika is a consultant radiologist and was Medical Director in Norwich from 2018 to 2023. She was the National Medical Director 2023 to 2025 in the Transformation Directorate including clinical leadership of digital programmes, artificial intelligence, research and pathway transformation. </p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first w-32 md:w-auto grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example5@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example5@1-1@1200w.jpg">
</picture>
</div>
</div>
</a>
{%if bgContrast %}
{% set bgColor = "bg-white hover:bg-grey-100" %}
{% else%}
{% set bgColor = "bg-grey-100 hover:bg-grey-100" %}
{% endif %}
<a href="#" class="{{ bgColor }} border border-transparent flex {% if horizontal %} p-4 flex-col lg:flex-row {% else %} px-4 pt-4 pb-6 gap-6 flex-col{% endif %} h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col {% if centerText %} justify-center text-center items-center{% endif %}{% if horizontal %} justify-center flex-2 py-8 lg:px-8 {% else %} flex-1 justify-start {% endif %}" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
{% if heading %}
<h2 class="relative {% if biggerFont %} text-2xl {% else %} text-xl {% endif %} font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">{{ heading }}</h2>
{% endif %}
{% if copy %}
<p class="mt-2 text-bravo-900 {% if bio %} line-clamp-3 {% endif %}">{{ copy }}</p>
{% endif %}
{% if tag %}
<ul class="mt-4 flex gap-1">
{% for item in tag %}
{% render "@tag", item %}
{% endfor %}
</ul>
{% endif %}
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 {% if orderImageFirst %}order-first{% endif %} {% if bio %} w-32 md:w-auto {% endif %} {% if not horizontal %} grow-0 {% endif %}">
<div class="w-full h-full">
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, width: image.width, height: image.height, xsmMax: image.xsmMax, smMax: image.smMax, mdMax: image.mdMax, modifier: 'transition ease-in-out duration-300 group-hover:scale-110', frameModifier: 'rounded-lg' } %}
</div>
</div>
</a>
{
"siteName": "BIR Pattern Library",
"heading": "Professor Erika Denton",
"copy": "Erika is a consultant radiologist and was Medical Director in Norwich from 2018 to 2023. She was the National Medical Director 2023 to 2025 in the Transformation Directorate including clinical leadership of digital programmes, artificial intelligence, research and pathway transformation. ",
"image": {
"src": "images/test-imagery/example5@1-1@1200w.jpg",
"width": 1200,
"height": 750,
"srcSet": [
{
"url": "images/test-imagery/example5@1-1@1200w.jpg",
"size": "1200"
}
]
},
"orderImageFirst": true,
"bio": true
}
No notes defined.