Carousels

A carousel is built up of an image, title, button, pager and navigation icons. Carousels are used to showcase additional pieces of content in a fixed height section of a page or app. They are commonly used in combination with the flexible content block component to showcase more than one (but still related) piece of content in the same space. They are built up using their own unique wrapper as well as the Pager element to inform a user of which ‘slide’ they are currently viewing within a carousel.

Carousel Hero – Layout A

Options for this carousel:

  • Add the class rc-carousel--left to reverse the layout of the carousel
  • Pager can also be centered giving the carousel a class of rc-carousel--nav-center

html
            <div class="rc-carousel rc-carousel--a">
  <div class="rc-carousel__section">
    <div class="rc-carousel__slides">

      <div class="rc-carousel__slide">
        <div class="rc-carousel__slide-anim-wrap">
          <span class="rc-carousel__slide-meta">1st Jan 2018</span>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <h2 class="rc-carousel__slide-title rc-beta">Slide title one</h2>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <p class="rc-carousel__slide-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus ut urna vitae placerat. Sed varius libero ut orci volutpat, ut tempus risus bibendum. Pellentesque auctor, arcu non condimentum venenatis.</p>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <a class="rc-carousel__slide-btn rc-btn rc-btn--one" href="#/">Button label</a>
        </div>
      </div>

      <div class="rc-carousel__slide">
        <div class="rc-carousel__slide-anim-wrap">
          <span class="rc-carousel__slide-meta">1st Jan 2018</span>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <h2 class="rc-carousel__slide-title rc-beta">Slide title two</h2>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <p class="rc-carousel__slide-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus ut urna vitae placerat. Sed varius libero ut orci volutpat, ut tempus risus bibendum. Pellentesque auctor, arcu non condimentum venenatis.</p>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <a class="rc-carousel__slide-btn rc-btn rc-btn--one" href="#/">Button label</a>
        </div>
      </div>

      <div class="rc-carousel__slide">
        <div class="rc-carousel__slide-anim-wrap">
          <span class="rc-carousel__slide-meta">1st Jan 2018</span>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <h2 class="rc-carousel__slide-title rc-beta">Slide title three</h2>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <p class="rc-carousel__slide-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus ut urna vitae placerat. Sed varius libero ut orci volutpat, ut tempus risus bibendum. Pellentesque auctor, arcu non condimentum venenatis.</p>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <a class="rc-carousel__slide-btn rc-btn rc-btn--one" href="#/">Button label</a>
        </div>
      </div>

    </div>
  </div>
  <div class="rc-carousel__section">
    <div data-js-carousel data-has-slides="true">
      <div>
        <img src="https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97600&w=800&h=600">
      </div>
      <div>
        <img src="https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97600&w=800&h=600">
      </div>
      <div>
        <img src="https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97600&w=800&h=600">
      </div>
    </div>
  </div>
</div>
        
html
            <div class="rc-carousel rc-carousel--a rc-carousel--left">
  <div class="rc-carousel__section">
    <div class="rc-carousel__slides">

      <div class="rc-carousel__slide">
        <div class="rc-carousel__slide-anim-wrap">
          <span class="rc-carousel__slide-meta">1st Jan 2018</span>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <h2 class="rc-carousel__slide-title rc-beta">Slide title one</h2>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <p class="rc-carousel__slide-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus ut urna vitae placerat. Sed varius libero ut orci volutpat, ut tempus risus bibendum. Pellentesque auctor, arcu non condimentum venenatis.</p>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <a class="rc-carousel__slide-btn rc-btn rc-btn--one" href="#/">Button label</a>
        </div>
      </div>

      <div class="rc-carousel__slide">
        <div class="rc-carousel__slide-anim-wrap">
          <span class="rc-carousel__slide-meta">1st Jan 2018</span>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <h2 class="rc-carousel__slide-title rc-beta">Slide title two</h2>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <p class="rc-carousel__slide-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus ut urna vitae placerat. Sed varius libero ut orci volutpat, ut tempus risus bibendum. Pellentesque auctor, arcu non condimentum venenatis.</p>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <a class="rc-carousel__slide-btn rc-btn rc-btn--one" href="#/">Button label</a>
        </div>
      </div>

      <div class="rc-carousel__slide">
        <div class="rc-carousel__slide-anim-wrap">
          <span class="rc-carousel__slide-meta">1st Jan 2018</span>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <h2 class="rc-carousel__slide-title rc-beta">Slide title three</h2>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <p class="rc-carousel__slide-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus ut urna vitae placerat. Sed varius libero ut orci volutpat, ut tempus risus bibendum. Pellentesque auctor, arcu non condimentum venenatis.</p>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <a class="rc-carousel__slide-btn rc-btn rc-btn--one" href="#/">Button label</a>
        </div>
      </div>

    </div>
  </div>
  <div class="rc-carousel__section">
    <div data-js-carousel="" data-has-slides="true">
      <div>
        <img src="https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97600&w=800&h=600">
      </div>
      <div>
        <img src="https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97600&w=800&h=600">
      </div>
      <div>
        <img src="https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97600&w=800&h=600">
      </div>
    </div>
  </div>
