University of Leeds Design System v1.0.18

Cards With Horizontal Scroll

Horizontal Cards overview

This component currently is to be used only for the homepage to showcase university research. A user can click through on a specific card to be taken to more information via a link

Guidance

This component makes use of the content block component for its introduction content and card content. Pass through a content block array. (See context tab for example)

The component currently needs a minimum of 6 cards, to initiate the horizontal scrolling effectively. Be mindful the more cards the more loading time.

This component uses the Glider js NPM package (https://nickpiscitelli.github.io/Glider.js/) for carousel functionality. It is imported via javascript module.

Character counts

Heading/intro content:

  • Sub text: A soft limit of 20 characters (including spaces).

  • Heading: A soft limit of 40 characters (including spaces).

  • Body copy: A soft limit of 80 characters (including spaces).

  • CTA button: A hard limit of 18 characters (including spaces).

Individual cards in the carousel

  • Topic: A soft limit of 20 characters (including spaces).
  • Title: A soft limit of 40 characters (including spaces).
  • Date: N/A
  • Lead sentence: A soft limit of 40 characters (including spaces).
<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="horizontal-cards--section-item--card">
            <img class="horizontal-cards--section-item__img" src="{{ card.img.src }}" alt="{{ card.img.alt }}" loading="lazy">
            {% render '@uol-content-block', card %}
          </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 &amp; 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="horizontal-cards--section-item--card">
                <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 &amp; Environment</p>

                    <h3 class="uol-content-block__heading">
                        <a href="/test-link">
                            Research to explore why Everest glacier is so warm test
                        </a>
                    </h3>

                    <p class="uol-content-block__date">20 March 2025</p>

                    <p class="uol-content-block__copy">Short overview</p>

                </div>

            </div>

            <div class="horizontal-cards--section-item--card">
                <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">
                        <a href="/test-link-2">
                            Breakthrough in next-generation polio vaccines testing a longer title than the rest of the cards
                        </a>
                    </h3>

                    <p class="uol-content-block__date">11 March 2025</p>

                    <p class="uol-content-block__copy">Short overview</p>

                </div>

            </div>

            <div class="horizontal-cards--section-item--card">
                <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">
                        <a href="/test-link-3">
                            Making the net zero transition fair for workers
                        </a>
                    </h3>

                    <p class="uol-content-block__date">10 March 2025</p>

                    <p class="uol-content-block__copy">Short overview</p>

                </div>

            </div>

            <div class="horizontal-cards--section-item--card">
                <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 &amp; Environment</p>

                    <h3 class="uol-content-block__heading">
                        <a href="/test-link-4">
                            Research to explore why Everest glacier is so warm
                        </a>
                    </h3>

                    <p class="uol-content-block__date">20 March 2025</p>

                    <p class="uol-content-block__copy">Short overview</p>

                </div>

            </div>

            <div class="horizontal-cards--section-item--card">
                <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">
                        <a href="/test-link-5">
                            Breakthrough in next-generation polio vaccines testing a longer title than the rest of the cards
                        </a>
                    </h3>

                    <p class="uol-content-block__date">11 March 2025</p>

                    <p class="uol-content-block__copy">Short overview</p>

                </div>

            </div>

        </section>
    </div>
</section>
  • Content: 
    // @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 {
    position: relative;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;

    &: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 {
            position: static;
            margin-top: $spacing-6;
        }

        .uol-content-block__heading {
            @extend .uol-typography-heading-4;

                @include media("<uol-media-m") {
                    font-size: 1.375rem;
                }

        }
    }
}
  • URL: /components/raw/cards-horizontal-scrolling/_cards-horizontal-scrolling.scss
  • Filesystem Path: src/library/02-components/cards-horizontal-scrolling/_cards-horizontal-scrolling.scss
  • Size: 5.6 KB
  • Content: 
    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,
      }
    }
  ]
});


});
}
  • URL: /components/raw/cards-horizontal-scrolling/cards-horizontal-scrolling.module.js
  • Filesystem Path: src/library/02-components/cards-horizontal-scrolling/cards-horizontal-scrolling.module.js
  • Size: 804 Bytes 
{
  "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 test",
        "title_link": true,
        "title_href": "/test-link"
      },
      "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",
        "title_link": true,
        "title_href": "/test-link-2"
      },
      "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",
        "title_link": true,
        "title_href": "/test-link-3"
      },
      "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",
        "title_link": true,
        "title_href": "/test-link-4"
      },
      "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",
        "title_link": true,
        "title_href": "/test-link-5"
      },
      "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"
    }
  ]
}