University of Leeds Design System v1.0.16

Student Stories

Student stories overview

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

Parameters

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:

  • title
  • image
  • alt text
  • lead
  • link url
<section class="student-stories">
  <div class="student-stories--left-block">
    {% render '@uol-content-block', content_block %}
    </div>
    <div class="student-stories--right-block">
    <nav class="student-stories--nav">
      <div class="student-stories--nav__controls">
        <button class="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">Contact</span></button>
        <button class="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">Contact</span></button>
      </div>
    </nav>
{# </div> #}
    <section class="student-stories--section">
      {% for student in stories %}
      <div class="student-stories--section-item">
        <a href="{{ student.href }}" class="student-stories--section-item__link" aria-label="Read {{ student.title }}">
          <h5 class="student-stories--section-item__title">{{ student.title }}</h5>
          <img class="student-stories--section-item__img" src="{{ student.img.src }}" alt="{{ student.img.alt }}" loading="lazy">
          <p class="student-stories--section-item__lead">{{ student.lead }}</p>
        </a>
      </div>
      {% endfor %}

    </section>
  </div>
</section>
 
<section class="student-stories">
    <div class="student-stories--left-block">
        <div class="uol-content-block">

            <p class="uol-content-block__topic">Student stories</p>

            <h4 class="uol-content-block__heading">Life at Leeds</h4>

            <p class="uol-content-block__copy">Don’t just take it from us–hear from our students and alumni about life at Leeds and beyond</p>

            <button class="uol-button uol-button--default
    " type="submit">Meet our students</button>

        </div>
    </div>
    <div class="student-stories--right-block">
        <nav class="student-stories--nav">
            <div class="student-stories--nav__controls">
                <button class="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">Contact</span></button>
                <button class="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">Contact</span></button>
            </div>
        </nav>

        <section class="student-stories--section">

            <div class="student-stories--section-item">
                <a href="/student-stories/njoki" class="student-stories--section-item__link" aria-label="Read Njoki’s story">
                    <h5 class="student-stories--section-item__title">Njoki’s story</h5>
                    <img class="student-stories--section-item__img" src="/placeholders/new-homepage/student_1.jpg" alt="Astronaut on a space walk" loading="lazy">
                    <p class="student-stories--section-item__lead">Name is a second year Theoretical Physics BSc student from Chester</p>
                </a>
            </div>

            <div class="student-stories--section-item">
                <a href="/student-stories/abbie" class="student-stories--section-item__link" aria-label="Read Abbie’s story">
                    <h5 class="student-stories--section-item__title">Abbie’s story</h5>
                    <img class="student-stories--section-item__img" src="/placeholders/new-homepage/student_2.jpg" alt="Astronaut on a space walk" loading="lazy">
                    <p class="student-stories--section-item__lead">Name is a second year Theoretical Physics BSc student from Chester</p>
                </a>
            </div>

            <div class="student-stories--section-item">
                <a href="/student-stories/mo" class="student-stories--section-item__link" aria-label="Read Mo’s story">
                    <h5 class="student-stories--section-item__title">Mo’s story</h5>
                    <img class="student-stories--section-item__img" src="/placeholders/new-homepage/student_3.jpg" alt="Astronaut on a space walk" loading="lazy">
                    <p class="student-stories--section-item__lead">Name is a second year Theoretical Physics BSc student from Chester</p>
                </a>
            </div>

            <div class="student-stories--section-item">
                <a href="/student-stories/abbie" class="student-stories--section-item__link" aria-label="Read Abbies story">
                    <h5 class="student-stories--section-item__title">Abbies story</h5>
                    <img class="student-stories--section-item__img" src="/placeholders/new-homepage/student_4.jpg" alt="Astronaut on a space walk" loading="lazy">
                    <p class="student-stories--section-item__lead">Name is a second year Theoretical Physics BSc student from Chester</p>
                </a>
            </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)}}

.student-stories {
    position: relative;

    .uol-content-block {
        background-color: $color-brand-teal;
        padding: 2.5rem 2rem;
        margin-bottom: 1.5rem;

        @include media('>=uol-media-m') {
            margin-bottom: 1rem;
        }
    }
    .uol-content-block__heading {
        @extend .uol-typography-heading-2;
    }

}


.student-stories--link {
    background-color: #111;
    color: #fff;
    padding: 1rem;
    text-decoration: none;
}