</div>
        
html
            <div class="rc-carousel rc-carousel--a rc-carousel--nav-center">
  <div class="rc-carousel__section">
    <div class="rc-carousel__slides">

      <div class="rc-carousel__slide">
        <div class="rc-carousel__slide-anim-wrap">
          <span class="rc-carousel__slide-meta">1st Jan 2018</span>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <h2 class="rc-carousel__slide-title rc-beta">Slide title one</h2>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <p class="rc-carousel__slide-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus ut urna vitae placerat. Sed varius libero ut orci volutpat, ut tempus risus bibendum. Pellentesque auctor, arcu non condimentum venenatis.</p>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <a class="rc-carousel__slide-btn rc-btn rc-btn--one" href="#/">Button label</a>
        </div>
      </div>

      <div class="rc-carousel__slide">
        <div class="rc-carousel__slide-anim-wrap">
          <span class="rc-carousel__slide-meta">1st Jan 2018</span>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <h2 class="rc-carousel__slide-title rc-beta">Slide title two</h2>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <p class="rc-carousel__slide-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus ut urna vitae placerat. Sed varius libero ut orci volutpat, ut tempus risus bibendum. Pellentesque auctor, arcu non condimentum venenatis.</p>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <a class="rc-carousel__slide-btn rc-btn rc-btn--one" href="#/">Button label</a>
        </div>
      </div>

      <div class="rc-carousel__slide">
        <div class="rc-carousel__slide-anim-wrap">
          <span class="rc-carousel__slide-meta">1st Jan 2018</span>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <h2 class="rc-carousel__slide-title rc-beta">Slide title three</h2>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <p class="rc-carousel__slide-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus ut urna vitae placerat. Sed varius libero ut orci volutpat, ut tempus risus bibendum. Pellentesque auctor, arcu non condimentum venenatis.</p>
        </div>
        <div class="rc-carousel__slide-anim-wrap">
          <a class="rc-carousel__slide-btn rc-btn rc-btn--one" href="#/">Button label</a>
        </div>
      </div>

    </div>
  </div>
  <div class="rc-carousel__section">
    <div data-js-carousel="" data-has-slides="true">
      <div>
        <img src="https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97600&w=800&h=600">
      </div>
      <div>
        <img src="https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97600&w=800&h=600">
      </div>
      <div>
        <img src="https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97600&w=800&h=600">
      </div>
    </div>
  </div>
</div>
        

Card carousel

Carousels can also be used with Cards to only show a single row of cards rather than a large grid or stack of cards if required, but can only be used with the 4 Col and 6 Col combinations of cards. As cards can effectively include 4 or 6 cards per ‘slide’, the maximum allowance of 6 ‘slides’ still allows for a lot of cards to be showcased within a carousel for cards.

html
            <div class="rc-carousel rc-carousel--cards" data-js-carousel data-rc-cards="true">
  <div class="rc-carousel__card-gal">
    <article class="rc-card rc-card--b">
      <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
    <article class="rc-card rc-card--b">
      <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
    <article class="rc-card rc-card--b">
      <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
    <article class="rc-card rc-card--b">
      <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
    <article class="rc-card rc-card--b">
      <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
    <article class="rc-card rc-card--b">
      <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
    <article class="rc-card rc-card--b">
      <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
    <article class="rc-card rc-card--b">
      <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
    <article class="rc-card rc-card--b">
      <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
    <article class="rc-card rc-card--b">
      <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
    <article class="rc-card rc-card--b">
      <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
