Working together for the ultimate brand experience

Royal Canin Design Language


All notable changes to Royal Canin Design Language will be documented on this page.



Lazy-loading Components

Components are now only loaded when they are in or enter the viewport. This eases CPU usage on page load and runs for the shorted amount of time possible.

Master PDP & Vet Services Global Template

Within the new template section there are the first two master templates. More documentation on there usage will be available soon.

Mobile accordion/Desktop tabs component

We’ve added a new data attribute that converts an accordion to tabs on desktop.

Box radio button

A new radio button style has been added to better suit commerce usage

XL spacer size

XL size spacing for mobile and desktop.


Number picker variation

Version of number picker without buttons has been added to design language.

Template page classes

We have added a template page specific class (rc-template--pdp) that gives use case specific layout enhancements.

Product image max height set in Product Image Carousel

A max-height of 500px has been added to the product image in the product image carousel to stop images scaling too far when supplied at large sizes.

Carousel card count

After a UX review we have now set the card carousel has a new max limit of four cards, this has reduced from six.

New tabs style variant

There is now a new class adding a full width bottom border to tabs (rc-tabs__controller--border--full-width).


Icon button bug

Bugs that was causing overwriting of utility, mobile visibility class has been fixed now.

Select mobile issue

Problem with un-clickable select input on mobile devices, has now been solved.

Card grid height match bug on IE11

Bug that was causing incorrect card height calculation on IE11, has now been fixed.

Button hover on contact us page

Bug that was causing incorrect hover behaviour on icon buttons, has now been fixed.

Markup changes

Number picker variation

Number picker is using specific class (rc-input__number-picker-wrapper) for styling instead of role. But we have kept the old role selector for compatibility, this will be removed in version 9.



We have removed the prototype from the Design Language website as they were only intended to be temporary until we start supplying global templates. The new product description and vet services global templates are the first items in the new templates area.



Image zoom

New image zoom functionality has been added. It’s allowing user to zoom in the product image in product image carousel.


Webpack contenthash

Contenthash have been added to website specific javascript for improved caching.


Picture images on Internet Explorer

To ensure correct working of background images on IE browsers, adding additional class .rc-bg-responsive-image--contain to rc-bg-responsive-image is now required.

Fix mobile navigation item list padding

Bug that was causing incorrect padding on mobile navigation list has now been fixed.

Logo version

A bug where the RC logo version was permanently stuck to 8-5-11 has been fixed. Now the logo is always up to date with the current release version.

Single breadcrumb targeted by progress bar javascript

A bug where single breadcrumb items triggered a progress bar method resulting in a string of ‘%null’ being appended to the page, has been fixed.

Markup changes

Breadcrumbs without links

Any breadcrumb that isn’t a link should now me a span not an a tag. These span breadcrumbs are styled the same but have no rollover state.


Border-none class

Documentation including a markup example, has been added for rc-border-none class.