University of Staffordshire Pattern Library

Sliders: Event Cards Slider

No notes defined.

<div class="slider--event-cards  js-slider--event-cards">
    <div>
        <div class="card  card--event">
            <figure class="card__figure">
                <img src="https://picsum.photos/720/360?random=1" alt="" />
            </figure>

            <div class="card__date">
                <span class="card__day">28</span>
                <span class="card__month">September</span>
            </div>

            <div class="card__content">
                <div class="title">
                    <h2 class="h6"><a href="" class="link--stretched">Enjoying the View? How computer games can help evaluate landscapes</a></h2>
                </div>
                <p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
            </div>
        </div>
    </div>

    <div>
        <div class="card  card--event  card--pink">
            <figure class="card__figure">
                <img src="https://picsum.photos/720/360?random=2" alt="" />
            </figure>

            <div class="card__date">
                <span class="card__day">23</span>
                <span class="card__month">September</span>
            </div>

            <div class="card__content">
                <div class="title">
                    <h2 class="h6"><a href="" class="link--stretched">Enjoying the View? How computer games can help evaluate landscapes</a></h2>
                </div>
                <p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
            </div>
        </div>
    </div>

    <div>
        <div class="card  card--event  card--red">
            <figure class="card__figure">
                <img src="https://picsum.photos/720/360?random=3" alt="" />
            </figure>

            <div class="card__date">
                <span class="card__day">30</span>
                <span class="card__month">September</span>
            </div>

            <div class="card__content">
                <div class="title">
                    <h2 class="h6"><a href="" class="link--stretched">Enjoying the View? How computer games can help evaluate landscapes</a></h2>
                </div>
                <p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
            </div>
        </div>
    </div>

    <div>
        <div class="card  card--event  card--red">
            <div class="card__date">
                <span class="card__day">30</span>
                <span class="card__month">September</span>
            </div>

            <div class="card__content">
                <div class="title">
                    <h2 class="h6"><a href="" class="link--stretched">Enjoying the View? How computer games can help evaluate landscapes</a></h2>
                </div>
                <p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
            </div>
        </div>
    </div>

    <div>
        <div class="card  card--event">
            <figure class="card__figure">
                <img src="https://picsum.photos/720/360?random=4" alt="" />
            </figure>

            <div class="card__date">
                <span class="card__day">2</span>
                <span class="card__month">May</span>
            </div>

            <div class="card__content">
                <div class="title">
                    <h2 class="h6"><a href="" class="link--stretched">Enjoying the View? How computer games can help evaluate landscapes</a></h2>
                </div>
                <p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
            </div>
        </div>
    </div>

    <div>
        <div class="card  card--event  card--maroon">
            <figure class="card__figure">
                <img src="https://picsum.photos/720/360?random5" alt="" />
            </figure>

            <div class="card__date">
                <span class="card__day">9</span>
                <span class="card__month">October</span>
            </div>

            <div class="card__content">
                <div class="title">
                    <h2 class="h6"><a href="" class="link--stretched">Enjoying the View? How computer games can help evaluate landscapes</a></h2>
                </div>
                <p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
            </div>
        </div>
    </div>

    <div>
        <div class="card  card--event  card--pink">
            <figure class="card__figure">
                <img src="https://picsum.photos/720/360?random=6" alt="" />
            </figure>

            <div class="card__date">
                <span class="card__day">1</span>
                <span class="card__month">October</span>
            </div>

            <div class="card__content">
                <div class="title">
                    <h2 class="h6"><a href="" class="link--stretched">Enjoying the View? How computer games can help evaluate landscapes</a></h2>
                </div>
                <p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
            </div>
        </div>
    </div>

    <div>
        <div class="card  card--event  card--red">
            <div class="card__date">
                <span class="card__day">17</span>
                <span class="card__month">April</span>
            </div>

            <div class="card__content">
                <div class="title">
                    <h2 class="h6"><a href="" class="link--stretched">Enjoying the View? How computer games can help evaluate landscapes</a></h2>
                </div>
                <p>The founders of an immersive storytelling app have returned to their university stomping ground to film their latest episode.</p>
            </div>
        </div>
    </div>
</div>
 