</div>
        

Link card carousel

html
            <div class="rc-carousel__header">
  <div class="rc-carousel__header-title">
      <h4 class="rc-gamma">X-small</h4><span> - for dogs up to 4kg</span>
  </div>
  <a href="#" class="rc-carousel__header-link rc-styled-link--cta">View all</a>
</div>
<div class="rc-carousel rc-carousel--cards rc-match-heights" data-js-carousel data-rc-cards="true">
  <div class="rc-carousel__card-gal">
    <a class="rc-card__link" href="#/">
      <article class="rc-card rc-card--b">
        <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
          <span class="rc-screen-reader-text">Like</span>
        </button>
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header>
            <p class="rc-card__meta">Meta 1</p>
            <h1 class="rc-card__title">Headline</h1>
            <p>Some example text</p>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="#/">
      <article class="rc-card rc-card--b">
        <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
          <span class="rc-screen-reader-text">Like</span>
        </button>
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header>
            <p class="rc-card__meta">Meta 1</p>
            <h1 class="rc-card__title">Headline</h1>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="#/">
      <article class="rc-card rc-card--b">
        <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
          <span class="rc-screen-reader-text">Like</span>
        </button>
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header>
            <p class="rc-card__meta">Meta 1</p>
            <h1 class="rc-card__title">Headline</h1>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="#/">
      <article class="rc-card rc-card--b">
        <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
          <span class="rc-screen-reader-text">Like</span>
        </button>
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header>
            <p class="rc-card__meta">Meta 1</p>
            <h1 class="rc-card__title">Headline</h1>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="#/">
      <article class="rc-card rc-card--b">
        <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
          <span class="rc-screen-reader-text">Like</span>
        </button>
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header>
            <p class="rc-card__meta">Meta 1</p>
            <h1 class="rc-card__title">Headline</h1>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="#/">
      <article class="rc-card rc-card--b">
        <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
          <span class="rc-screen-reader-text">Like</span>
        </button>
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header>
            <p class="rc-card__meta">Meta 1</p>
            <h1 class="rc-card__title">Headline</h1>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="#/">
      <article class="rc-card rc-card--b">
        <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
          <span class="rc-screen-reader-text">Like</span>
        </button>
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header>
            <p class="rc-card__meta">Meta 1</p>
            <h1 class="rc-card__title">Headline</h1>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="#/">
      <article class="rc-card rc-card--b">
        <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
          <span class="rc-screen-reader-text">Like</span>
        </button>
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header>
            <p class="rc-card__meta">Meta 1</p>
            <h1 class="rc-card__title">Headline</h1>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="#/">
      <article class="rc-card rc-card--b">
        <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
          <span class="rc-screen-reader-text">Like</span>
        </button>
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header>
            <p class="rc-card__meta">Meta 1</p>
            <h1 class="rc-card__title">Headline</h1>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="#/">
      <article class="rc-card rc-card--b">
        <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
          <span class="rc-screen-reader-text">Like</span>
        </button>
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header>
            <p class="rc-card__meta">Meta 1</p>
            <h1 class="rc-card__title">Headline</h1>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="#/">
      <article class="rc-card rc-card--b">
        <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
          <span class="rc-screen-reader-text">Like</span>
        </button>
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header>
            <p class="rc-card__meta">Meta 1</p>
            <h1 class="rc-card__title">Headline</h1>
          </header>
        </div>
      </article>
    </a>
  </div>
</div>
        

Carousel Hero – Layout 1

A carousel hero can use 1 of 3 layouts. The layout used is determined by which modifier class is added alongside the block hero class. In the example below, each of the layouts is displayed sequentially, beginning with the block hero class without a modifier. Carousel Version 1 Single image, introduction text and call to action. Mobile Layout - Pet or packshot imagery should be full width. Introductory text should display below the image. Call to action should display below the introductory text. Tablet Layout - Pet or packshot imagery should be half width left or right side. Introductory text should display opposite the image. Call to action should display below the introductory text. Desktop Layout - Pet or packshot imagery should be half width left or right side. Introductory text should display opposite the image. Call to action should display below the introductory text.

