Markup
<div class="card feature carousel">
<div class="img-wrap">
<div class="arw-nav"></div>
<div class="img-wrap-carousel">
<div class="img-slide" style="background-image:url('https://unsplash.it/676/430?image=645')">
<img src="https://unsplash.it/676/430?image=645" alt="" class="visuallyhidden">
</div>
<div class="img-slide" style="background-image:url('https://unsplash.it/676/430?image=655')">
<img src="https://unsplash.it/676/430?image=655" alt="" class="visuallyhidden">
</div>
<div class="img-slide" style="background-image:url('https://unsplash.it/676/430?image=818')">
<img src="https://unsplash.it/676/430?image=818" alt="" class="visuallyhidden">
</div>
</div>
</div>
<div class="copy-wrap">
<div class="dot-nav"></div>
<div class="copy-wrap-carousel">
<div class="copy-slide">
<h2>Rotating Content Block. Heading Style Two.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In fuga reiciendis, aperiam praesentium ad delectus sunt! Eligendi iure molestias repellendus laborum, neque sapiente nulla ducimus nobis excepturi obcaecati adipisci voluptas.</p>
<a href="#" class="button-link button-link-default">Button Style Three</a>
</div>
<div class="copy-slide">
<h2>Rotating Content Block. Heading Style Two.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In fuga reiciendis, aperiam praesentium ad delectus sunt! Eligendi iure molestias repellendus laborum, neque sapiente nulla ducimus nobis excepturi obcaecati adipisci voluptas.</p>
<a href="#" class="button-link button-link-default">Button Style Three</a>
</div>
<div class="copy-slide">
<h2>Rotating Content Block. Heading Style Two.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In fuga reiciendis, aperiam praesentium ad delectus sunt! Eligendi iure molestias repellendus laborum, neque sapiente nulla ducimus nobis excepturi obcaecati adipisci voluptas.</p>
<a href="#" class="button-link button-link-default">Button Style Three</a>
</div>
</div>
</div>
<!-- Do not implement this link -->
<a href="/inc/modules/?module=content-block-carousel" class="module-link">
<i class="icon info-icon">i</i>
<span class="tool-tip">Content Block Carousel</span>
</a>
<!-- Do not implement this link -->
</div>Used on the index page to display featured initiatives. No less than 3 slides should be featured, and no more than six. Never to be used twice on a page.
This module is based on a element called a "card". Modifier classes are applyed to the card element to apply certain styles. In this instance the "feature" class is used to facilitate the horizontal layout with an image to the left and the "carousel" class is used to initiate the carousel functionality via javascript.