.student-stories--nav {
    display: flex;
    height: 100px;
    background-color: $color-brand-teal;
    margin-bottom: 1rem;

    .student-stories--nav__controls {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
    }
    .uol-button {
        background-color: #A12B16;
        margin: 0.75rem;
        padding: 1rem;
        text-decoration: none;

        &[aria-disabled="true"] {
           background-color: #6E6B6B;
        }

         svg {
            width: 1.5em !important;
            height: 1.5em !important;
        }
    }
}

.student-stories--section {
  display: flex;
  flex-wrap: wrap;
//   gap: 2rem;
  padding: 0;
}

.student-stories--section-item {
    display: flex;
    flex-direction: column;
}
.student-stories--section-item__link {
    text-decoration: none;
    display: flex;
    flex-direction: column;

    // @include link_focus();
    &:hover {
        .student-stories--section-item__title {
            text-decoration: underline
        }
    }
    &:focus {
        .student-stories--section-item__title {
            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;
        }
    }

}

.student-stories--section-item__title {
    @extend .uol-typography-heading-4;

    width: fit-content;
    margin: 2rem 0 1rem 0;
    order: 2;
}

.student-stories--section-item__lead {
    order: 3;

    @extend .uol-typography-paragraph;
    margin-top: 0;

}
.student-stories--section-item__img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    order: 1;
}

.glider-track {
    gap: 1rem;

    @include media('>=uol-media-l') {
        gap: 1.5rem;
    }

        @include media('>=uol-media-xl') {
        gap: 2rem;
    }
}

@include media('>=uol-media-l') {
    .student-stories--left-block {
        background-color: $color-brand-teal;


        .uol-content-block {
            width: calc(34% - 2*2rem);
        }
    }
    .student-stories--right-block {
        position: absolute;
        right: 0;
        top: 0;
        width: 66%;
    }
}
  • URL: /components/raw/student-stories/_student_stories.scss
  • Filesystem Path: src/library/02-components/student-stories/_student_stories.scss
  • Size: 4.7 KB
  • Content: 
    import Glider from 'glider-js';

export const studentStoriesCaurosel = () => {

  const studentStoriesBlock = document.querySelectorAll('.student-stories');


studentStoriesBlock.forEach( (section) => {
new Glider(section.querySelector('.student-stories--section'), {
  // Optional parameters
  slidesToShow: 1.5,
  slidesToScroll: 1,
  draggable: true,
  duration: 0.5,
  arrows: {
    prev: ".slider-prev",
    next: ".slider-next"
  },

  // Responsive breakpoints
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        scrollLock: false,
      }
    }
  ]
});

function setStoriesHeight() {
  if (window.innerWidth > 1023) {
  let leftSectionHeight = section.querySelector('.student-stories--left-block').offsetHeight;
  let rightSectionHeight = section.querySelector('.student-stories--right-block').offsetHeight;
  let setComponentHeight= Math.max(leftSectionHeight, rightSectionHeight);

  section.style.height = setComponentHeight + 'px';
}
  else {
    section.style.height = 'auto';
  }

}

  window.addEventListener("resize", setStoriesHeight);
  setStoriesHeight();
});
}
  • URL: /components/raw/student-stories/student-stories.module.js
  • Filesystem Path: src/library/02-components/student-stories/student-stories.module.js
  • Size: 1.2 KB 
{
  "content_block": {
    "heading": {
      "level": "4",
      "title": "Life at Leeds"
    },
    "topic": "Student stories",
    "copy": "Don’t just take it from us–hear from our students and alumni about life at Leeds and beyond",
    "button": {
      "style": "default",
      "type": "submit",
      "content": "Meet our students"
    }
  },
  "stories": [
    {
      "title": "Njoki’s story",
      "lead": "Name is a second year Theoretical Physics BSc student from Chester",
      "img": {
        "src": "/placeholders/new-homepage/student_1.jpg",
        "alt": "Astronaut on a space walk"
      },
      "href": "/student-stories/njoki"
    },
    {
      "title": "Abbie’s story",
      "lead": "Name is a second year Theoretical Physics BSc student from Chester",
      "img": {
        "src": "/placeholders/new-homepage/student_2.jpg",
        "alt": "Astronaut on a space walk"
      },
      "href": "/student-stories/abbie"
    },
    {
      "title": "Mo’s story",
      "lead": "Name is a second year Theoretical Physics BSc student from Chester",
      "img": {
        "src": "/placeholders/new-homepage/student_3.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",
      "img": {
        "src": "/placeholders/new-homepage/student_4.jpg",
        "alt": "Astronaut on a space walk"
      },
      "href": "/student-stories/abbie"
    }
  ]
}