<div class="js-component relative z-0 container component-spacer-margin" data-vanilla-module="Accordion" data-theme="blue">
<div class="max-w-screen-md mx-auto ">
<div>
<div class="text-center">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-5xl xl:text-7xl block font-heading font-normal leading-tight text-heading">Board of Directors</h2>
<div class="prose xl:prose-lg mt-4 lg:mt-6 max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="js-accordion-button-list border-t-2 border-grey/10">
<div class="border-b-2 border-grey/10 group/item">
<div class="flex flex-wrap lg:flex-nowrap lg:items-center gap-x-4 md:gap-x-6 gap-y-3 py-6 px-1 lg:px-4 group-hover/item:bg-button-2-surface-hover/10">
<div class="flex items-start gap-4 md:gap-6 w-full lg:w-auto lg:flex-grow min-w-0">
<div class="flex-shrink-0 w-20 h-20 md:w-24 md:h-24 rounded-lg overflow-hidden">
<picture class="block overflow-hidden object-cover w-full h-full ">
<img class="lazyload h-full object-cover w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example5@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example5@16-10@1200w.jpg">
</picture>
</div>
<div class="flex-grow min-w-0">
<p class="text-xl md:text-2xl font-bold text-grey leading-tight">Sir Nishan Canagarajah</p>
<p class="text-base font-normal text-grey-600 leading-tight mt-1">Chair of the Board President and Vice-Chancellor, University of Leicester</p>
</div>
</div>
<a href="https://www.le.ac.uk/" target="_blank" class="flex-shrink-0 w-10 h-10 flex items-center justify-center bg-button-2-surface hover:bg-button-2-surface-hover rounded-full p-2.5 transition order-2 lg:order-none ml-auto lg:ml-0" aria-label="View profile">
<svg class="fill-current text-button-2-arrow w-full h-full">
<use href="/front-end/sprite.svg#icon-external-link"></use>
</svg>
</a>
</div>
</div>
<div class="border-b-2 border-grey/10 group/item">
<div class="flex flex-wrap lg:flex-nowrap lg:items-center gap-x-4 md:gap-x-6 gap-y-3 py-6 px-1 lg:px-4 group-hover/item:bg-button-2-surface-hover/10">
<div class="flex items-start gap-4 md:gap-6 w-full lg:w-auto lg:flex-grow min-w-0">
<div class="flex-shrink-0 w-20 h-20 md:w-24 md:h-24 rounded-lg overflow-hidden">
<picture class="block overflow-hidden object-cover w-full h-full ">
<img class="lazyload h-full object-cover w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example5@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example5@16-10@1200w.jpg">
</picture>
</div>
<div class="flex-grow min-w-0">
<p class="text-xl md:text-2xl font-bold text-grey leading-tight">Professor Jenny Higham</p>
<p class="text-base font-normal text-grey-600 leading-tight mt-1">Deputy Chair of the Board and Vice-Chancellor, University of Suffolk</p>
<button id="accordion-button-2" aria-controls="accordion-panel-2" class="js-accordion-item-button group peer hidden lg:inline-flex items-center gap-2 mt-3 font-bold text-base text-heading text-left" aria-expanded="false">
Show more
<span class="js-accordion-item-icon w-4 h-4 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
<svg class="fill-current text-heading w-full h-full transition-colors ease-in-out rotate-90">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</span>
</button>
</div>
</div>
<button id="accordion-button-m-2" aria-controls="accordion-panel-2" class="js-accordion-item-button group peer order-1 lg:hidden inline-flex items-center gap-2 font-bold text-base text-heading text-left mt-2" aria-expanded="false">
Show more
<span class="js-accordion-item-icon w-4 h-4 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
<svg class="fill-current text-heading w-full h-full transition-colors ease-in-out rotate-90">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</span>
</button>
</div>
<div id="accordion-panel-2" aria-labelledby="accordion-button-2" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block group-hover/item:bg-button-2-surface-hover/10">
<div class="js-accordion-item-content pb-4 lg:p-4">
<div class="prose xl:prose-lg max-w-none">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam enim nunc, lobortis at tincidunt id, tempus a augue. Morbi vestibulum arcu maximus augue auctor, id finibus mauris suscipit. Praesent ante erat, molestie in facilisis in, ornare et sem.</p>
</div>
</div>
</div>
</div>
<div class="border-b-2 border-grey/10 group/item">
<div class="flex flex-wrap lg:flex-nowrap lg:items-center gap-x-4 md:gap-x-6 gap-y-3 py-6 px-1 lg:px-4 group-hover/item:bg-button-2-surface-hover/10">
<div class="flex items-start gap-4 md:gap-6 w-full lg:w-auto lg:flex-grow min-w-0">
<div class="flex-shrink-0 w-20 h-20 md:w-24 md:h-24 rounded-lg overflow-hidden">
<picture class="block overflow-hidden object-cover w-full h-full ">
<img class="lazyload h-full object-cover w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example5@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example5@16-10@1200w.jpg">
</picture>
</div>
<div class="flex-grow min-w-0">
<p class="text-xl md:text-2xl font-bold text-grey leading-tight">Professor Stuart Palmer</p>
<p class="text-base font-normal text-grey-600 leading-tight mt-1">Deputy Chair of the Board and Chair of Council, Brunel University of London</p>
<button id="accordion-button-3" aria-controls="accordion-panel-3" class="js-accordion-item-button group peer hidden lg:inline-flex items-center gap-2 mt-3 font-bold text-base text-heading text-left" aria-expanded="false">
Show more
<span class="js-accordion-item-icon w-4 h-4 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
<svg class="fill-current text-heading w-full h-full transition-colors ease-in-out rotate-90">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</span>
</button>
</div>
</div>
<button id="accordion-button-m-3" aria-controls="accordion-panel-3" class="js-accordion-item-button group peer order-1 lg:hidden inline-flex items-center gap-2 font-bold text-base text-heading text-left mt-2" aria-expanded="false">
Show more
<span class="js-accordion-item-icon w-4 h-4 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
<svg class="fill-current text-heading w-full h-full transition-colors ease-in-out rotate-90">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</span>
</button>
<a href="/about/stuart-palmer/" class="flex-shrink-0 w-10 h-10 flex items-center justify-center bg-button-2-surface hover:bg-button-2-surface-hover rounded-full p-2.5 transition order-2 lg:order-none ml-auto lg:ml-0" aria-label="Read biography">
<svg class="fill-current text-button-2-arrow w-full h-full">
<use href="/front-end/sprite.svg#icon-external-link"></use>
</svg>
</a>
</div>
<div id="accordion-panel-3" aria-labelledby="accordion-button-3" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block group-hover/item:bg-button-2-surface-hover/10">
<div class="js-accordion-item-content pb-4 lg:p-4">
<div class="prose xl:prose-lg max-w-none">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
</div>
<div class="border-b-2 border-grey/10 group/item">
<div class="flex flex-wrap lg:flex-nowrap lg:items-center gap-x-4 md:gap-x-6 gap-y-3 py-6 px-1 lg:px-4 group-hover/item:bg-button-2-surface-hover/10">
<div class="flex items-start gap-4 md:gap-6 w-full lg:w-auto lg:flex-grow min-w-0">
<div class="flex-shrink-0 w-20 h-20 md:w-24 md:h-24 rounded-lg overflow-hidden">
<picture class="block overflow-hidden object-cover w-full h-full ">
<img class="lazyload h-full object-cover w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example5@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example5@16-10@1200w.jpg">
</picture>
</div>
<div class="flex-grow min-w-0">
<p class="text-xl md:text-2xl font-bold text-grey leading-tight">Dr Amara Okafor</p>
<p class="text-base font-normal text-grey-600 leading-tight mt-1">Board Member and Director of Research, University of Bristol</p>
<button id="accordion-button-4" aria-controls="accordion-panel-4" class="js-accordion-item-button group peer hidden lg:inline-flex items-center gap-2 mt-3 font-bold text-base text-heading text-left" aria-expanded="false">
Show more
<span class="js-accordion-item-icon w-4 h-4 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
<svg class="fill-current text-heading w-full h-full transition-colors ease-in-out rotate-90">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</span>
</button>
</div>
</div>
<button id="accordion-button-m-4" aria-controls="accordion-panel-4" class="js-accordion-item-button group peer order-1 lg:hidden inline-flex items-center gap-2 font-bold text-base text-heading text-left mt-2" aria-expanded="false">
Show more
<span class="js-accordion-item-icon w-4 h-4 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
<svg class="fill-current text-heading w-full h-full transition-colors ease-in-out rotate-90">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</span>
</button>
<a href="/about/amara-okafor/" class="flex-shrink-0 w-10 h-10 flex items-center justify-center bg-button-2-surface hover:bg-button-2-surface-hover rounded-full p-2.5 transition order-2 lg:order-none ml-auto lg:ml-0" aria-label="Read biography">
<svg class="fill-current text-button-2-arrow w-full h-full">
<use href="/front-end/sprite.svg#icon-external-link"></use>
</svg>
</a>
</div>
<div id="accordion-panel-4" aria-labelledby="accordion-button-4" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block group-hover/item:bg-button-2-surface-hover/10">
<div class="js-accordion-item-content pb-4 lg:p-4">
<div class="prose xl:prose-lg max-w-none">
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce maximus, quam non facilisis pellentesque, ante sapien tristique sapien.</p>
<p>Sed dictum felis sit amet quam rutrum maximus. Nulla et finibus nibh, vel finibus nisi.</p>
</div>
</div>
</div>
</div>
<div class="border-b-2 border-grey/10 group/item">
<div class="flex flex-wrap lg:flex-nowrap lg:items-center gap-x-4 md:gap-x-6 gap-y-3 py-6 px-1 lg:px-4 group-hover/item:bg-button-2-surface-hover/10">
<div class="flex items-start gap-4 md:gap-6 w-full lg:w-auto lg:flex-grow min-w-0">
<div class="flex-shrink-0 w-20 h-20 md:w-24 md:h-24 rounded-lg overflow-hidden">
<picture class="block overflow-hidden object-cover w-full h-full ">
<img class="lazyload h-full object-cover w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example5@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example5@16-10@1200w.jpg">
</picture>
</div>
<div class="flex-grow min-w-0">
<p class="text-xl md:text-2xl font-bold text-grey leading-tight">Professor Michael Chen</p>
<p class="text-base font-normal text-grey-600 leading-tight mt-1">Board Member and Pro-Vice-Chancellor, University of Manchester</p>
<button id="accordion-button-5" aria-controls="accordion-panel-5" class="js-accordion-item-button group peer hidden lg:inline-flex items-center gap-2 mt-3 font-bold text-base text-heading text-left" aria-expanded="false">
Show more
<span class="js-accordion-item-icon w-4 h-4 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
<svg class="fill-current text-heading w-full h-full transition-colors ease-in-out rotate-90">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</span>
</button>
</div>
</div>
<button id="accordion-button-m-5" aria-controls="accordion-panel-5" class="js-accordion-item-button group peer order-1 lg:hidden inline-flex items-center gap-2 font-bold text-base text-heading text-left mt-2" aria-expanded="false">
Show more
<span class="js-accordion-item-icon w-4 h-4 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
<svg class="fill-current text-heading w-full h-full transition-colors ease-in-out rotate-90">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</span>
</button>
</div>
<div id="accordion-panel-5" aria-labelledby="accordion-button-5" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block group-hover/item:bg-button-2-surface-hover/10">
<div class="js-accordion-item-content pb-4 lg:p-4">
<div class="prose xl:prose-lg max-w-none">
<p>Donec id ultricies erat. Aliquam molestie ante quis venenatis eleifend. Nullam ac feugiat nulla, quis varius risus. Morbi sollicitudin eget libero sit amet mollis.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin" data-vanilla-module="Accordion" {% if dataTheme %}data-theme="{{dataTheme}}"{% endif %} {% if dataMode %}data-mode="{{dataMode}}"{% endif %}>
<div class="max-w-screen-md mx-auto {{componentModifier}}">
<div>
<div class="text-center">
{% render "@headline", headline %}
</div>
<div class="js-accordion-button-list border-t-2 border-grey/10">
{% for item in list %}
<div class="border-b-2 border-grey/10 group/item">
<div class="flex flex-wrap lg:flex-nowrap lg:items-center gap-x-4 md:gap-x-6 gap-y-3 py-6 px-1 lg:px-4 group-hover/item:bg-button-2-surface-hover/10">
<div class="flex items-start gap-4 md:gap-6 w-full lg:w-auto lg:flex-grow min-w-0">
{% if item.image %}
<div class="flex-shrink-0 w-20 h-20 md:w-24 md:h-24 rounded-lg overflow-hidden">
{% render "@image-frame", {
src: item.image.src,
srcSet: item.image.srcSet,
modifier: 'h-full object-cover',
frameModifier: 'object-cover w-full h-full',
width: 1200,
height: 675
} %}
</div>
{% endif %}
<div class="flex-grow min-w-0">
<p class="text-xl md:text-2xl font-bold text-grey leading-tight">{{ item.name }}</p>
{% if item.role %}
<p class="text-base font-normal text-grey-600 leading-tight mt-1">{{ item.role }}</p>
{% endif %}
{% if item.dropDown %}
<button id="accordion-button-{{item.id}}" aria-controls="accordion-panel-{{item.id}}" class="js-accordion-item-button group peer hidden lg:inline-flex items-center gap-2 mt-3 font-bold text-base text-heading text-left" aria-expanded="false">
{{ showMoreLabel or "Show more" }}
<span class="js-accordion-item-icon w-4 h-4 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
{% render "@icon", { name: "icon-chevron", modifier: 'fill-current text-heading w-full h-full transition-colors ease-in-out rotate-90' } %}
</span>
</button>
{% endif %}
</div>
</div>
{% if item.dropDown %}
<button id="accordion-button-m-{{item.id}}" aria-controls="accordion-panel-{{item.id}}" class="js-accordion-item-button group peer order-1 lg:hidden inline-flex items-center gap-2 font-bold text-base text-heading text-left mt-2" aria-expanded="false">
{{ showMoreLabel or "Show more" }}
<span class="js-accordion-item-icon w-4 h-4 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
{% render "@icon", { name: "icon-chevron", modifier: 'fill-current text-heading w-full h-full transition-colors ease-in-out rotate-90' } %}
</span>
</button>
{% endif %}
{% if item.link %}
<a href="{{ item.link.url }}" {% if item.link.target %}target="{{ item.link.target }}"{% endif %} class="flex-shrink-0 w-10 h-10 flex items-center justify-center bg-button-2-surface hover:bg-button-2-surface-hover rounded-full p-2.5 transition order-2 lg:order-none ml-auto lg:ml-0" aria-label="{{ item.link.name }}">
{% render "@icon", { name: item.link.icon or "icon-external-link", modifier: 'fill-current text-button-2-arrow w-full h-full' } %}
</a>
{% endif %}
</div>
{% if item.dropDown %}
<div id="accordion-panel-{{item.id}}" aria-labelledby="accordion-button-{{item.id}}" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block group-hover/item:bg-button-2-surface-hover/10">
<div class="js-accordion-item-content pb-4 lg:p-4">
<div class="prose xl:prose-lg max-w-none">
{{ item.dropDown | safe }}
</div>
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{
"siteName": "UCEA",
"dataTheme": "blue",
"dataMode": "",
"headline": {
"heading": "Board of Directors",
"summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"textAlign": "center"
},
"showMoreLabel": "Show more",
"list": [
{
"id": 1,
"name": "Sir Nishan Canagarajah",
"role": "Chair of the Board President and Vice-Chancellor, University of Leicester",
"image": {
"src": "images/test-imagery/example5@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
],
"mdMax": {
"width": 1920,
"height": 720,
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
]
},
"smMax": {
"width": 1200,
"height": 750,
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
]
}
},
"link": {
"url": "https://www.le.ac.uk/",
"target": "_blank",
"name": "View profile"
}
},
{
"id": 2,
"name": "Professor Jenny Higham",
"role": "Deputy Chair of the Board and Vice-Chancellor, University of Suffolk",
"image": {
"src": "images/test-imagery/example5@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
],
"mdMax": {
"width": 1920,
"height": 720,
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
]
},
"smMax": {
"width": 1200,
"height": 750,
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
]
}
},
"dropDown": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam enim nunc, lobortis at tincidunt id, tempus a augue. Morbi vestibulum arcu maximus augue auctor, id finibus mauris suscipit. Praesent ante erat, molestie in facilisis in, ornare et sem.</p>"
},
{
"id": 3,
"name": "Professor Stuart Palmer",
"role": "Deputy Chair of the Board and Chair of Council, Brunel University of London",
"image": {
"src": "images/test-imagery/example5@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
],
"mdMax": {
"width": 1920,
"height": 720,
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
]
},
"smMax": {
"width": 1200,
"height": 750,
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
]
}
},
"link": {
"url": "/about/stuart-palmer/",
"name": "Read biography"
},
"dropDown": "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>"
},
{
"id": 4,
"name": "Dr Amara Okafor",
"role": "Board Member and Director of Research, University of Bristol",
"image": {
"src": "images/test-imagery/example5@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
],
"mdMax": {
"width": 1920,
"height": 720,
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
]
},
"smMax": {
"width": 1200,
"height": 750,
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
]
}
},
"link": {
"url": "/about/amara-okafor/",
"name": "Read biography"
},
"dropDown": "<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce maximus, quam non facilisis pellentesque, ante sapien tristique sapien.</p><p>Sed dictum felis sit amet quam rutrum maximus. Nulla et finibus nibh, vel finibus nisi.</p>"
},
{
"id": 5,
"name": "Professor Michael Chen",
"role": "Board Member and Pro-Vice-Chancellor, University of Manchester",
"image": {
"src": "images/test-imagery/example5@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
],
"mdMax": {
"width": 1920,
"height": 720,
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
]
},
"smMax": {
"width": 1200,
"height": 750,
"srcSet": [
{
"url": "images/test-imagery/example5@16-10@1200w.jpg",
"size": 1200
}
]
}
},
"dropDown": "<p>Donec id ultricies erat. Aliquam molestie ante quis venenatis eleifend. Nullam ac feugiat nulla, quis varius risus. Morbi sollicitudin eget libero sit amet mollis.</p>"
}
]
}
No notes defined.