html
            <div data-js-carousel="" class="rc-carousel rc-carousel--hero">
  <div class="rc-hero rc-hero__layout--1" data-thumb="interactive--pager">
    <div class="rc-hero__fg">
      <div class="rc-hero__section rc-hero__section--img">
        <img src="https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97600&w=800&h=600">
      </div>

      <div class="rc-hero__section rc-hero__section--text">
        <h3 class="rc-hero__title">Is your pet's weight healthy?</h3>
        <p class="rc-hero__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus odio tempor risus placerat, id gravida libero viverra.</p>
        <a href="#" class="rc-btn rc-btn--one">Read Article</a>
      </div>
    </div>
  </div>
  <div class="rc-hero rc-hero__layout--1" data-thumb="interactive--pager">
    <div class="rc-hero__fg">
      <div class="rc-hero__section rc-hero__section--img">
        <img src="https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97600&w=800&h=600">
      </div>

      <div class="rc-hero__section rc-hero__section--text">
        <h3 class="rc-hero__title">Is your pet's weight healthy?</h3>
        <p class="rc-hero__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus odio tempor risus placerat, id gravida libero viverra.</p>
        <a href="#" class="rc-btn rc-btn--one">Read Article</a>
      </div>
    </div>
  </div>
  <div class="rc-hero rc-hero__layout--1" data-thumb="interactive--pager">
    <div class="rc-hero__fg">
      <div class="rc-hero__section rc-hero__section--img">
        <img src="https://placeholdit.imgix.net/~text?txtsize=75&txt=800%C3%97600&w=800&h=600">
      </div>

      <div class="rc-hero__section rc-hero__section--text">
        <h3 class="rc-hero__title">Is your pet's weight healthy?</h3>
        <p class="rc-hero__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus odio tempor risus placerat, id gravida libero viverra.</p>
        <a href="#" class="rc-btn rc-btn--one">Read Article</a>
      </div>
    </div>
  </div>
</div>
        

Carousel Hero – Layout 2

A Carousel should be used in an area of significance and is built up of an image, title, button, pager and navigation icons. Several carousel options are available below to ensure each layout can be accommodated. A carousel hero can use 1 of 4 layouts. The layout used is determined by which modifier class is added alongside the block hero class. In the example below, each of the layouts is displayed sequentially, beginning with the block hero class without a modifier. Carousel Version 2 Two images, introduction text, secondary central image option and call to action. Mobile Layout - Pet or packshot imagery should be half width adjacent. Introductory text should display below the image. Call to action should display below the introductory text. Tablet Layout - Pet or packshot imagery should be half width left and right side. Introductory text should display central. Call to action should display below the introductory text. Desktop Layout - Pet or packshot imagery should be half width left and right side. Introductory text should display central. Secondary imagery can now be introduced if required. Call to action should display below the introductory text.

html
            <div data-js-carousel="" class="rc-carousel rc-carousel--hero">
  <div class="rc-hero rc-hero__layout--2">
    <div class="rc-hero__fg">
      <div class="rc-hero__section rc-hero__section--img">
        <img src="https://placeholdit.imgix.net/~text?txtsize=63&txt=750%C3%971000&w=750&h=1000">
      </div>

      <div class="rc-hero__section rc-hero__section--img">
        <img src="https://placeholdit.imgix.net/~text?txtsize=63&txt=750%C3%971000&w=750&h=1000">
      </div>

      <div class="rc-hero__section rc-hero__section--text">
        <h3 class="rc-hero__title">Mix it up for your pure bred cat</h3>
        <p class="rc-hero__description">Tailored breed-specific nutrition now available in wet.</p>
        <a href="#" class="rc-btn rc-btn--one">Read Article</a>
      </div>
    </div>
  </div>
  <div class="rc-hero rc-hero__layout--2">
    <div class="rc-hero__fg">
      <div class="rc-hero__section rc-hero__section--img">
        <img src="https://placeholdit.imgix.net/~text?txtsize=63&txt=750%C3%971000&w=750&h=1000">
      </div>

      <div class="rc-hero__section rc-hero__section--img">
        <img src="https://placeholdit.imgix.net/~text?txtsize=63&txt=750%C3%971000&w=750&h=1000">
      </div>

      <div class="rc-hero__section rc-hero__section--text">
        <h3 class="rc-hero__title">Mix it up for your pure bred cat</h3>
        <p class="rc-hero__description">Tailored breed-specific nutrition now available in wet.</p>
        <a href="#" class="rc-btn rc-btn--one">Read Article</a>
      </div>
    </div>
  </div>
  <div class="rc-hero rc-hero__layout--2">
    <div class="rc-hero__fg">
      <div class="rc-hero__section rc-hero__section--img">
        <img src="https://placeholdit.imgix.net/~text?txtsize=63&txt=750%C3%971000&w=750&h=1000">
      </div>

      <div class="rc-hero__section rc-hero__section--img">
        <img src="https://placeholdit.imgix.net/~text?txtsize=63&txt=750%C3%971000&w=750&h=1000">
      </div>

      <div class="rc-hero__section rc-hero__section--text">
        <h3 class="rc-hero__title">Mix it up for your pure bred cat</h3>
        <p class="rc-hero__description">Tailored breed-specific nutrition now available in wet.</p>
        <a href="#" class="rc-btn rc-btn--one">Read Article</a>
      </div>
    </div>
  </div>
