This component currently is to be used only for the homepage to showcase images stories from students. A user can click through on a specific student to be taken to more information via a link
This component makes use of the content block component for its introduction content. Pass through a content block array. (See context tab for example)
The component currently needs a minimum of 4 student stories, to initiate the horizontal scrolling effectively. Be mindful the more student stories the more loading time.
All stories must have:
<section class="horizontal-cards">
<div class="horizontal-cards--left-block">
{% render '@uol-content-block', content_block %}
</div>
<div class="horizontal-cards--right-block">
<nav class="horizontal-cards--nav">
<div class="horizontal-cards--nav__controls">
<button class="research-slider-prev uol-button uol-icon uol-icon--mdiArrowLeft uol-icon--icon-only" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true" height="1rem" width="1rem">
<path fill="#000000" fill-rule="nonzero" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg><span class="uol-icon__label">Select previous</span></button>
<button class="research-slider-next uol-button uol-icon uol-icon--mdiArrowRight uol-icon--icon-only" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true" height="1rem" width="1rem">
<path fill="#000000" fill-rule="nonzero" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg><span class="uol-icon__label">Select next</span></button>
</div>
</nav>
{# </div> #}
<section class="horizontal-cards--section">
{% for card in cards %}
<div class="">
<a href="{{ card.link.url }}" class="horizontal-cards--section-item--card" aria-label="{{ card.heading.title }}">
<img class="horizontal-cards--section-item__img" src="{{ card.img.src }}" alt="{{ card.img.alt }}" loading="lazy">
{% render '@uol-content-block', card %}
</a>
</div>
{% endfor %}
</section>
</div>
</section>
<section class="horizontal-cards">
<div class="horizontal-cards--left-block">
<div class="uol-content-block">
<p class="uol-content-block__topic">Research & Innovation</p>
<h2 class="uol-content-block__heading">Groundbreaking research with a global impact</h2>
<p class="uol-content-block__copy">Explore our world-leading research, tackling big challenges to shape a positive future.</p>
<button class="uol-button uol-button--default
" type="submit">Meet our students</button>
</div>
</div>
<div class="horizontal-cards--right-block">
<nav class="horizontal-cards--nav">
<div class="horizontal-cards--nav__controls">
<button class="research-slider-prev uol-button uol-icon uol-icon--mdiArrowLeft uol-icon--icon-only" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true" height="1rem" width="1rem">
<path fill="#000000" fill-rule="nonzero" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg><span class="uol-icon__label">Select previous</span></button>
<button class="research-slider-next uol-button uol-icon uol-icon--mdiArrowRight uol-icon--icon-only" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true" height="1rem" width="1rem">
<path fill="#000000" fill-rule="nonzero" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg><span class="uol-icon__label">Select next</span></button>
</div>
</nav>
<section class="horizontal-cards--section">
<div class="">
<a href="" class="horizontal-cards--section-item--card" aria-label="Research to explore why Everest glacier is so warm">
<img class="horizontal-cards--section-item__img" src="/placeholders/research-card-1.jpg" alt="Astronaut on a space walk" loading="lazy">
<div class="uol-content-block">
<p class="uol-content-block__topic">Earth & Environment</p>
<h3 class="uol-content-block__heading">Research to explore why Everest glacier is so warm</h3>
<p class="uol-content-block__date">20 March 2025</p>
<p class="uol-content-block__copy">Short overview</p>
</div>
</a>
</div>
<div class="">
<a href="" class="horizontal-cards--section-item--card" aria-label="Breakthrough in next-generation polio vaccines testing a longer title than the rest of the cards">
<img class="horizontal-cards--section-item__img" src="/placeholders/research-card-2.jpg" alt="Astronaut on a space walk" loading="lazy">
<div class="uol-content-block">
<p class="uol-content-block__topic">Global Health</p>
<h3 class="uol-content-block__heading">Breakthrough in next-generation polio vaccines testing a longer title than the rest of the cards</h3>
<p class="uol-content-block__date">11 March 2025</p>
<p class="uol-content-block__copy">Short overview</p>
</div>
</a>
</div>
<div class="">
<a href="" class="horizontal-cards--section-item--card" aria-label="Making the net zero transition fair for workers">
<img class="horizontal-cards--section-item__img" src="/placeholders/research-card-3.jpg" alt="Astronaut on a space walk" loading="lazy">
<div class="uol-content-block">
<p class="uol-content-block__topic">Business and Economy</p>
<h3 class="uol-content-block__heading">Making the net zero transition fair for workers</h3>
<p class="uol-content-block__date">10 March 2025</p>
<p class="uol-content-block__copy">Short overview</p>
</div>
</a>
</div>
<div class="">
<a href="" class="horizontal-cards--section-item--card" aria-label="Research to explore why Everest glacier is so warm">
<img class="horizontal-cards--section-item__img" src="/placeholders/research-card-1.jpg" alt="Astronaut on a space walk" loading="lazy">
<div class="uol-content-block">
<p class="uol-content-block__topic">Earth & Environment</p>
<h3 class="uol-content-block__heading">Research to explore why Everest glacier is so warm</h3>
<p class="uol-content-block__date">20 March 2025</p>
<p class="uol-content-block__copy">Short overview</p>
</div>
</a>
</div>
<div class="">
<a href="" class="horizontal-cards--section-item--card" aria-label="Breakthrough in next-generation polio vaccines testing a longer title than the rest of the cards">
<img class="horizontal-cards--section-item__img" src="/placeholders/research-card-2.jpg" alt="Astronaut on a space walk" loading="lazy">
<div class="uol-content-block">
<p class="uol-content-block__topic">Global Health</p>
<h3 class="uol-content-block__heading">Breakthrough in next-generation polio vaccines testing a longer title than the rest of the cards</h3>
<p class="uol-content-block__date">11 March 2025</p>
<p class="uol-content-block__copy">Short overview</p>
</div>
</a>
</div>
</section>
</div>
</section>
// @import "node_modules/glider-js/glider.css";
.glider,.glider-contain{margin:0 auto;position:relative}.glider,.glider-track{transform:translateZ(0)}.glider-dot,.glider-next,.glider-prev{border:0;padding:0;user-select:none;outline:0}.glider-contain{width:100%}.glider{overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:none}.glider-track{width:100%;margin:0;padding:0;display:flex;z-index:1}.glider.draggable{user-select:none;cursor:-webkit-grab;cursor:grab}.glider.draggable .glider-slide img{user-select:none;pointer-events:none}.glider.drag{cursor:-webkit-grabbing;cursor:grabbing}.glider-slide{user-select:none;justify-content:center;align-content:center;width:100%;min-width:150px}.glider-slide img{max-width:100%}.glider::-webkit-scrollbar{opacity:0;height:0}.glider-next,.glider-prev{position:absolute;background:0 0;z-index:2;font-size:40px;text-decoration:none;left:-23px;top:30%;cursor:pointer;color:#666;opacity:1;line-height:1;transition:opacity .5s cubic-bezier(.17,.67,.83,.67),color .5s cubic-bezier(.17,.67,.83,.67)}.glider-next:focus,.glider-next:hover,.glider-prev:focus,.glider-prev:hover{color:#ccc}.glider-next{right:-23px;left:auto}.glider-next.disabled,.glider-prev.disabled{opacity:.25;color:#666;cursor:default}.glider-hide{opacity:0}.glider-dots{user-select:none;display:flex;flex-wrap:wrap;justify-content:center;margin:0 auto;padding:0}.glider-dot{display:block;cursor:pointer;color:#ccc;border-radius:999px;background:#ccc;width:12px;height:12px;margin:7px}.glider-dot:focus,.glider-dot:hover{background:#ddd}.glider-dot.active{background:#a89cc8}@media(max-width:36em){.glider::-webkit-scrollbar{opacity:1;-webkit-appearance:none;width:7px;height:3px}.glider::-webkit-scrollbar-thumb{opacity:1;border-radius:99px;background-color:rgba(156,156,156,.25);-webkit-box-shadow:0 0 1px rgba(255,255,255,.25);box-shadow:0 0 1px rgba(255,255,255,.25)}}
.horizontal-cards {
position: relative;
margin-bottom: 1.875rem; // text has 18px under, we require 48px, hence 30px
@include media('>=uol-media-m') {
margin-bottom: 2.75rem; // text has 20px under, we require 64px, hence 44px
}
@include media('>=uol-media-l') {
margin-bottom: 3.75rem; // text has 20px under, we require 80px, hence 60px
}
.horizontal-cards--left-block .uol-content-block {
background-color: $color-cream;
padding: 2.5rem 2rem;
margin-bottom: $spacing-5;
.uol-content-block__heading {
@extend .uol-typography-heading-2;
}
}
}
.horizontal-cards--left-block {
.uol-content-block * {
@include media('>=uol-media-s') {
max-width: 470px;
}
@include media('>=uol-media-m') {
max-width: 610px;
}
@include media('>=uol-media-l') {
max-width: 674px;
}
}
.uol-button {
margin-bottom: 0;
}
}
.horizontal-cards--link {
background-color: #111;
color: #fff;
padding: 1rem;
text-decoration: none;
}
.horizontal-cards--nav {
display: flex;
height: 5.8125rem; // 93px: 45px for buttons, 24px above and below
background-color: $color-cream;
margin-bottom: 1rem;
.horizontal-cards--nav__controls {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
}
.uol-button {
background-color: #0A0202;
margin: 0 $spacing-6 0 0;
padding: 1rem;
text-decoration: none;
&[aria-disabled="true"] {
background-color: #6E6B6B;
}
svg {
width: 1.5em !important;
height: 1.5em !important;
}
}
}
.horizontal-cards--section {
display: flex;
flex-wrap: wrap;
padding: 0;
.glider-track {
margin-top: 0;
}
}
.horizontal-cards--section-item {
display: flex;
flex-direction: column;
margin-left: $spacing-4;
justify-content: flex-start;
@include media('>=uol-media-m') {
gap: $spacing-5;
}
@include media('>=uol-media-l') {
margin-left: $spacing-5;
}
&__category {
order: 2;
}
&__date {
order: 4
}
}
.horizontal-cards--section-item--card {
text-decoration: none;
display: flex;
flex-direction: column;
&:hover {
.uol-content-block__heading {
text-decoration: underline
}
}
&:focus {
.uol-content-block__heading {
background-color: $color-brand--faded;
text-decoration: underline;
text-decoration-thickness: 3px;
text-decoration-color: $color-brand--bright;
text-underline-offset: 4px;
outline: 2px dotted inherit;
outline-offset: 1px;
outline-color: transparent;
}
}
}
.horizontal-cards--section-item__img {
aspect-ratio: 3 / 2;
object-fit: cover;
}
.horizontal-cards--right-block {
.glider-slide {
align-content: flex-start;
margin: 0 calc(#{$spacing-4} / 2);
@include media('>=uol-media-l') {
margin: $spacing-2 calc(#{$spacing-5} / 2);
}
.uol-content-block {
margin-top: $spacing-6;
}
.uol-content-block__heading {
@extend .uol-typography-heading-4;
@include media("<uol-media-m") {
font-size: 1.375rem;
}
}
}
}
import Glider from 'glider-js';
export const horizontalCardsCaurosel = () => {
const studentStoriesBlock = document.querySelectorAll('.horizontal-cards');
studentStoriesBlock.forEach( (section) => {
new Glider(section.querySelector('.horizontal-cards--section'), {
// Optional parameters
slidesToShow: 1.5,
slidesToScroll: 1,
draggable: true,
duration: 0.5,
arrows: {
prev: ".research-slider-prev",
next: ".research-slider-next"
},
// Responsive breakpoints
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
scrollLock: false,
}
},
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
scrollLock: false,
}
}
]
});
});
}
{
"content_block": {
"heading": {
"level": "2",
"title": "Groundbreaking research with a global impact"
},
"topic": "Research & Innovation",
"copy": "Explore our world-leading research, tackling big challenges to shape a positive future.",
"button": {
"style": "default",
"type": "submit",
"content": "Meet our students"
}
},
"cards": [
{
"topic": "Earth & Environment",
"img": {
"src": "/placeholders/research-card-1.jpg",
"alt": "Astronaut on a space walk"
},
"heading": {
"level": "3",
"title": "Research to explore why Everest glacier is so warm"
},
"date": "20 March 2025",
"copy": "Short overview"
},
{
"topic": "Global Health",
"img": {
"src": "/placeholders/research-card-2.jpg",
"alt": "Astronaut on a space walk"
},
"heading": {
"level": "3",
"title": "Breakthrough in next-generation polio vaccines testing a longer title than the rest of the cards"
},
"date": "11 March 2025",
"copy": "Short overview"
},
{
"topic": "Business and Economy",
"img": {
"src": "/placeholders/research-card-3.jpg",
"alt": "Astronaut on a space walk"
},
"heading": {
"level": "3",
"title": "Making the net zero transition fair for workers"
},
"date": "10 March 2025",
"copy": "Short overview"
},
{
"topic": "Earth & Environment",
"img": {
"src": "/placeholders/research-card-1.jpg",
"alt": "Astronaut on a space walk"
},
"heading": {
"level": "3",
"title": "Research to explore why Everest glacier is so warm"
},
"date": "20 March 2025",
"copy": "Short overview"
},
{
"topic": "Global Health",
"img": {
"src": "/placeholders/research-card-2.jpg",
"alt": "Astronaut on a space walk"
},
"heading": {
"level": "3",
"title": "Breakthrough in next-generation polio vaccines testing a longer title than the rest of the cards"
},
"date": "11 March 2025",
"copy": "Short overview"
}
],
"stories": [
{
"title": "Breakthrough in next-generation polio vaccines testing a longer title than the rest of the cards",
"lead": "Name is a second year Theoretical Physics BSc student from Chester",
"category": "Earth & Environment",
"date": "2025-03-17",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Astronaut on a space walk"
},
"href": "/horizontal-cards/njoki"
},
{
"title": "Breakthrough in next-generation polio vaccines",
"lead": "Researchers from Leeds University Business School have published a policy brief on “Workers, trade unions and Just Transitions in the UK” with recommendations for both government and trade unions.",
"category": "Earth & Environment",
"date": "2025-03-15",
"img": {
"src": "/placeholders/ph-tiles-9.jpg",
"alt": "Astronaut on a space walk"
},
"href": "/horizontal-cards/abbie"
},
{
"title": "Making the net zero transition fair for workers",
"lead": "Name is a second year Theoretical Physics BSc student from Chester",
"category": "Global Health",
"date": "2025-03-15",
"img": {
"src": "/placeholders/tiles/parkinson.jpg",
"alt": "Astronaut on a space walk"
},
"href": "/student-stories/mo"
},
{
"title": "Abbies story",
"lead": "Name is a second year Theoretical Physics BSc student from Chester",
"category": "Global Health",
"date": "2025-02-15",
"img": {
"src": "/placeholders/ph-tiles-5.jpg",
"alt": "Astronaut on a space walk"
},
"href": "/student-stories/abbie"
},
{
"title": "Making the net zero transition fair for workers",
"category": "Global Health",
"lead": "Name is a second year Theoretical Physics BSc student from Chester",
"date": "2025-02-12",
"img": {
"src": "/placeholders/ph-tiles-5.jpg",
"alt": "Astronaut on a space walk"
},
"href": "/student-stories/gfhahjjkdf"
},
{
"title": "Making the net zero transition fair for workers",
"lead": "Name is a second year Theoretical Physics BSc student from Chester",
"category": "Research & Innovation",
"date": "2025-02-10",
"img": {
"src": "/placeholders/ph-tiles-5.jpg",
"alt": "Astronaut on a space walk"
},
"href": "/student-stories/abbie"
},
{
"title": "Making the net zero transition fair for workers",
"lead": "Researchers from Leeds University Business School have published a policy brief on “Workers, trade unions and Just Transitions in the UK” with recommendations for both government and trade unions.",
"category": "Global Health",
"date": "2025-01-08",
"img": {
"src": "/placeholders/tiles/background.jpg",
"alt": "Astronaut on a space walk"
},
"href": "/student-stories/fshjafshgfsagh"
}
]
}