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

Images

Image use throughout the Design Language should adhere to the following types of imagery; Black and white pet imagery, article photography pack shots and user or pet avatars. Pet of pack imagery should not be used if the animal or pack is not legible.

Black and White

Black and white pet imagery should only be used in areas of significance where a brand message it to be promoted such as a promotion or carousel panel. Black and white imagery should be used sparingly so as not to dilute the power of the image.

Always include descriptive alternative text for screen readers

<img class="rc-img-border" src="/assets/images/img-b-w.jpg" alt="Always include descriptive alternative text for screen readers" />

Article Imagery

Article imagery should be used for introducing and highlighting the content of an article. Article imagery should be relevant to the article and should adhere to the Royal Canin Anthropomorphism views where animals should be respected for what they are and not portrayed with any human characteristics.

<img class="rc-img-border" src="/assets/images/img-article-full.jpg" alt="Always include descriptive alternative text for screen readers" />

Pack Shots

Pack shots should always be displayed with a white background which sits on a grey container. Packshots will begin as portrait layout on mobile 2 column layout and should not be smaller than 140pt in width, ensuring the main pack writing is legible.

<img class="rc-img-border" src="/assets/images/img-pack.jpg" alt="Always include descriptive alternative text for screen readers" />

Round Image - Extra small

<figure class="rc-img--round rc-img--round--xs" style="background-image: url('https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Round Image - Small

<figure class="rc-img--round rc-img--round--sm" style="background-image: url('https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Round Image - Default

<figure class="rc-img--round" style="background-image: url('https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Round Image - Medium

<figure class="rc-img--round rc-img--round--md" style="background-image: url('https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Round Image - Large

<figure class="rc-img--round rc-img--round--lg" style="background-image: url('https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Square Image - Extra small

<figure class="rc-img--square rc-img--square--xs" style="background-image: url('https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Square Image - Small

<figure class="rc-img--square rc-img--square--sm" style="background-image: url('https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Square Image - Default

<figure class="rc-img--square" style="background-image: url('https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Square Image - Medium

<figure class="rc-img--square rc-img--square--md" style="background-image: url('https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Square Image - Large

<figure class="rc-img--square rc-img--square--lg" style="background-image: url('https://place-hold.it/800x600/D7D7D7/767676&text=800%20x%20600&bold ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>