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