Notice: the Design Language has been migrated - You will find the new URL to call the assets from the current Design Language.
See more details regarding this Migration
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-reverse-layoutto reverse the layout of the carousel - Pager can also be centered giving the carousel a class of
rc-carousel--nav-center
Default carousel
<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 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 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://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold" />
</div>
<div>
<img src="https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold" />
</div>
<div>
<img src="https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold" />
</div>
<div>
<img src="https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold" />
</div>
</div>
</div>
</div>Copied!
Reversed carousel
<div class="rc-carousel rc-carousel--a rc-reverse-layout">
<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 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 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://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold" />
</div>
<div>
<img src="https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold" />
</div>
<div>
<img src="https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold" />
</div>
<div>
<img src="https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold" />
</div>
</div>
</div>
</div>Copied!
Carousel with centered nav
<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 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 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://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold" />
</div>
<div>
<img src="https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold" />
</div>
<div>
<img src="https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold" />
</div>
<div>
<img src="https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold" />
</div>
</div>
</div>
</div>Copied!
Image gallery
An image gallery can be used to display a selection of related images that the user can scroll through.
Product Name
Find a retailerConsule quando ceterorum Scaevola credere accessio homine conclusum inscientia tractat venire turma rationem emolumento an. Putem patientiamque breviter iudicatum familiarem idem utinam fingi Ex impendet erroribus vindicet difficile adversa rogatiuncula. Please consult a vet before puhchasing this food for your pet.
<div class="rc-layout-container rc-two-column">
<div class="rc-column">
<div data-js-carousel="" data-image-gallery="true">
<div class="rc-carousel rc-carousel__gallery-image" data-zoom-container="cce2466e-4075-4ac5-9ef1-3808f97dcb14" data-zoom-factor="2">
<div>
<div>
<picture>
<source srcset="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=500&fm=jpg&auto=compress" media="(min-width: 1500px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=250&fm=jpg&auto=compress" media="(min-width: 770px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=740&fm=jpg&auto=compress" media="(min-width: 600px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=570&fm=jpg&auto=compress" media="(min-width: 450px)" />
<img src="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=420&fm=jpg&auto=compress" alt="Product alt text" />
</picture>
</div>
</div>
<div>
<div>
<picture>
<source srcset="https://cdn.royalcanin-weshare-online.io/UCEUa2QBaxEApS7L_-Xz/v2/fbn-2013-graphiccodes-packshots-siam-ad-int-fbn-packshot?w=500&fm=jpg&auto=compress" media="(min-width: 1500px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/UCEUa2QBaxEApS7L_-Xz/v2/fbn-2013-graphiccodes-packshots-siam-ad-int-fbn-packshot?w=250&fm=jpg&auto=compress" media="(min-width: 770px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/UCEUa2QBaxEApS7L_-Xz/v2/fbn-2013-graphiccodes-packshots-siam-ad-int-fbn-packshot?w=740&fm=jpg&auto=compress" media="(min-width: 600px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/UCEUa2QBaxEApS7L_-Xz/v2/fbn-2013-graphiccodes-packshots-siam-ad-int-fbn-packshot?w=570&fm=jpg&auto=compress" media="(min-width: 450px)" />
<img src="https://cdn.royalcanin-weshare-online.io/UCEUa2QBaxEApS7L_-Xz/v2/fbn-2013-graphiccodes-packshots-siam-ad-int-fbn-packshot?w=420&fm=jpg&auto=compress" alt="Product alt text" />
</picture>
</div>
</div>
<div>
<div>
<picture>
<source srcset="https://cdn.royalcanin-weshare-online.io/mSIRcmkBaxEApS7LMQpI/v15/vhn-dermatology-sensitivity-chicken-cat-pouch-pouch-packshot-b1ru?w=500&fm=jpg&auto=compress" media="(min-width: 1500px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/mSIRcmkBaxEApS7LMQpI/v15/vhn-dermatology-sensitivity-chicken-cat-pouch-pouch-packshot-b1ru?w=250&fm=jpg&auto=compress" media="(min-width: 770px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/mSIRcmkBaxEApS7LMQpI/v15/vhn-dermatology-sensitivity-chicken-cat-pouch-pouch-packshot-b1ru?w=740&fm=jpg&auto=compress" media="(min-width: 600px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/mSIRcmkBaxEApS7LMQpI/v15/vhn-dermatology-sensitivity-chicken-cat-pouch-pouch-packshot-b1ru?w=570&fm=jpg&auto=compress" media="(min-width: 450px)" />
<img src="https://cdn.royalcanin-weshare-online.io/mSIRcmkBaxEApS7LMQpI/v15/vhn-dermatology-sensitivity-chicken-cat-pouch-pouch-packshot-b1ru?w=420&fm=jpg&auto=compress" alt="Product alt text" />
</picture>
</div>
</div>
<div>
<div>
<picture>
<source srcset="https://cdn.royalcanin-weshare-online.io/mSIRcmkBaxEApS7LMQpI/v15/vhn-dermatology-sensitivity-chicken-cat-pouch-pouch-packshot-b1ru?w=500&fm=jpg&auto=compress" media="(min-width: 1500px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/mSIRcmkBaxEApS7LMQpI/v15/vhn-dermatology-sensitivity-chicken-cat-pouch-pouch-packshot-b1ru?w=250&fm=jpg&auto=compress" media="(min-width: 770px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/mSIRcmkBaxEApS7LMQpI/v15/vhn-dermatology-sensitivity-chicken-cat-pouch-pouch-packshot-b1ru?w=740&fm=jpg&auto=compress" media="(min-width: 600px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/mSIRcmkBaxEApS7LMQpI/v15/vhn-dermatology-sensitivity-chicken-cat-pouch-pouch-packshot-b1ru?w=570&fm=jpg&auto=compress" media="(min-width: 450px)" />
<img src="https://cdn.royalcanin-weshare-online.io/mSIRcmkBaxEApS7LMQpI/v15/vhn-dermatology-sensitivity-chicken-cat-pouch-pouch-packshot-b1ru?w=420&fm=jpg&auto=compress" alt="Product alt text" />
</picture>
</div>
</div>
<div>
<div>
<picture>
<source srcset="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=500&fm=jpg&auto=compress" media="(min-width: 1500px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=250&fm=jpg&auto=compress" media="(min-width: 770px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=740&fm=jpg&auto=compress" media="(min-width: 600px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=570&fm=jpg&auto=compress" media="(min-width: 450px)" />
<img src="https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=420&fm=jpg&auto=compress" alt="Product alt text" />
</picture>
</div>
</div>
<div>
<div>
<picture>
<source srcset="https://cdn.royalcanin-weshare-online.io/UCEUa2QBaxEApS7L_-Xz/v2/fbn-2013-graphiccodes-packshots-siam-ad-int-fbn-packshot?w=500&fm=jpg&auto=compress" media="(min-width: 1500px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/UCEUa2QBaxEApS7L_-Xz/v2/fbn-2013-graphiccodes-packshots-siam-ad-int-fbn-packshot?w=250&fm=jpg&auto=compress" media="(min-width: 770px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/UCEUa2QBaxEApS7L_-Xz/v2/fbn-2013-graphiccodes-packshots-siam-ad-int-fbn-packshot?w=740&fm=jpg&auto=compress" media="(min-width: 600px)" />
<source srcset="https://cdn.royalcanin-weshare-online.io/UCEUa2QBaxEApS7L_-Xz/v2/fbn-2013-graphiccodes-packshots-siam-ad-int-fbn-packshot?w=570&fm=jpg&auto=compress" media="(min-width: 450px)" />
<img src="https://cdn.royalcanin-weshare-online.io/UCEUa2QBaxEApS7L_-Xz/v2/fbn-2013-graphiccodes-packshots-siam-ad-int-fbn-packshot?w=420&fm=jpg&auto=compress" alt="Product alt text" />
</picture>
</div>
</div>
</div>
<div class="rc-carousel__gallery-thumbnails-wrapper">
<div class="rc-carousel rc-carousel__gallery-thumbnails">
<div class="rc-carousel__gallery-thumbnail">
<figure class="rc-img--square" style="background-image: url('https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=64&fm=jpg&auto=compress')">
<figcaption class="rc-screen-reader-text">Product caption text</figcaption>
</figure>
</div>
<div class="rc-carousel__gallery-thumbnail">
<figure class="rc-img--square" style="background-image: url('https://cdn.royalcanin-weshare-online.io/UCEUa2QBaxEApS7L_-Xz/v2/fbn-2013-graphiccodes-packshots-siam-ad-int-fbn-packshot?w=64&fm=jpg&auto=compress')">
<figcaption class="rc-screen-reader-text">Product caption text</figcaption>
</figure>
</div>
<div class="rc-carousel__gallery-thumbnail">
<figure class="rc-img--square" style="background-image: url('https://cdn.royalcanin-weshare-online.io/mSIRcmkBaxEApS7LMQpI/v15/vhn-dermatology-sensitivity-chicken-cat-pouch-pouch-packshot-b1ru?w=64&fm=jpg&auto=compress')">
<figcaption class="rc-screen-reader-text">Product caption text</figcaption>
</figure>
</div>
<div class="rc-carousel__gallery-thumbnail">
<figure class="rc-img--square" style="background-image: url('https://cdn.royalcanin-weshare-online.io/mSIRcmkBaxEApS7LMQpI/v15/vhn-dermatology-sensitivity-chicken-cat-pouch-pouch-packshot-b1ru?w=64&fm=jpg&auto=compress')">
<figcaption class="rc-screen-reader-text">Product caption text</figcaption>
</figure>
</div>
<div class="rc-carousel__gallery-thumbnail">
<figure class="rc-img--square" style="background-image: url('https://cdn.royalcanin-weshare-online.io/m2kia2QBG95Xk-RBC8jn/v1/medium-maxi-giant-pos-2012-packshots-ma-ad-shn-packshot?w=64&fm=jpg&auto=compress')">
<figcaption class="rc-screen-reader-text">Product caption text</figcaption>
</figure>
</div>
<div class="rc-carousel__gallery-thumbnail">
<figure class="rc-img--square" style="background-image: url('https://cdn.royalcanin-weshare-online.io/UCEUa2QBaxEApS7L_-Xz/v2/fbn-2013-graphiccodes-packshots-siam-ad-int-fbn-packshot?w=64&fm=jpg&auto=compress')">
<figcaption class="rc-screen-reader-text">Product caption text</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="rc-column" id="cce2466e-4075-4ac5-9ef1-3808f97dcb14">
<div>
<h1 class="rc-alpha">Product Name</h1>
<div class="rating rating--link" data-component="product-rating-link">
<p>
<span class="rating__stars rating__stars--inline">
<span class="rating__off">
<span class="rc-icon rc-rate-fill--xs rc-brand1--xs"></span>
<span class="rc-icon rc-rate-fill--xs rc-brand1--xs"></span>
<span class="rc-icon rc-rate-fill--xs rc-brand1--xs"></span>
<span class="rc-icon rc-rate-fill--xs rc-brand1--xs"></span>
<span class="rc-icon rc-rate-fill--xs rc-iconography--xs"></span>
</span>
</span>
</p>
</div>
<a href="#" target="" class="rc-btn rc-btn--two">Find a retailer</a>
<p>Consule quando ceterorum Scaevola credere accessio homine conclusum inscientia tractat venire turma rationem emolumento an. Putem patientiamque breviter iudicatum familiarem idem utinam fingi Ex impendet erroribus vindicet difficile adversa rogatiuncula. Please consult a vet before puhchasing this food for your pet. </p>
</div>
</div>
</div>Copied!
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-rowsattribute 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));
Headline
Headline
Headline
Headline
Headline
Headline
Headline
Headline
Headline
Headline
Headline
<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>
</div>
</div>Copied!
Link card carousel
<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 class="rc-styled-link" href="#" aria-label="Links to example page">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-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" arialabel="Like">
<span class="rc-screen-reader-text">Like</span>
</button>
<picture class="rc-card__image">
<img alt="alt text" src="https://placehold.it/800x600?text=4:3" />
</picture>
<div class="rc-card__body">
<header>
<p class="rc-card__meta">Meta 1</p>
<h1 class="rc-card__title">Heading</h1>
</header>
</div>
</article>
</a>
<a class="rc-card__link" href="#/">
<article class="rc-card rc-card--b">
<button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" arialabel="Like">
<span class="rc-screen-reader-text">Like</span>
</button>
<picture class="rc-card__image">
<img alt="alt text" src="https://placehold.it/800x600?text=4:3" />
</picture>
<div class="rc-card__body">
<header>
<p class="rc-card__meta">Meta 1</p>
<h1 class="rc-card__title">Heading</h1>
</header>
</div>
</article>
</a>
<a class="rc-card__link" href="#/">
<article class="rc-card rc-card--b">
<button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" arialabel="Like">
<span class="rc-screen-reader-text">Like</span>
</button>
<picture class="rc-card__image">
<img alt="alt text" src="https://placehold.it/800x600?text=4:3" />
</picture>
<div class="rc-card__body">
<header>
<p class="rc-card__meta">Meta 1</p>
<h1 class="rc-card__title">Heading</h1>
</header>
</div>
</article>
</a>
<a class="rc-card__link" href="#/">
<article class="rc-card rc-card--b">
<button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" arialabel="Like">
<span class="rc-screen-reader-text">Like</span>
</button>
<picture class="rc-card__image">
<img alt="alt text" src="https://placehold.it/800x600?text=4:3" />
</picture>
<div class="rc-card__body">
<header>
<p class="rc-card__meta">Meta 1</p>
<h1 class="rc-card__title">Heading</h1>
</header>
</div>
</article>
</a>
<a class="rc-card__link" href="#/">
<article class="rc-card rc-card--b">
<button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" arialabel="Like">
<span class="rc-screen-reader-text">Like</span>
</button>
<picture class="rc-card__image">
<img alt="alt text" src="https://placehold.it/800x600?text=4:3" />
</picture>
<div class="rc-card__body">
<header>
<p class="rc-card__meta">Meta 1</p>
<h1 class="rc-card__title">Heading</h1>
</header>
</div>
</article>
</a>
<a class="rc-card__link" href="#/">
<article class="rc-card rc-card--b">
<button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" arialabel="Like">
<span class="rc-screen-reader-text">Like</span>
</button>
<picture class="rc-card__image">
<img alt="alt text" src="https://placehold.it/800x600?text=4:3" />
</picture>
<div class="rc-card__body">
<header>
<p class="rc-card__meta">Meta 1</p>
<h1 class="rc-card__title">Heading</h1>
</header>
</div>
</article>
</a>
<a class="rc-card__link" href="#/">
<article class="rc-card rc-card--b">
<button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" arialabel="Like">
<span class="rc-screen-reader-text">Like</span>
</button>
<picture class="rc-card__image">
<img alt="alt text" src="https://placehold.it/800x600?text=4:3" />
</picture>
<div class="rc-card__body">
<header>
<p class="rc-card__meta">Meta 1</p>
<h1 class="rc-card__title">Heading</h1>
</header>
</div>
</article>
</a>
<a class="rc-card__link" href="#/">
<article class="rc-card rc-card--b">
<button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" arialabel="Like">
<span class="rc-screen-reader-text">Like</span>
</button>
<picture class="rc-card__image">
<img alt="alt text" src="https://placehold.it/800x600?text=4:3" />
</picture>
<div class="rc-card__body">
<header>
<p class="rc-card__meta">Meta 1</p>
<h1 class="rc-card__title">Heading</h1>
</header>
</div>
</article>
</a>
<a class="rc-card__link" href="#/">
<article class="rc-card rc-card--b">
<button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" arialabel="Like">
<span class="rc-screen-reader-text">Like</span>
</button>
<picture class="rc-card__image">
<img alt="alt text" src="https://placehold.it/800x600?text=4:3" />
</picture>
<div class="rc-card__body">
<header>
<p class="rc-card__meta">Meta 1</p>
<h1 class="rc-card__title">Heading</h1>
</header>
</div>
</article>
</a>
<a class="rc-card__link" href="#/">
<article class="rc-card rc-card--b">
<button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" arialabel="Like">
<span class="rc-screen-reader-text">Like</span>
</button>
<picture class="rc-card__image">
<img alt="alt text" src="https://placehold.it/800x600?text=4:3" />
</picture>
<div class="rc-card__body">
<header>
<p class="rc-card__meta">Meta 1</p>
<h1 class="rc-card__title">Heading</h1>
</header>
</div>
</article>
</a>
<a class="rc-card__link" href="#/">
<article class="rc-card rc-card--b">
<button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" arialabel="Like">
<span class="rc-screen-reader-text">Like</span>
</button>
<picture class="rc-card__image">
<img alt="alt text" src="https://placehold.it/800x600?text=4:3" />
</picture>
<div class="rc-card__body">
<header>
<p class="rc-card__meta">Meta 1</p>
<h1 class="rc-card__title">Heading</h1>
</header>
</div>
</article>
</a>
<a class="rc-card__link" href="#/">
<article class="rc-card rc-card--b">
<button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" arialabel="Like">
<span class="rc-screen-reader-text">Like</span>
</button>
<picture class="rc-card__image">
<img alt="alt text" src="https://placehold.it/800x600?text=4:3" />
</picture>
<div class="rc-card__body">
<header>
<p class="rc-card__meta">Meta 1</p>
<h1 class="rc-card__title">Heading</h1>
</header>
</div>
</article>
</a>
</div>
</div>Copied!
Customise card amount
You can specify the number of cards at the most common breakpoint for each slide by adding the data-carousel--card-count="" attribute to the carousel container. Possible values are;data-carousel--card-count="" default will show 3 items on md, 4 items on xl and xxl devicesdata-carousel--card-count="3" will show 3 items on md, xl and xxl devicesdata-carousel--card-count="4" will show 3 items on md devices, 4 items on xl and xxl devicesdata-carousel--card-count="6" will show 3 items on md devices, 4 items on xl devices and 6 items on xxl devices
You also have the option to override values for specific breakpoints by using data-carousel--card-count-xl="4" or data-carousel--card-count-xxl="6" attributes.
Headline
Headline
Headline
Headline
Headline
Headline
Headline
Headline
Headline
Headline
Headline
Headline
<div class="rc-carousel rc-carousel--cards rc-match-heights" data-carousel--card-count="3" data-carousel--card-count-xl="4" data-carousel--card-count-xxl="6" 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>
</div>
</div>Copied!
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.
∏
Is your pet's weight healthy?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus odio tempor risus placerat, id gravida libero viverra.
Read Article
Is your pet's weight healthy?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus odio tempor risus placerat, id gravida libero viverra.
Read Article
Is your pet's weight healthy?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus odio tempor risus placerat, id gravida libero viverra.
Read Article<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="/assets/images/img-b-w.jpg" />
</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="/assets/images/img-b-w.jpg" />
</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="/assets/images/img-b-w.jpg" />
</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>Copied!
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.
∏
Mix it up for your pure bred cat
Tailored breed-specific nutrition now available in wet.
Read Article
Mix it up for your pure bred cat
Tailored breed-specific nutrition now available in wet.
Read Article
Mix it up for your pure bred cat
Tailored breed-specific nutrition now available in wet.
Read Article<div data-js-carousel="" class="rc-carousel rc-carousel--hero">
<div class="rc-hero rc-hero rc-hero__layout--2" data-thumb="interactive--pager">
<div class="rc-hero__fg">
<div class="rc-hero__section rc-hero__section--img">
<img src="/assets/images/img-b-w.jpg" />
</div>
<div class="rc-hero__section rc-hero__section--img">
<img src="/assets/images/img-b-w.jpg" />
</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 rc-hero__layout--2" data-thumb="interactive--pager">
<div class="rc-hero__fg">
<div class="rc-hero__section rc-hero__section--img">
<img src="/assets/images/img-b-w.jpg" />
</div>
<div class="rc-hero__section rc-hero__section--img">
<img src="/assets/images/img-b-w.jpg" />
</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 rc-hero__layout--2" data-thumb="interactive--pager">
<div class="rc-hero__fg">
<div class="rc-hero__section rc-hero__section--img">
<img src="/assets/images/img-b-w.jpg" />
</div>
<div class="rc-hero__section rc-hero__section--img">
<img src="/assets/images/img-b-w.jpg" />
</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>Copied!
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.
∏
When scratching begins, visit your Vet.
Read Article
When scratching begins, visit your Vet.
Read Article
When scratching begins, visit your Vet.
Read Article<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="/assets/images/img-b-w.jpg" />
</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="/assets/images/img-b-w.jpg" />
</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="/assets/images/img-b-w.jpg" />
</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>Copied!
Carousel Auto play
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.
∏
When scratching begins, visit your Vet.
Read Article
When scratching begins, visit your Vet.
Read Article
When scratching begins, visit your Vet.
Read Article<div data-js-carousel="" class="rc-carousel rc-carousel--hero" data-carousel--autoplay="true" data-carousel--autoplay-timeout="4000">
<div class="rc-hero rc-hero__autoplay" data-thumb="interactive--pager">
<div class="rc-hero__fg">
<div class="rc-hero__section rc-hero__section--img">
<img src="/assets/images/img-b-w.jpg" />
</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__autoplay" data-thumb="interactive--pager">
<div class="rc-hero__fg">
<div class="rc-hero__section rc-hero__section--img">
<img src="/assets/images/img-b-w.jpg" />
</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__autoplay" data-thumb="interactive--pager">
<div class="rc-hero__fg">
<div class="rc-hero__section rc-hero__section--img">
<img src="/assets/images/img-b-w.jpg" />
</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>Copied!