Staffordshire University Components

Sliders: Accolade Slider

There are no notes for this item.

<div class="slab  slab--bg-slate-light ">
    <div class="wrap">

        <div class="accolade-slider  js-slider--accolades">
            <div>
                <div class="accolade-slider__item">
                    <div class="h6  accolade-slider__item-title">Rated Gold for Teaching Excellence</div>
                    <div class="accolade-slider__item-description">
                        <p>Teaching Excellence Framework</p>
                    </div>
                    <figure class="accolade-slider__item-figure">
                        <img class="accolade-slider__item-img" src="../../img/logo-tef-gold.png">
                    </figure>

                </div>
            </div>

            <div>
                <div class="accolade-slider__item">
                    <div class="h6  accolade-slider__item-title">Top 40 UK University</div>
                    <div class="accolade-slider__item-description">
                        <p>
37th out of 121 institutions University League Tables 2020</p>
                    </div>
                    <figure class="accolade-slider__item-figure">
                        <img class="accolade-slider__item-img" src="../../img/logo-guardian.png">
                    </figure>

                </div>
            </div>

            <div>
                <div class="accolade-slider__item">
                    <div class="h6  accolade-slider__item-title">University of the Year Shortlist</div>
                    <div class="accolade-slider__item-description">
                        <p>Teaching Excellence Framework</p>
                    </div>
                    <figure class="accolade-slider__item-figure">
                        <img class="accolade-slider__item-img" src="../../img/logo-times.png">
                    </figure>

                </div>
            </div>

            <div>
                <div class="accolade-slider__item">
                    <div class="h6  accolade-slider__item-title">Top 1000 in the World Rankings</div>
                    <div class="accolade-slider__item-description">
                        <p>
Times Higher Education Awards</p>
                    </div>
                    <figure class="accolade-slider__item-figure">
                        <img class="accolade-slider__item-img" src="../../img/logo-wur.png">
                    </figure>

                </div>
            </div>

            <div>
                <div class="accolade-slider__item">
                    <div class="h6  accolade-slider__item-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
                    <div class="accolade-slider__item-description">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                    </div>
                    <figure class="accolade-slider__item-figure">
                        <img class="accolade-slider__item-img" src="../../img/logo-wur.png">
                    </figure>

                </div>
            </div>

            <div>
                <div class="accolade-slider__item">
                    <div class="h6  accolade-slider__item-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
                    <div class="accolade-slider__item-description">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                    </div>
                    <figure class="accolade-slider__item-figure">
                        <img class="accolade-slider__item-img" src="../../img/logo-wur.png">
                    </figure>

                </div>
            </div>
            <div>
                <div class="accolade-slider__item">
                    <div class="h6  accolade-slider__item-title">Rated Gold for Teaching Excellence</div>
                    <div class="accolade-slider__item-description">
                        <p>Teaching Excellence Framework</p>
                    </div>
                    <figure class="accolade-slider__item-figure">
                        <img class="accolade-slider__item-img" src="../../img/logo-tef-gold.png">
                    </figure>

                </div>
            </div>

            <div>
                <div class="accolade-slider__item">
                    <div class="h6  accolade-slider__item-title">Top 40 UK University</div>
                    <div class="accolade-slider__item-description">
                        <p>
37th out of 121 institutions University League Tables 2020</p>
                    </div>
                    <figure class="accolade-slider__item-figure">
                        <img class="accolade-slider__item-img" src="../../img/logo-guardian.png">
                    </figure>

                </div>
            </div>

            <div>
                <div class="accolade-slider__item">
                    <div class="h6  accolade-slider__item-title">University of the Year Shortlist</div>
                    <div class="accolade-slider__item-description">
                        <p>Teaching Excellence Framework</p>
                    </div>
                    <figure class="accolade-slider__item-figure">
                        <img class="accolade-slider__item-img" src="../../img/logo-times.png">
                    </figure>

                </div>
            </div>

            <div>
                <div class="accolade-slider__item">
                    <div class="h6  accolade-slider__item-title">Top 1000 in the World Rankings</div>
                    <div class="accolade-slider__item-description">
                        <p>
Times Higher Education Awards</p>
                    </div>
                    <figure class="accolade-slider__item-figure">
                        <img class="accolade-slider__item-img" src="../../img/logo-wur.png">
                    </figure>

                </div>
            </div>

            <div>
                <div class="accolade-slider__item">
                    <div class="h6  accolade-slider__item-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
                    <div class="accolade-slider__item-description">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                    </div>
                    <figure class="accolade-slider__item-figure">
                        <img class="accolade-slider__item-img" src="../../img/logo-wur.png">
                    </figure>

                </div>
            </div>

            <div>
                <div class="accolade-slider__item">
                    <div class="h6  accolade-slider__item-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
                    <div class="accolade-slider__item-description">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                    </div>
                    <figure class="accolade-slider__item-figure">
                        <img class="accolade-slider__item-img" src="../../img/logo-wur.png">
                    </figure>

                </div>
            </div>
        </div>

    </div>
</div>
 
{% set slabBg = slabBg ? 'slab--bg-' ~ slabBg : 'slab--bg-slate-light' %}

<div class="slab  {{ slabBg }} {{ alignFull ? ' align-full' }}">
  <div class="wrap">

    <div class="accolade-slider  js-slider--accolades">
      {% for i in 1..2 %}
        <div>
          <div class="accolade-slider__item">
            <div class="h6  accolade-slider__item-title">Rated Gold for Teaching Excellence</div>
            <div class="accolade-slider__item-description">
              <p>Teaching Excellence Framework</p>
            </div>
            <figure class="accolade-slider__item-figure">
              <img class="accolade-slider__item-img" src="{{ '/img/logo-tef-gold.png' | path }}">
            </figure>

          </div>
        </div>

        <div>
          <div class="accolade-slider__item">
            <div class="h6  accolade-slider__item-title">Top 40 UK University</div>
            <div class="accolade-slider__item-description">
              <p>
