Carousel

Overview

The Carousel is an image-led component to showcase new or featured content. It is typically used on a service homepage or other landing page, and should take up a full-width slot.

Carousels can contain 3 or 4 images.

Example
WCMS use
MVC.net use
Code

<div class="row scale-images carousel">
	<a href="">
		<div class="eight columns alpha omega overlay-image" >
			<div class="caption bottom">
				<h3></h3>
				<p class=""></p>
			</div>
		</div>
	</a>
	<ul class="remove-sides four columns alpha omega remove-top">
		<li class="row remove-bottom">
			<a data-image-src="" class="thumbnail clearfix" href="">
				<span class="one-third column alpha indicator">
						<img height="100" width="100" alt="" src="">
				</span>
				<aside class="two-thirds column omega">
					<h3></h3>
					<p class="offscreen"></p>
				</aside>
			</a>
		</li>
		<li class="row remove-bottom">
			<a data-image-src="" class="thumbnail clearfix" href="">
				<span class="one-third column alpha indicator">
					<img height="100" width="100" alt="" src="">
				</span>
				<aside class="two-thirds column omega">
					<h3></h3>
					<p class="offscreen"></p>
				</aside>
			</a>
		</li>
	</ul>
</div>
Version and status
  • current version
  • Concept