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

Interactive image

The interactive image component utilises action buttons on an image to show or hide content in the respective content block. When an action button is clicked or touched, the associated content will update. This is useful for writing content for specific areas within an image or creating a more interactive experience to discover information.

Usage

Action buttons can be used with either icons or numbers. If using numbers, we recommend the numerical order follows the vertical placement of the buttons. We recommend placing an interactive image inside an extra large container block, although a large container block can also be used if you do not require the image to be as big. The width of the image can be 2/3 or 1/2 of the content block depending on the length of the copy you have or the size you need the image to be.

When placing action buttons, consider the placement - too close together and the user will not be able to touch the hotspot correctly. Crowding the image with too many action buttons will decrease the impact of the image and it will get lost. For UX best practice, we recommend three action buttons to be the optimum number of buttons used at a time and this would work well on all image sizes. If your image is as large as possible (2/3 image in an xl container) then up to six action buttons could be placed though consider whether the user will click through all content.

When placing the buttons, try to cover up as little of the image as possible, particularly when used alongside a Royal Canin emblematic image.

Two ratio versions available:

16:9 - rc-interactive-image__wrapper rc-interactive-image__wrapper--16-9
4:3 - rc-interactive-image__wrapper rc-interactive-image__wrapper--4-3

Attributes needed for this component:

data-js-top sets the position in % from the top
data-js-right sets the position in % from the right
data-js-bottom sets the position in % from the bottom
data-js-left sets the position in % from the left

<figure class="rc-bg-image rc-fixed-ratio rc-fixed-ratio--16-9" style="background-image: url('/assets/images/responsive-backgrounds/Content-Block_boxer-puppy_cutout_800px.png' )">
  <div class="rc-interactive-image">
    <div id="plus-tooltip" class="rc-tooltip"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
    <button class="rc-btn rc-btn--action rc-icon rc-brand3 rc-plus--xs rc-interactive-button rc-interactive-image__button" data-js-left="30%" data-js-bottom="" data-js-right="" data-js-top="9%" data-js-icon-button="" data-tooltip-placement="left" data-tooltip="plus-tooltip" aria-label="Plus">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
    <div id="sustainable-tooltip" class="rc-tooltip"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
    <button class="rc-btn rc-btn--action rc-icon rc-brand3 rc-sustainable--xs rc-interactive-button rc-interactive-image__button" data-js-left="" data-js-bottom="" data-js-right="34%" data-js-top="51%" data-js-icon-button="" data-tooltip-placement="right" data-tooltip="sustainable-tooltip" aria-label="Sustainable">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
    <div id="food-tooltip" class="rc-tooltip"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
    <button class="rc-btn rc-btn--action rc-icon rc-brand3 rc-food--xs rc-interactive-button rc-interactive-image__button" data-js-left="23%" data-js-bottom="6%" data-js-right="" data-js-top="" data-js-icon-button="" data-tooltip-placement="bottom" data-tooltip="food-tooltip" aria-label="Food">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
  </div>
  <figcaption class="rc-screen-reader-text">Text about image</figcaption>
</figure>

<figure class="rc-bg-image rc-fixed-ratio rc-fixed-ratio--4-3" style="background-image: url('/assets/images/responsive-backgrounds/russian-blue-cat.jpg' )">
  <div class="rc-interactive-image">
    <div id="groomer-tooltip" class="rc-tooltip"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
    <button class="rc-btn rc-btn--action rc-icon rc-brand3 rc-interactive-button rc-interactive-image__button rc-groomer--xs" data-js-left="52%" data-js-bottom="" data-js-right="" data-js-top="18%" data-js-icon-button="" data-tooltip-placement="left" data-tooltip="groomer-tooltip" aria-label="Groomer">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
    <div id="vet-tooltip" class="rc-tooltip"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
    <button class="rc-btn rc-btn--action rc-icon rc-brand3 rc-interactive-button rc-interactive-image__button rc-vet--xs" data-js-left="" data-js-bottom="" data-js-right="30%" data-js-top="63%" data-js-icon-button="" data-tooltip-placement="right" data-tooltip="vet-tooltip" aria-label="Vet">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
    <div id="nutritional-tooltip" class="rc-tooltip"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
    <button class="rc-btn rc-btn--action rc-icon rc-brand3 rc-interactive-button rc-interactive-image__button rc-nutritional--xs" data-js-left="17%" data-js-bottom="11%" data-js-right="" data-js-top="" data-js-icon-button="" data-tooltip-placement="top" data-tooltip="nutritional-tooltip" aria-label="Nutritional">
      <span class="rc-screen-reader-text">Click interaction</span>
    </button>
  </div>
  <figcaption class="rc-screen-reader-text">Text about image</figcaption>
</figure>

Interactive image toggle

1.Incredible in every detail

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.

2.Another title

3.Yet another title

