<div class="awards">
<h2 class="heading heading--medium">This is a list of logos</h2>
<div class="awards__list">
<div class="awards__list__item">
<a href="http://google.com">
<img src="/img/Ipsen_logo.png" alt="google" />
</a>
</div>
<div class="awards__list__item">
<a href="http://google.com">
<img src="/img/newsletter-icon.png" alt="google" />
</a>
</div>
<div class="awards__list__item">
<a href="http://google.com">
<img src="/img/onivyde.png" alt="google" />
</a>
</div>
<div class="awards__list__item">
<a href="http://google.com">
<img src="/img/patients-icon.png" alt="google" />
</a>
</div>
<div class="awards__list__item">
<a href="http://google.com">
<img src="/img/photo-1484583066749-c2129489f52f.jpeg" alt="google" />
</a>
</div>
<div class="awards__list__item">
<a href="http://google.com">
<img src="/img/cabometyx-logo.jpg" alt="google" />
</a>
</div>
<div class="awards__list__item">
<a href="http://google.com">
<img src="/img/placeimg_1000_650_people.jpg" alt="google" />
</a>
</div>
<div class="awards__list__item">
<a href="http://google.com">
<img src="/img/research-icon.png" alt="google" />
</a>
</div>
<div class="awards__list__item">
<a href="http://google.com">
<img src="/img/somatuline-hero.jpg" alt="google" />
</a>
</div>
</div>
</div>
/* @awards */
.awards {
@include poly-padding--large;
.heading {
@include poly-margin-bottom--small;
@media (min-width: $medium-screen) {
@include poly-padding-x;
}
}
&__list {
display: flex;
justify-content: center;
&.flickity-enabled {
display: block;
justify-content: unset;
width: 100%;
margin: $large-spacing auto;
@media (min-width: $medium-screen) {
@include poly-padding-x;
}
.flickity-button {
&.previous{
left: -2.8rem;
}
&.next{
right: -2.8rem;
}
@media (max-width: #{$medium-screen - 1}) {
display: none;
}
}
}
&__item {
@include poly-margin-x--small;
a {
height: 120px;
display: flex;
}
img {
max-height: 120px;
max-width: initial;
align-self: center;
}
}
}
}
/* awards */
import $ from 'jQuery'
var jQueryBridget = require('jquery-bridget');
import Flickity from 'flickity'
jQueryBridget( 'flickity', Flickity, $ );
$(document).ready(function () {
if ($('.awards__list').length ) {
$('.awards__list').flickity({
contain: true,
pageDots: false,
groupCells: true
})
}
})