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>
            <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 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 four</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>
            <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 five</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 six</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>
                <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>
            <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 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 four</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>
            <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 five</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 six</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 rc-margin--sm">
        <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>
                <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>
            <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 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 four</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>
            <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 five</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 six</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 rc-margin--sm">
        <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>
                <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. Options for this carousel:

  • The data-rows attribute can be set to either 4 or 6 to change the visible number of rows on desktop.
  • JSON data can be dynamically passed to the init function ie RCDL.features.Carousel.init('[data-js-carousel="example-feed"]', carouselFeed.parentNode, JSON.parse(res));

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" data-rows="6" data-rc-prev="prev" data-rc-next="next">
    <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>
        <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="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="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="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>

        <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>
        
html
            <div class="rc-carousel__header">
  <div class="rc-carousel__header-title">
    <h4 class="rc-gamma">Linked card example</h4>
    <span> - for dogs up to 8kg</span>
  </div>
  <a class="rc-carousel__header-link filter-component__view-all rc-styled-link--cta" href="#"
     data-control="filter-view-all-btn"
     data-filter-category="Sizes"
     data-filter-value="83a4997c-c946-4552-b380-a496d399c593">
    View all
    8
  </a>
</div>

<div class="rc-carousel rc-carousel--cards rc-match-heights" data-component="carousel-event-tracker" data-track-category="Breed search" data-js-carousel data-rc-cards="true" data-rows="6" data-rc-prev="prev" data-rc-next="next">
  <div class="rc-carousel__card-gal">
    <a class="rc-card__link" href="https://royalcanin-staging-cd.azurewebsites.net:443/en-us/dogs/breed-library/afghan-hound">
      <article class="rc-card rc-card--b">
        <picture class="rc-card__image">
          <picture class="rc-card__image">
            <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
          </picture>
        </picture>
        <div class="rc-card__body">
          <header class="rc-text--center">
            <p class="rc-card__meta">Sighthounds</p>
            <h3 class="rc-card__title">Afghan Hound</h3>
            <p class="rc-card__meta"></p>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="https://royalcanin-staging-cd.azurewebsites.net:443/en-us/dogs/breed-library/copy-of-afghan-hound">
      <article class="rc-card rc-card--b">
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header class="rc-text--center">
            <p class="rc-card__meta">Sighthounds</p>
            <h3 class="rc-card__title">Afghan Hound Copy</h3>
            <p class="rc-card__meta"></p>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="https://royalcanin-staging-cd.azurewebsites.net:443/en-us/dogs/breed-library/airedale-terrier">
      <article class="rc-card rc-card--b">
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header class="rc-text--center">
            <p class="rc-card__meta">Terriers</p>
            <h3 class="rc-card__title">Airedale Terrier</h3>
            <p class="rc-card__meta"></p>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="https://royalcanin-staging-cd.azurewebsites.net:443/en-us/dogs/breed-library/copy-of-airedale-terrier">
      <article class="rc-card rc-card--b">
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header class="rc-text--center">
            <p class="rc-card__meta">Terriers</p>
            <h3 class="rc-card__title">Airedale Terrier Copy</h3>
            <p class="rc-card__meta"></p>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="https://royalcanin-staging-cd.azurewebsites.net:443/en-us/dogs/breed-library/alaskan-malamute">
      <article class="rc-card rc-card--b">
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header class="rc-text--center">
            <p class="rc-card__meta">Spitz</p>
            <h3 class="rc-card__title">Alaskan Malamute</h3>
            <p class="rc-card__meta"></p>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="https://royalcanin-staging-cd.azurewebsites.net:443/en-us/dogs/breed-library/copy-of-alaskan-malamute">
      <article class="rc-card rc-card--b">
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header class="rc-text--center">
            <p class="rc-card__meta">Spitz</p>
            <h3 class="rc-card__title">Alaskan Malamute Copy</h3>
            <p class="rc-card__meta"></p>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="https://royalcanin-staging-cd.azurewebsites.net:443/en-us/dogs/breed-library/alpine-dachsbracke">
      <article class="rc-card rc-card--b">
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header class="rc-text--center">
            <p class="rc-card__meta">Scenthounds</p>
            <h3 class="rc-card__title">Alpine Dachsbracke</h3>
            <p class="rc-card__meta"></p>
          </header>
        </div>
      </article>
    </a>
    <a class="rc-card__link" href="https://royalcanin-staging-cd.azurewebsites.net:443/en-us/dogs/breed-library/beagle">
      <article class="rc-card rc-card--b">
        <picture class="rc-card__image">
          <img src="https://placehold.it/800x600?text=4:3" alt="alt text">
        </picture>
        <div class="rc-card__body">
          <header class="rc-text--center">
            <p class="rc-card__meta">Scenthounds</p>
            <h3 class="rc-card__title">Beagle</h3>
            <p class="rc-card__meta"></p>
          </header>
        </div>
      </article>
    </a>
  </div>
</div>
        

Dynamic Card Carousel Example

Same as above but using the dynamic loading feature.

  • The JSON data to generate cards in the carousel can be downloaded here.

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-carousel--full-height" data-js-carousel="example-feed" data-rc-cards="true" data-rows="6" data-rc-prev="prev" data-rc-next="next">
    <div class="rc-carousel__card-gal"></div>
</div>
        

Wrapping class

To display a carousel, use the following general structure. Each div inside of rc-carousel constitutes a slide. For RC Carousels, each slide is referred to as a hero and can use 1 of 3 layouts. The data attribute must be included with each hero.

html
            <div data-js-carousel="" class="rc-carousel rc-carousel--hero">
    <div class="rc-hero" data-thumb="interactive--pager">
        <!-- Hero code... -->
    </div>
</div>
        

Carousel Hero - General structure

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. There are 3 modifier classes available. All Carousel Heroes use the same element classes inside the hero block, but in different amounts and orders.

  • The hero__bg class should be applied to a background image or a video.
  • The hero__fg class wraps any foreground content.
  • The hero__section block and modifier classes should be applied to content inside the foreground.
  • A standard anchor with the rc-btn rc-btn--one classes is provided for call to actions.

html
            <div class="rc-hero" data-thumb="interactive--pager">
    <figure class="rc-hero__bg" style="background-image: url();"></figure>
    <div class="rc-hero__fg">
        <div class="rc-hero__section rc-hero__section--img">
            <img src="" alt="">
        </div>
        <div class="rc-hero__section rc-hero__section--text">
            <h1 class="rc-hero__title">Title</h1>
            <p class="rc-hero__description">Description</p>
            <a href="#" class="rc-btn rc-btn--one">Button</a>
        </div>
    </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--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 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>
    </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--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 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>
    </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--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 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>
    </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

  • 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.