Slider Box
TO DO: change slider to more customizable
Markup: ..\..\styleguide\templates\organisms\sliders\slider-box.html
<div class="rocksite-o-slider-box">
<div class="rocksite-o-slider-box__list js-slider">
<div class="rocksite-o-slider-box__list__item">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="rocksite-m-card -card-stack">
<div class="rocksite-m-card__content">
<h5 class="rocksite-m-card__content__title"><a href="">Duis vitae lobortis odio, sed convallis lacus</a></h5>
<div class="rocksite-m-card__content__meta">
<span class="rocksite-m-meta-label"><i class="la la-calendar"></i> <a href=""
rel="bookmark">
<time class="entry-date published updated" datetime="2015-08-23T21:33:31+00:00">August 21</time>
</a></span> <span class="rocksite-m-meta-label">Published by: <a
href="" title="Posts by admin" rel="author">admin</a> </span>
</div>
<div class="rocksite-m-card__content__button">
<a href="#" class="rocksite-a-button-icon -card-stack"><i class="la la-arrow-right"></i> <span>214 K</span>
</a>
</div>
</div>
<div class="rocksite-m-card__thumbnail">
<a href="" class="rocksite-m-card__thumbnail__link"><img src="../assets/images/portfolio-image1.jpg" alt="Image"></a>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="rocksite-m-card -card-stack">
<div class="rocksite-m-card__content">
<h5 class="rocksite-m-card__content__title"><a href="">Duis vitae lobortis odio, sed convallis lacus</a></h5>
<div class="rocksite-m-card__content__meta">
<span class="rocksite-m-meta-label"><i class="la la-calendar"></i> <a href=""
rel="bookmark">
<time class="entry-date published updated" datetime="2015-08-23T21:33:31+00:00">August 21</time>
</a></span> <span class="rocksite-m-meta-label">Published by: <a
href="" title="Posts by admin" rel="author">admin</a> </span>
</div>
<div class="rocksite-m-card__content__button">
<a href="#" class="rocksite-a-button-icon -card-stack"><i class="la la-arrow-right"></i> <span>214 K</span>
</a>
</div>
</div>
<div class="rocksite-m-card__thumbnail">
<a href="" class="rocksite-m-card__thumbnail__link"><img src="../assets/images/portfolio-image1.jpg" alt="Image"></a>
</div>
</div>
</div>
</div>
</div>
<div class="rocksite-o-slider-box__list__item">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="rocksite-m-card -card-stack">
<div class="rocksite-m-card__content">
<h5 class="rocksite-m-card__content__title"><a href="">Duis vitae lobortis odio, sed convallis lacus</a></h5>
<div class="rocksite-m-card__content__meta">
<span class="rocksite-m-meta-label"><i class="la la-calendar"></i> <a href=""
rel="bookmark">
<time class="entry-date published updated" datetime="2015-08-23T21:33:31+00:00">August 21</time>
</a></span> <span class="rocksite-m-meta-label">Published by: <a
href="" title="Posts by admin" rel="author">admin</a> </span>
</div>
<div class="rocksite-m-card__content__button">
<a href="#" class="rocksite-a-button-icon -card-stack"><i class="la la-arrow-right"></i> <span>214 K</span>
</a>
</div>
</div>
<div class="rocksite-m-card__thumbnail">
<a href="" class="rocksite-m-card__thumbnail__link"><img src="../assets/images/portfolio-image1.jpg" alt="Image"></a>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="rocksite-m-card -card-stack">
<div class="rocksite-m-card__content">
<h5 class="rocksite-m-card__content__title"><a href="">Duis vitae lobortis odio, sed convallis lacus</a></h5>
<div class="rocksite-m-card__content__meta">
<span class="rocksite-m-meta-label"><i class="la la-calendar"></i> <a href=""
rel="bookmark">
<time class="entry-date published updated" datetime="2015-08-23T21:33:31+00:00">August 21</time>
</a></span> <span class="rocksite-m-meta-label">Published by: <a
href="" title="Posts by admin" rel="author">admin</a> </span>
</div>
<div class="rocksite-m-card__content__button">
<a href="#" class="rocksite-a-button-icon -card-stack"><i class="la la-arrow-right"></i> <span>214 K</span>
</a>
</div>
</div>
<div class="rocksite-m-card__thumbnail">
<a href="" class="rocksite-m-card__thumbnail__link"><img src="../assets/images/portfolio-image1.jpg" alt="Image"></a>
</div>
</div>
</div>
</div>
</div>
<div class="rocksite-o-slider-box__list__item">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="rocksite-m-card -card-stack">
<div class="rocksite-m-card__content">
<h5 class="rocksite-m-card__content__title"><a href="">Duis vitae lobortis odio, sed convallis lacus</a></h5>
<div class="rocksite-m-card__content__meta">
<span class="rocksite-m-meta-label"><i class="la la-calendar"></i> <a href=""
rel="bookmark">
<time class="entry-date published updated" datetime="2015-08-23T21:33:31+00:00">August 21</time>
</a></span> <span class="rocksite-m-meta-label">Published by: <a
href="" title="Posts by admin" rel="author">admin</a> </span>
</div>
<div class="rocksite-m-card__content__button">
<a href="#" class="rocksite-a-button-icon -card-stack"><i class="la la-arrow-right"></i> <span>214 K</span>
</a>
</div>
</div>
<div class="rocksite-m-card__thumbnail">
<a href="" class="rocksite-m-card__thumbnail__link"><img src="../assets/images/portfolio-image1.jpg" alt="Image"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
../source/scss/components/organisms/_box-slider.scss
, line 1