Working together for the ultimate brand experience

Royal Canin Design Language

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" />

Copied!

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.

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

Copied!

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.

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

Copied!

Round Image - Extra small

Pet's name
<figure class="rc-img--round rc-img--round--xs" style="background-image: url(' https://placeholdit.imgix.net/~text?txtsize=75&amp;txt=800%C3%97625&amp;w=800&amp;h=625 ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Copied!

Round Image - Small

Pet's name
<figure class="rc-img--round rc-img--round--sm" style="background-image: url(' https://placeholdit.imgix.net/~text?txtsize=75&amp;txt=800%C3%97625&amp;w=800&amp;h=625 ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Copied!

Round Image - Default

Pet's name
<figure class="rc-img--round" style="background-image: url(' https://placeholdit.imgix.net/~text?txtsize=75&amp;txt=800%C3%97625&amp;w=800&amp;h=625 ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Copied!

Round Image - Medium

Pet's name
<figure class="rc-img--round rc-img--round--md" style="background-image: url(' https://placeholdit.imgix.net/~text?txtsize=75&amp;txt=800%C3%97625&amp;w=800&amp;h=625 ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Copied!

Round Image - Large

Pet's name
<figure class="rc-img--round rc-img--round--lg" style="background-image: url(' https://placeholdit.imgix.net/~text?txtsize=75&amp;txt=800%C3%97625&amp;w=800&amp;h=625 ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Copied!

Square Image - Extra small

Pet's name
<figure class="rc-img--square rc-img--square--xs" style="background-image: url(' https://placeholdit.imgix.net/~text?txtsize=75&amp;txt=800%C3%97625&amp;w=800&amp;h=625 ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Copied!

Square Image - Small

Pet's name
<figure class="rc-img--square rc-img--square--sm" style="background-image: url(' https://placeholdit.imgix.net/~text?txtsize=75&amp;txt=800%C3%97625&amp;w=800&amp;h=625 ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Copied!

Square Image - Default

Pet's name
<figure class="rc-img--square" style="background-image: url(' https://placeholdit.imgix.net/~text?txtsize=75&amp;txt=800%C3%97625&amp;w=800&amp;h=625 ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Copied!

Square Image - Medium

Pet's name
<figure class="rc-img--square rc-img--square--md" style="background-image: url(' https://placeholdit.imgix.net/~text?txtsize=75&amp;txt=800%C3%97625&amp;w=800&amp;h=625 ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Copied!

Square Image - Large

Pet's name
<figure class="rc-img--square rc-img--square--lg" style="background-image: url(' https://placeholdit.imgix.net/~text?txtsize=75&amp;txt=800%C3%97625&amp;w=800&amp;h=625 ')">
  <figcaption class="rc-screen-reader-text">Pet's name</figcaption>
</figure>

Copied!