37th out of 121 institutions University League Tables 2020</p>
            </div>
            <figure class="accolade-slider__item-figure">
              <img class="accolade-slider__item-img" src="{{ '/img/logo-guardian.png' | path }}">
            </figure>

          </div>
        </div>

        <div>
          <div class="accolade-slider__item">
            <div class="h6  accolade-slider__item-title">University of the Year Shortlist</div>
            <div class="accolade-slider__item-description">
              <p>Teaching Excellence Framework</p>
            </div>
            <figure class="accolade-slider__item-figure">
              <img class="accolade-slider__item-img" src="{{ '/img/logo-times.png' | path }}">
            </figure>

          </div>
        </div>

        <div>
          <div class="accolade-slider__item">
            <div class="h6  accolade-slider__item-title">Top 1000 in the World Rankings</div>
            <div class="accolade-slider__item-description">
              <p>
Times Higher Education Awards</p>
            </div>
            <figure class="accolade-slider__item-figure">
              <img class="accolade-slider__item-img" src="{{ '/img/logo-wur.png' | path }}">
            </figure>

          </div>
        </div>

        <div>
          <div class="accolade-slider__item">
            <div class="h6  accolade-slider__item-title">{{ loremShort }}</div>
            <div class="accolade-slider__item-description">
              <p>{{ loremShort }}</p>
            </div>
            <figure class="accolade-slider__item-figure">
              <img class="accolade-slider__item-img" src="{{ '/img/logo-wur.png' | path }}">
            </figure>

          </div>
        </div>

        <div>
          <div class="accolade-slider__item">
            <div class="h6  accolade-slider__item-title">{{ loremShort }}</div>
            <div class="accolade-slider__item-description">
              <p>{{ loremShort }}</p>
            </div>
            <figure class="accolade-slider__item-figure">
              <img class="accolade-slider__item-img" src="{{ '/img/logo-wur.png' | path }}">
            </figure>

          </div>
        </div>
      {% endfor %}
    </div>

  </div>
</div>
  • Content: 
    @import '../../assets/js/vendor/slick-1.8.1/slick/slick.scss';

.slick-slider {
}

.slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: $page-gutter-small*2;
  width: 1em;
  height: 1em;
  padding: 0;
  text-indent: -999em;
  background: transparent;
  color: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
  overflow: hidden; // prevents odd outline shape

  &:hover {
    opacity: 0.8;
  }

  @media (min-width: $wrap-large-gutter-width) {
    font-size: $page-gutter-large*2;
  }

  &:before {
    content: '';
    display: block;
    margin: auto;
    width: 1em;
    height: 1em;
    background: $neutral--primary url('#{$image-theme-directory-icon}/icon-gt-white.svg') no-repeat 55% 50%;
    background-size: 30%;
    border-radius: 100%;
  }
}

.slick-next {
  right: -#{$page-gutter-small/1.1};

  @media (min-width: $wrap-large-gutter-width) {
    right: -#{$page-gutter-large};
  }

  @media (min-width: $wrap-full-gutter-width) {
    right: -#{$page-gutter-full};
  }
}

.slick-prev {
  left: -#{$page-gutter-small/1.1};

  @media (min-width: $wrap-large-gutter-width) {
    left: -#{$page-gutter-large};
  }

  @media (min-width: $wrap-full-gutter-width) {
    left: -#{$page-gutter-full};
  }

  &:before {
    transform: rotate(180deg);
  }
}

.slick-disabled {
  opacity: 0;
  visibility: hidden;
}

// --

.slider {

}

.slider--tiles {
  .slick-slide {
    // these are sized in JS,
    // see sliderInit() in app.js for .js-facility-slider
    // not ideal as they're pixel based not (r)em, but will do for now.
  }
}

.slider--event-cards {
  .slick-slide {
    margin: 0 $grid-gutter 0 0;
  }
}

.accolade-slider {
  &__item {
    text-align: center;
    margin: 0 $grid-gutter;
  }

  &__item-title {
    margin-bottom: $spacing-lg;
    min-height: 2.4em; // 2 * line-height @1.2
  }

  &__item-description {
    min-height: 2.8em; // 2 * line-height @1.4
    margin-bottom: $spacing-xl;
    @include typescale('sm');
    @include line-height('normal');
  }

  &__item-img {
    margin: auto;
    width: auto;
    max-height: 2em;
  }
  
  a {
    color: choose-contrast-color($slate--light);
    text-decoration: none;
  }
}

.js-slider--responsive {
  .slick-slide {
    margin: 0 $grid-gutter 0;
  }

  .slick-prev {
    left: 0;
  }

  .slick-next {
    right: 0;
  }
}


.slider--modules {
  // these are sized in JS,
  // see sliderInit() in app.js for .js-slider--variable

  .slick-slide {
    max-width: 80vw;
    margin: 0 $grid-gutter-small;

    @media (min-width: $wrap-width) {
      max-width: $wrap-width - 15rem;
    }
  }
}

.slider--gallery {

  &__nav {

    @at-root .no-js & {
      display: none;
    }

    img {
      box-sizing: border-box;
      border: $spacing-2xs solid transparent;
    }

    .slick-current {
      img {
        border-color: $primary;
      }
    }
  }
}
  • URL: /components/raw/slider/_slider.scss
  • Filesystem Path: src/components/slider/_slider.scss
  • Size: 2.9 KB