KSS Style Guide

Slider Box

Toggle example guides Toggle HTML markup

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: ../source/scss/components/organisms/_box-slider.scss, line 1