Working together for the ultimate brand experience

Royal Canin Design Language

Interactive 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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text about image
<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>

Copied!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text about image
<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>

Copied!