University of Leeds Design System v1.0.17

Research Cards

No notes defined.

<div class="manifesto">
  <div class="section-intro">
    <div class="section-intro__content">
      {% if category %}
        <span class="section-intro__category">{{ category }}</span>
      {% endif %}
      {% if heading %}
        <h2 class="section-intro__heading">
          {{ heading }}
        </h2>
      {% endif %}
      {% if description %}
        <div class="section-intro__description">
          <p>{{ description }}</p>
        </div>
      {% endif %}
      {% if cta.link %}
        <a href="{{ cta.link }}" class="section-intro__cta-link">{{ cta.label }}</a>
      {% endif %}
    </div>
  </div>
  <section class="carousel">
    <div class="carousel__header">
      <div class="carousel__controls">
        <div class="carousel__buttons">
          <button class="carousel__button carousel__button--prev" type="button" aria-label="Show previous slide">
            <svg
              class="carousel__button__svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path d="M7.825 13L13.425 18.6L12 20L4 12L12 4L13.425 5.4L7.825 11H20V13H7.825Z"/>
            </svg>
          </button>
          <button class="carousel__button carousel__button--next" type="button" aria-label="Show next slide">
            <svg
              class="carousel__button__svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path d="M16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20L10.575 18.6L16.175 13Z"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="carousel__slider">
      <div class="carousel__slider__container">
        {% for slide in slides %}
          <div class="carousel__slide">
            <div class="carousel__slide__image-container">
              <img class="carousel__slide__image" src="{{ slide.media.image }}" alt="{{ slide.media.alt }}" loading="lazy"/>
            </div>
            <span class="carousel__slide__category">{{ slide.category }}</span>
            <h4 class="carousel__slide__heading">
              <a href="{{ slide.link }}" class="carousel__slide__link">{{ slide.heading }}</a>
            </h4>
            <p class="carousel__slide__summary">{{ slide.summary }}</p>
          </div>
        {% endfor %}
      </div>
    </div>
  </section>
  </div>
</div>
 
<div class="manifesto">
    <div class="section-intro">
        <div class="section-intro__content">

            <span class="section-intro__category">Research &amp; Innovation</span>

            <h2 class="section-intro__heading">
                Groundbreaking research with a global impact
            </h2>

            <div class="section-intro__description">
                <p>Explore our world-leading research, tackling big challenges to shape a positive future.</p>
            </div>

            <a href="#link" class="section-intro__cta-link">Explore &amp; research</a>

        </div>
    </div>
    <section class="carousel">
        <div class="carousel__header">
            <div class="carousel__controls">
                <div class="carousel__buttons">
                    <button class="carousel__button carousel__button--prev" type="button" aria-label="Show previous slide">
                        <svg class="carousel__button__svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M7.825 13L13.425 18.6L12 20L4 12L12 4L13.425 5.4L7.825 11H20V13H7.825Z" />
                        </svg>
                    </button>
                    <button class="carousel__button carousel__button--next" type="button" aria-label="Show next slide">
                        <svg class="carousel__button__svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20L10.575 18.6L16.175 13Z" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        <div class="carousel__slider">
            <div class="carousel__slider__container">

                <div class="carousel__slide">
                    <div class="carousel__slide__image-container">
                        <img class="carousel__slide__image" src="/placeholders/ph-tiles-9.jpg" alt="Example alt text" loading="lazy" />
                    </div>
                    <span class="carousel__slide__category">Earth &amp; Environment</span>
                    <h4 class="carousel__slide__heading">
                        <a href="#link" class="carousel__slide__link">Research to explore why Everest glacier is so warm</a>
                    </h4>
                    <p class="carousel__slide__summary">A team of researchers is making final preparations for a trip to Mount Everest in Nepal next month to explore why the ice of one of the mountain’s most iconic glaciers is so close to the melting point</p>
                </div>

                <div class="carousel__slide">
                    <div class="carousel__slide__image-container">
                        <img class="carousel__slide__image" src="/placeholders/tiles/parkinson.jpg" alt="Example alt text" loading="lazy" />
                    </div>
                    <span class="carousel__slide__category">Global Health</span>
                    <h4 class="carousel__slide__heading">
                        <a href="#link" class="carousel__slide__link">Breakthrough in next-generation polio vaccines</a>
                    </h4>
                    <p class="carousel__slide__summary">Researchers have taken a major step towards producing a more affordable and lower-risk polio vaccine, research led by the University of Leeds has found.</p>
                </div>

                <div class="carousel__slide">
                    <div class="carousel__slide__image-container">
                        <img class="carousel__slide__image" src="/placeholders/ph-tiles-5.jpg" alt="Example alt text" loading="lazy" />
                    </div>
                    <span class="carousel__slide__category">Business and Economy</span>
                    <h4 class="carousel__slide__heading">
                        <a href="#link" class="carousel__slide__link">Making the net zero transition fair for workers</a>
                    </h4>
                    <p class="carousel__slide__summary">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.</p>
                </div>

                <div class="carousel__slide">
                    <div class="carousel__slide__image-container">
                        <img class="carousel__slide__image" src="/placeholders/tiles/background.jpg" alt="Example alt text" loading="lazy" />
                    </div>
                    <span class="carousel__slide__category">Earth &amp; Environment</span>
                    <h4 class="carousel__slide__heading">
                        <a href="#link" class="carousel__slide__link">Research to explore why Everest glacier is so warm</a>
                    </h4>
                    <p class="carousel__slide__summary">A team of researchers is making final preparations for a trip to Mount Everest in Nepal next month to explore why the ice of one of the mountain’s most iconic glaciers is so close to the melting point</p>
                </div>

                <div class="carousel__slide">
                    <div class="carousel__slide__image-container">
                        <img class="carousel__slide__image" src="/placeholders/tiles/parkinson.jpg" alt="Example alt text" loading="lazy" />
                    </div>
                    <span class="carousel__slide__category">Global Health</span>
                    <h4 class="carousel__slide__heading">
                        <a href="#link" class="carousel__slide__link">Breakthrough in next-generation polio vaccines</a>
                    </h4>
                    <p class="carousel__slide__summary">Researchers have taken a major step towards producing a more affordable and lower-risk polio vaccine, research led by the University of Leeds has found.</p>
                </div>

                <div class="carousel__slide">
                    <div class="carousel__slide__image-container">
                        <img class="carousel__slide__image" src="/placeholders/tiles/background.jpg" alt="Example alt text" loading="lazy" />
                    </div>
                    <span class="carousel__slide__category">Business and Economy</span>
                    <h4 class="carousel__slide__heading">
                        <a href="#link" class="carousel__slide__link">Making the net zero transition fair for workers</a>
                    </h4>
                    <p class="carousel__slide__summary">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.</p>
                </div>

            </div>
        </div>
    </section>