</div>
        

Carousel Hero – Layout 3

A carousel should be used in an area of significance and is built up of an image, title, button, pager and navigation icons. Several carousel options are available below to ensure each layout can be accommodated. A carousel hero can use 1 of 4 layouts. The layout used is determined by which modifier class is added alongside the block hero class. In the example below, each of the layouts is displayed sequentially, beginning with the block hero class without a modifier. Carousel Version 3 Single lower image, introduction text and call to action. Mobile Layout - Pet or packshot imagery should be full width. Introductory text should display above the image. Call to action should display below the introductory text. Tablet Layout - Pet or packshot imagery should be full width below the introductory text. Introductory text should display above the image. Call to action should display below the introductory text. Desktop Layout - Pet or packshot imagery should be full width below the introductory text. Introductory text should display above the image. Call to action should display below the introductory text.

html
            <div data-js-carousel="" class="rc-carousel rc-carousel--hero">
  <div class="rc-hero rc-hero__layout--3" data-thumb="interactive--pager">
    <div class="rc-hero__fg">
      <div class="rc-hero__section rc-hero__section--img">
        <img src="https://placeholdit.imgix.net/~text?txtsize=83&txt=1000%C3%97400&w=1000&h=400">
      </div>
      <div class="rc-hero__section rc-hero__section--text">
        <h3 class="rc-hero__title">When scratching begins, visit your Vet.</h3>
        <a href="#" class="rc-btn rc-btn--one">Read Article</a>
      </div>

    </div>
  </div>
  <div class="rc-hero rc-hero__layout--3" data-thumb="interactive--pager">
    <div class="rc-hero__fg">
      <div class="rc-hero__section rc-hero__section--img">
        <img src="https://placeholdit.imgix.net/~text?txtsize=83&txt=1000%C3%97400&w=1000&h=400">
      </div>
      <div class="rc-hero__section rc-hero__section--text">
        <h3 class="rc-hero__title">When scratching begins, visit your Vet.</h3>
        <a href="#" class="rc-btn rc-btn--one">Read Article</a>
      </div>

    </div>
  </div>
  <div class="rc-hero rc-hero__layout--3" data-thumb="interactive--pager">
    <div class="rc-hero__fg">
      <div class="rc-hero__section rc-hero__section--img">
        <img src="https://placeholdit.imgix.net/~text?txtsize=83&txt=1000%C3%97400&w=1000&h=400">
      </div>

      <div class="rc-hero__section rc-hero__section--text">
        <h3 class="rc-hero__title">When scratching begins, visit your Vet.</h3>
        <a href="#" class="rc-btn rc-btn--one">Read Article</a>
      </div>
    </div>
  </div>