<div class="slider--event-cards  js-slider--event-cards">
  <div>
    <div class="card  card--event">
      <figure class="card__figure">
        <img src="https://picsum.photos/720/360?random=1" alt=""/>
      </figure>

      <div class="card__date">
        <span class="card__day">28</span>
        <span class="card__month">September</span>
      </div>

      <div class="card__content">
        <div class="title">
          <h2 class="h6"><a href="" class="link--stretched">{{ placeholderHeadline2 }}</a></h2>
        </div>
        <p>{{ placeholderPara1 }}</p>
      </div>
    </div>
  </div>

  <div>
    <div class="card  card--event  card--pink">
      <figure class="card__figure">
        <img src="https://picsum.photos/720/360?random=2" alt=""/>
      </figure>

      <div class="card__date">
        <span class="card__day">23</span>
        <span class="card__month">September</span>
      </div>

      <div class="card__content">
        <div class="title">
          <h2 class="h6"><a href="" class="link--stretched">{{ placeholderHeadline2 }}</a></h2>
        </div>
        <p>{{ placeholderPara1 }}</p>
      </div>
    </div>
  </div>

  <div>
    <div class="card  card--event  card--red">
      <figure class="card__figure">
        <img src="https://picsum.photos/720/360?random=3" alt=""/>
      </figure>

      <div class="card__date">
        <span class="card__day">30</span>
        <span class="card__month">September</span>
      </div>

      <div class="card__content">
        <div class="title">
          <h2 class="h6"><a href="" class="link--stretched">{{ placeholderHeadline2 }}</a></h2>
        </div>
        <p>{{ placeholderPara1 }}</p>
      </div>
    </div>
  </div>

  <div>
    <div class="card  card--event  card--red">
      <div class="card__date">
        <span class="card__day">30</span>
        <span class="card__month">September</span>
      </div>

      <div class="card__content">
        <div class="title">
          <h2 class="h6"><a href="" class="link--stretched">{{ placeholderHeadline2 }}</a></h2>
        </div>
        <p>{{ placeholderPara1 }}</p>
      </div>
    </div>
  </div>

  <div>
    <div class="card  card--event">
      <figure class="card__figure">
        <img src="https://picsum.photos/720/360?random=4" alt=""/>
      </figure>

      <div class="card__date">
        <span class="card__day">2</span>
        <span class="card__month">May</span>
      </div>

      <div class="card__content">
        <div class="title">
          <h2 class="h6"><a href="" class="link--stretched">{{ placeholderHeadline2 }}</a></h2>
        </div>
        <p>{{ placeholderPara1 }}</p>
      </div>
    </div>
  </div>

  <div>
    <div class="card  card--event  card--maroon">
      <figure class="card__figure">
        <img src="https://picsum.photos/720/360?random5" alt=""/>
      </figure>

      <div class="card__date">
        <span class="card__day">9</span>
        <span class="card__month">October</span>
      </div>

      <div class="card__content">
        <div class="title">
          <h2 class="h6"><a href="" class="link--stretched">{{ placeholderHeadline2 }}</a></h2>
        </div>
        <p>{{ placeholderPara1 }}</p>
      </div>
    </div>
  </div>

  <div>
    <div class="card  card--event  card--pink">
      <figure class="card__figure">
        <img src="https://picsum.photos/720/360?random=6" alt=""/>
      </figure>

      <div class="card__date">
        <span class="card__day">1</span>
        <span class="card__month">October</span>
      </div>

      <div class="card__content">
        <div class="title">
          <h2 class="h6"><a href="" class="link--stretched">{{ placeholderHeadline2 }}</a></h2>
        </div>
        <p>{{ placeholderPara1 }}</p>
      </div>
    </div>
  </div>

  <div>
    <div class="card  card--event  card--red">
      <div class="card__date">
        <span class="card__day">17</span>
        <span class="card__month">April</span>
      </div>

      <div class="card__content">
        <div class="title">
          <h2 class="h6"><a href="" class="link--stretched">{{ placeholderHeadline2 }}</a></h2>
        </div>
        <p>{{ placeholderPara1 }}</p>
      </div>
    </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;
  }
}

.slider--facilities {
  .slick-track {
    margin: 0 -$grid-gutter;
  }
  .slick-slide {
    margin: 0 $grid-gutter;
  }
}

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

  &__item-title {
    margin-bottom: $spacing-xs;
    border-bottom: 1px solid #FFF;
    padding-bottom: $spacing-xs;
    color: #FFF;
  }

  &__item-description {
    @include typescale('sm');
    @include line-height('normal');
  }

  &__item-img {
    margin: auto;
    width: auto;
    max-height: 2em;
  }

  &__item-figure {
    margin-left: auto!important;
    margin-right: auto!important;
    margin: 0 0 1rem 0;

    & svg {
      max-height: 100px;
    }
  }
  
  a {
    color: inherit;
    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;
      }
    }
  }
}

.js-slider--logos {

  .slick-slide {
    padding: 0 1rem;
  }

  .slick-track {
    display: flex;
  }

  .slick-track .slick-slide {
    display: flex;
    height: auto;
    align-items: center;
    justify-content: center;
  }

  .logo { margin: 0 10%; }
  .logo--low-aspect-ratio { margin: 0 25%; }
}
  • URL: /components/raw/slider/_slider.scss
  • Filesystem Path: src\components\slider\_slider.scss
  • Size: 3.6 KB