<div class="rc-layout-container rc-two-column rc-content-h-middle rc-interactive-image--toggle-content">
  <div class="rc-column rc-match-heights">
    <figure class="rc-bg-image rc-fixed-ratio rc-fixed-ratio--16-9" style="background-image: url('../../assets/images/boxer-puppy.png')">
      <div class="rc-interactive-image">
        <button id="panel-one-button" class="rc-btn rc-btn--action rc-interactive-image__button rc-interactive-button rc-ignore-aspect-ratio" data-js-left="30%" data-js-bottom="" data-js-right="" data-js-top="9%" data-js-icon-button="" aria-label="One" aria-controls="panel-one">
          <span class="rc-screen-reader-text">One</span>
          <span class="rc-interactive-image-number">1</span>
        </button>
        <button id="panel-two-button" class="rc-btn rc-btn--action rc-interactive-image__button rc-interactive-button rc-ignore-aspect-ratio" data-js-left="" data-js-bottom="" data-js-right="34%" data-js-top="51%" data-js-icon-button="" aria-label="Two" tabindex="-1" aria-controls="panel-two">
          <span class="rc-screen-reader-text">Two</span>
          <span class="rc-interactive-image-number">2</span>
        </button>
        <button id="panel-three-button" class="rc-btn rc-btn--action rc-interactive-image__button rc-interactive-button rc-ignore-aspect-ratio" data-js-left="23%" data-js-bottom="6%" data-js-right="" data-js-top="" data-js-icon-button="" aria-label="Three" tabindex="-1" aria-controls="panel-three">
          <span class="rc-screen-reader-text">Three</span>
          <span class="rc-interactive-image-number">3</span>
        </button>
      </div>
      <figcaption class="rc-screen-reader-text">Text about image</figcaption>
    </figure>
  </div>
  <div class="rc-column rc-match-heights">
    <div id="panel-one" aria-labelledby="panel-one-button" class="rc-interactive-image--toggle-content__content rc-match-heights rc-margin-x--lg" aria-selected="true">
      <h3 class="rc-gamma">
        <span class="rc-hanging-indent">1.</span>
        Incredible in every detail
      </h3>
      <p class="rc-body">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 id="panel-two" aria-labelledby="panel-two-button" class="rc-interactive-image--toggle-content__content rc-match-heights rc-margin-x--lg rc-hidden" aria-selected="false">
      <h3 class="rc-gamma">
        <span class="rc-hanging-indent">2.</span>
        Another title
      </h3>
      <p class="rc-body">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 id="panel-three" aria-labelledby="panel-three-button" class="rc-interactive-image--toggle-content__content rc-match-heights rc-margin-x--lg rc-hidden" aria-selected="false" tabindex="-1">
      <h3 class="rc-gamma">
        <span class="rc-hanging-indent">3.</span>
        Yet another title
      </h3>
      <p class="rc-body">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>

Interactive image toggle with icons

Incredible in every detail

Another title

Yet another title

<div class="rc-layout-container rc-two-column rc-content-h-middle rc-interactive-image--toggle-content">
  <div class="rc-column rc-match-heights">
    <figure class="rc-bg-image rc-fixed-ratio rc-fixed-ratio--16-9" style="background-image: url('../../assets/images/boxer-puppy.png')">
      <div class="rc-interactive-image">
        <button id="panel-one-button" class="rc-btn rc-btn--action rc-icon rc-brand3 rc-plus--xs rc-interactive-button rc-interactive-image__button" data-js-left="30%" data-js-bottom="" data-js-right="" data-js-top="9%" data-js-icon-button="" aria-label="One" aria-controls="panel-one">
          <span class="rc-screen-reader-text">One</span>
        </button>
        <button id="panel-two-button" class="rc-btn rc-btn--action rc-icon rc-brand3 rc-sustainable--xs rc-interactive-button rc-interactive-image__button" data-js-left="" data-js-bottom="" data-js-right="34%" data-js-top="51%" data-js-icon-button="" aria-label="Two" tabindex="-1" aria-controls="panel-two">
          <span class="rc-screen-reader-text">Two</span>
        </button>
        <button id="panel-three-button" class="rc-btn rc-btn--action rc-icon rc-brand3 rc-food--xs rc-interactive-button rc-interactive-image__button" data-js-left="23%" data-js-bottom="6%" data-js-right="" data-js-top="" data-js-icon-button="" aria-label="Three" tabindex="-1" aria-controls="panel-three">
          <span class="rc-screen-reader-text">Three</span>
        </button>
      </div>
      <figcaption class="rc-screen-reader-text">Text about image</figcaption>
    </figure>
  </div>
  <div class="rc-column rc-match-heights">
    <div id="panel-one" aria-labelledby="panel-one-button" class="rc-interactive-image--toggle-content__content rc-match-heights rc-margin-x--lg" aria-selected="true">
      <h3 class="rc-gamma">
        <span class="rc-hanging-indent rc-icon rc-brand1 rc-plus--xs"></span>
        Incredible in every
        detail
      </h3>
      <p class="rc-body">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 id="panel-two" aria-labelledby="panel-two-button" class="rc-interactive-image--toggle-content__content rc-match-heights rc-margin-x--lg rc-hidden" aria-selected="false">
      <h3 class="rc-gamma">
        <span class="rc-hanging-indent rc-icon rc-brand1 rc-sustainable--xs"></span>
        Another title
      </h3>
      <p class="rc-body">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 id="panel-three" aria-labelledby="panel-three-button" class="rc-interactive-image--toggle-content__content rc-match-heights rc-margin-x--lg rc-hidden" aria-selected="false" tabindex="-1">
      <h3 class="rc-gamma">
        <span class="rc-hanging-indent rc-icon rc-brand1 rc-food--xs"></span>
        Yet another title
      </h3>
      <p class="rc-body">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>