</div>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 6th November 2018 [ui_assets/components/carousels.yml]
    Tidied carousel docs
  • 3rd October 2018 [ui_assets/components/carousels.yml]
    Update asset links and boilerplate markup.
  • 18th September 2018 [ui_assets/components/carousels.yml]
    Change span to h4 for consistency
  • 17th September 2018 [ui_assets/components/carousels.yml]
    spelling and grammar updates
  • 31st August 2018 [ui_assets/components/carousels.yml]
    Added linked card carousel example and test page. Added note about image gallery being removed.
  • 2nd August 2018 [ui_assets/components/carousels.yml]
    update markup
  • 2nd August 2018 [ui_assets/components/carousels.yml]
    new markup
  • 25th July 2018 [ui_assets/components/carousels.yml]
    prefix
  • 25th July 2018 [ui_assets/components/carousels.yml]
    prefix btn--action
  • 25th July 2018 [ui_assets/components/carousels.yml]
    prefix styled-link
  • 25th July 2018 [ui_assets/components/carousels.yml]
    screen reader
  • 25th July 2018 [ui_assets/components/carousels.yml]
    prefix buttons
  • 25th July 2018 [ui_assets/components/carousels.yml]
    prefix card images
  • 12th July 2018 [ui_assets/components/carousels.yml]
    Remove vbtn typo.
  • 12th July 2018 [ui_assets/components/carousels.yml]
    Prefixed classes throughout the portal with rc-.
  • 3rd July 2018 [ui_assets/components/carousels.yml]
    Remove inline script for dynamic carousel loader.
  • 27th June 2018 [ui_assets/components/carousels.yml]
    Add js disable attribute to website.
  • 20th June 2018 [ui_assets/components/carousels.yml]
    Improve card carousel documentation.
  • 20th June 2018 [ui_assets/components/carousels.yml]
    Added standard card carousel example.
  • 20th June 2018 [ui_assets/components/carousels.yml]
    Add js to dynamic carousel example.
  • 20th June 2018 [ui_assets/components/carousels.yml]
    Added alert block content for dynamic carousel.
  • 19th June 2018 [ui_assets/components/carousels.yml]
    reorder carousel page
  • 18th June 2018 [ui_assets/components/carousels.yml]
    Rewrite dynamic carousel init.
  • 14th June 2018 [ui_assets/components/carousels.yml]
    Fixed missing end tag. Also replaced with code tags.
  • 14th June 2018 [ui_assets/components/carousels.yml]
    add label data attrs
  • 14th June 2018 [ui_assets/components/carousels.yml]
    add data frrd as attr for card carousels
  • 14th June 2018 [ui_assets/components/carousels.yml]
    tidy docs
  • 14th June 2018 [ui_assets/components/carousels.yml]
    update docs
  • 14th June 2018 [ui_assets/components/carousels.yml]
    add carousel docs and example
  • 13th June 2018 [ui_assets/components/carousels.yml]
    missing closing tag
  • 13th June 2018 [ui_assets/components/carousels.yml]
    add dtata attr for prev/next labels
  • 12th June 2018 [ui_assets/components/carousels.yml]
    update carousel docs page. Add carousels to html boilerplate
  • 7th March 2018 [ui_assets/components/carousels.yml]
    Removed '--standard' from list, added min-height to homepage image
  • 19th February 2018 [ui_assets/components/carousels.yml]
    Convert all multi line text to use
  • 29th January 2018 [ui_assets/components/carousels.yml]
    Update button classnames
  • 15th December 2017 [ui_assets/components/carousels.yml]
    Added missing closing

    to carousel
  • 1st December 2017 [ui_assets/components/carousels.yml]
    Reorganised elements navigation
  • 1st December 2017 [ui_assets/components/carousels.yml]
    Restructured folder order.
  • 13th November 2017 [ui_assets/components/carousels.yml]
    Added paragraph twig filter and removed p tags from YAML
  • 8th September 2017 [ui_assets/components/carousels.yml]
    css versioned bumped
  • 29th August 2017 [ui_assets/components/carousels.yml]
    Refactored naming convention used for levels of abstraction. https://trello.com/c/H5kTHTkZ/259-copy-change-update-naming-convention-on-sidebar
  • 19th July 2017 [ui_assets/components/carousels.yml]
    Added associated files to page config for use with git info collection.
  • 18th July 2017 [ui_assets/components/carousels.yml]
    Enabled options through data-attributes and reflected through markup in the examples.
  • 15th July 2017 [ui_assets/components/carousels.yml]
    Copy and markup improvements.
  • 11th July 2017 [ui_assets/components/carousels.yml]
    Added remaining content.