</div>
</div>
  • Content: 
    /*************************
** Colors **
*************************/
$color-black: #1a1a1a;
$color-white: #ffffff;
// $color-cream: #fff0e2;
$color-vivid-blue: #0037FB;
$color-pale-blue: #9CEDFF;

/*************************
** Breakpoints **
*************************/
$tablet: 768px;
$desktop: 1023px;

/*************************
** Typography **
*************************/
$html-font-size: 100%;
$normal: 400;
$medium: 600;
$black: 900;
$body-font: "freight-sans-pro", sans-serif;
$heading-font: "freight-text-pro", serif;

@mixin h2 {
  font-size: 1.75rem;
  font-style: normal;
  font-weight: $black;
  line-height: 2.25rem;

  @media screen and (min-width: $tablet) {
    font-size: 2.25rem;
    line-height: 3rem;
    letter-spacing: -0.8px;
  }

  @media screen and (min-width: $desktop) {
    font-size: 2.625rem;
    line-height: 3.25rem;
  }
}

@mixin h4 {
  font-size: 1.25rem;
  font-style: normal;
  font-weight: $black;
  line-height: 1.75rem;

  @media screen and (min-width: $tablet) {
    font-size: 1.75rem;
    line-height: 2.5rem;
  }

  @media screen and (min-width: $desktop) {
    font-size: 1.75rem;
    line-height: 2.375rem;
  }
}

@mixin body {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: $normal;
  line-height: 1.75rem;

  @media screen and (min-width: $tablet) {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  @media screen and (min-width: $desktop) {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@mixin body-small {
  font-size: 1rem;
  font-style: normal;
  font-weight: $normal;
  line-height: 1.5rem;

  @media screen and (min-width: $tablet) {
    line-height: 1.625rem;
  }

  @media screen and (min-width: $desktop) {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@mixin buttonType {
  font-size: 1.25rem;
  font-style: normal;
  font-weight: $medium;
  line-height: 1.75rem;

  @media screen and (min-width: $tablet) {
    font-size: 1.375rem;
    line-height: 2.125rem;
  }

  @media screen and (min-width: $desktop) {
    font-size: 1.5rem;
    line-height: 2.25rem;
  }
}

/*************************
** Mixins **
*************************/

@mixin button {
  display: inline-block;
  width: 100%;
  text-align: center;
  border: 2px solid $color-black;
  padding: 1rem 1.25rem;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  @include buttonType;

  &:hover {
    background-color: $color-black;
    color: $color-white;
  }

  &:focus {
    @include focus;
  }

  @media screen and (min-width: $tablet) {
    width: auto;
  }
}

/*************************
** Accessibility **
*************************/
@mixin sr-only {
  position: absolute !important;
  top: auto;
  left: -10000px;
  overflow: hidden;
  width: 1px;
  height: 1px;
  font-size: 1rem;
}

@mixin focus {
  border: 2px solid $color-black;
  box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-vivid-blue;
  outline: 2px solid transparent;
}


.manifesto {
  margin: 48px 0;

  .section-intro {
    display: grid;
    grid-template-columns: 1fr;
    padding: 2.5rem 2rem;
    background-color: $color-cream;

    @media screen and (min-width: 1023px) {
      grid-template-columns: 1fr 1fr;
    }

    &__content {
      @media screen and (min-width: 1023px) {
        grid: 1 / span 1;
      }
    }

    &__category {
      // @include body-small;
    }

    &__heading {
      @include h2;
    }

    &__description {
      margin-top: 1.25rem;
    }

    &__cta-link {
      margin-top: 2rem;
      @include button;
    }
  }

  .carousel {
    margin-top: 1rem;

    @media screen and (min-width: 768px) {
      margin-top: 2rem;
    }

    &__header {
      display: flex;
      justify-content: flex-end;
      background-color: $color-cream;
      padding: 2.5rem 2rem;
    }

    &__buttons {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
      align-items: center;
    }

    &__button {
      -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value),
          0.5);
      -webkit-appearance: none;
      appearance: none;
      background-color: transparent;
      touch-action: manipulation;
      display: inline-flex;
      text-decoration: none;
      cursor: pointer;
      padding: 0.75rem;
      z-index: 1;
      color: var(--text-body);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid $color-black;
      transition: background-color 0.3s ease, color 0.3s ease;

      &:hover {
        background-color: $color-black;
        color: $color-white;
      }

      &:focus {
        @include focus;
      }

      &:disabled {
        opacity: 0.2;
        cursor: not-allowed;
      }

      &:disabled:hover,
      &:disabled:focus {
        background-color: transparent;
        color: var(--text-body);
      }

      &__svg {
        fill: currentColor;

      }
    }

    &__slider {
      overflow: hidden;
      margin-top: 1rem;

      @media screen and (min-width: 768px) {
        margin-top: 2rem;
      }

      &__container {
        display: flex;
        gap: 2rem;
      }
    }

    /* Note: The calc percentage - 1rem is to take into account the outer container.
  You may need to adjust this when it is integrated into your design system. */
    &__slide {
      flex: 0 0 calc(75% - 1rem);
      min-width: 0;
      cursor: pointer;

      &:hover {
        .carousel__slide__image {
          transform: scale(110%);
        }

        .carousel__slide__heading {
          text-decoration: underline;
          text-decoration-thickness: 2px;
        }
      }

      @media screen and (min-width: 768px) {
        flex: 0 0 calc(50% - 1rem);
      }

      @media screen and (min-width: 1023px) {
        flex: 0 0 calc(33.33% - 1rem);
      }

      &__image-container {
        overflow: hidden;
      }

      &__image {
        width: 100%;
        height: auto;
        transform: scale(1);
        transition: transform 0.3s ease-in-out;
      }

      &__category {
        @include body-small;
      }

      &__heading {
        margin-top: 0.5rem;
        transition: underline 0.3s ease-in-out;
        @include h4;
      }

      &__link {
        &:focus,
        &:focus-visible {
          background-color: $color-pale-blue;
          text-decoration-color: $color-vivid-blue !important;
          -webkit-text-decoration-color: $color-vivid-blue !important;
          text-decoration: underline;
          text-decoration-thickness: 2px;
        }
      }

      &__summary {
        margin-top: 1.25rem;
      }

      &__timestamp {
        font-weight: $medium;
        margin-top: 1rem;
        @include body-small;
      }

      &__link {
        text-decoration: none;
      }
    }
  }
}
  • URL: /components/raw/uol-research-cards/_research-cards.scss
  • Filesystem Path: src/library/02-components/research-cards/_research-cards.scss
  • Size: 6.8 KB
  • Content: 
    import EmblaCarousel from 'embla-carousel';
export const manifestoCarousel =() => {
  const carousels = document.querySelectorAll('.carousel');
  if (!carousels) {
    console.error('Carousel element not found in the DOM');
    return;
  }

  carousels.forEach((carousel) => {
    const OPTIONS = {
      loop: false,
      align: 'start',
      containScroll: 'trimSnaps',
      slidesToScroll: 1,
    };

    const emblaCarousel = carousel.querySelector('.carousel__slider');

    const emblaApi = EmblaCarousel(emblaCarousel, OPTIONS);

    const slide = carousel.querySelector('.carousel__slide');
    const link = slide.querySelector('.carousel__slide__link');

    slide.addEventListener('click', (event) => {
      event.preventDefault();
      link.click();
    });

    const prevBtn = carousel.querySelector('.carousel__button--prev');
    const nextBtn = carousel.querySelector('.carousel__button--next');

    const addTogglePrevNextBtnsActive = (emblaApi, prevBtn, nextBtn) => {
      const togglePrevNextBtnsState = () => {
        if (emblaApi.canScrollPrev()) prevBtn.removeAttribute('disabled');
        else prevBtn.setAttribute('disabled', 'disabled');

        if (emblaApi.canScrollNext()) nextBtn.removeAttribute('disabled');
        else nextBtn.setAttribute('disabled', 'disabled');
      };

      emblaApi
        .on('select', togglePrevNextBtnsState)
        .on('init', togglePrevNextBtnsState)
        .on('reInit', togglePrevNextBtnsState);

      return () => {
        prevBtn.removeAttribute('disabled');
        nextBtn.removeAttribute('disabled');
      };
    };

    const scrollPrev = () => {
      emblaApi.scrollPrev();
    };
    const scrollNext = () => {
      emblaApi.scrollNext();
    };
    prevBtn.addEventListener('click', scrollPrev, false);
    nextBtn.addEventListener('click', scrollNext, false);

    const removeTogglePrevNextBtnsActive = addTogglePrevNextBtnsActive(
      emblaApi,
      prevBtn,
      nextBtn
    );

    return () => {
      removeTogglePrevNextBtnsActive();
      prevBtn.removeEventListener('click', scrollPrev, false);
      nextBtn.removeEventListener('click', scrollNext, false);
    };
  });
}
  • URL: /components/raw/uol-research-cards/research-cards.module.js
  • Filesystem Path: src/library/02-components/research-cards/research-cards.module.js
  • Size: 2.2 KB
  • Handle: @uol-research-cards
  • Preview:
  • Filesystem Path: src/library/02-components/research-cards/research-cards.njk 
{
  "category": "Research & Innovation",
  "heading": "Groundbreaking research with a global impact",
  "description": "Explore our world-leading research, tackling big challenges to shape a positive future.",
  "cta": {
    "link": "#link",
    "label": "Explore & research"
  },
  "media": {
    "image": "/placeholders/ph-tiles-1.jpg",
    "alt": "Example alt text"
  },
  "slides": [
    {
      "media": {
        "image": "/placeholders/ph-tiles-9.jpg",
        "alt": "Example alt text"
      },
      "link": "#link",
      "category": "Earth & Environment",
      "heading": "Research to explore why Everest glacier is so warm",
      "timestamp": "20th March 2025",
      "summary": "A team of researchers is making final preparations for a trip to Mount Everest in Nepal next month to explore why the ice of one of the mountain’s most iconic glaciers is so close to the melting point"
    },
    {
      "media": {
        "image": "/placeholders/tiles/parkinson.jpg",
        "alt": "Example alt text"
      },
      "link": "#link",
      "category": "Global Health",
      "heading": "Breakthrough in next-generation polio vaccines",
      "timestamp": "11th March 2025",
      "summary": "Researchers have taken a major step towards producing a more affordable and lower-risk polio vaccine, research led by the University of Leeds has found."
    },
    {
      "media": {
        "image": "/placeholders/ph-tiles-5.jpg",
        "alt": "Example alt text"
      },
      "link": "#link",
      "category": "Business and Economy",
      "heading": "Making the net zero transition fair for workers",
      "timestamp": "10th March 2025",
      "summary": "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."
    },
    {
      "media": {
        "image": "/placeholders/tiles/background.jpg",
        "alt": "Example alt text"
      },
      "link": "#link",
      "category": "Earth & Environment",
      "heading": "Research to explore why Everest glacier is so warm",
      "timestamp": "20th March 2025",
      "summary": "A team of researchers is making final preparations for a trip to Mount Everest in Nepal next month to explore why the ice of one of the mountain’s most iconic glaciers is so close to the melting point"
    },
    {
      "media": {
        "image": "/placeholders/tiles/parkinson.jpg",
        "alt": "Example alt text"
      },
      "link": "#link",
      "category": "Global Health",
      "heading": "Breakthrough in next-generation polio vaccines",
      "timestamp": "11th March 2025",
      "summary": "Researchers have taken a major step towards producing a more affordable and lower-risk polio vaccine, research led by the University of Leeds has found."
    },
    {
      "media": {
        "image": "/placeholders/tiles/background.jpg",
        "alt": "Example alt text"
      },
      "link": "#link",
      "category": "Business and Economy",
      "heading": "Making the net zero transition fair for workers",
      "timestamp": "10th March 2025",
      "summary": "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."
    }
  ]
}