Working together for the ultimate brand experience

Royal Canin Design Language

Block styles

Styles that can be applied to block level elements/components.

Border types

Borders can be applied using two utility classes, one sets which side to set the border on and the other sets the colour.

.rc-border-all
<div class="rc-padding--sm rc-border-all rc-border-colour--interface">.rc-border-all</div>

Copied!

.rc-border-top
<div class="rc-padding--sm rc-border-top rc-border-colour--interface">.rc-border-top</div>

Copied!

.rc-border-bottom
<div class="rc-padding--sm rc-border-bottom rc-border-colour--interface">.rc-border-bottom</div>

Copied!

.rc-border-right
<div class="rc-padding--sm rc-border-right rc-border-colour--interface">.rc-border-right</div>

Copied!

.rc-border-left
<div class="rc-padding--sm rc-border-left rc-border-colour--interface">.rc-border-left</div>

Copied!

Background Colours

Background colours can be applied with the following classes.

rc-bg-colour--brand1
<div class="rc-padding--sm rc-bg-colour--brand1">rc-bg-colour--brand1</div>

Copied!

rc-bg-colour--brand2
<div class="rc-padding--sm rc-bg-colour--brand2">rc-bg-colour--brand2</div>

Copied!

rc-bg-colour--brand3
<div class="rc-padding--sm rc-bg-colour--brand3">rc-bg-colour--brand3</div>

Copied!

rc-bg-colour--brand4
<div class="rc-padding--sm rc-bg-colour--brand4">rc-bg-colour--brand4</div>

Copied!

Shades

Element used to obscure everything with a lower z-index.

Shade element - grey

<div class="rc-padding--sm rc-shade rc-shade--grey"></div>

Copied!

Shade element - grey light

<div class="rc-padding--sm rc-shade rc-shade--grey--light"></div>

Copied!

Shade element - white

<div class="rc-padding--sm rc-shade rc-shade--white"></div>

Copied!

Shade element - white light

<div class="rc-padding--sm rc-shade rc-shade--white--light"></div>

Copied!

Shadows

Different types of box shadows can be applied with the following classes.

rc-shadow-black--strong
<div class="rc-padding--sm rc-shadow-black--strong">rc-shadow-black--strong</div>

Copied!

rc-shadow-black--soft
<div class="rc-padding--sm rc-shadow-black--soft">rc-shadow-black--soft</div>

Copied!

rc-shadow-black--faint
<div class="rc-padding--sm rc-shadow-black--faint">rc-shadow-black--faint</div>

Copied!

rc-shadow-grey--inset
<div class="rc-padding--sm rc-shadow-grey--inset">rc-shadow-grey--inset</div>

Copied!

rc-shadow-grey--faint
<div class="rc-padding--sm rc-shadow-grey--faint">rc-shadow-grey--faint</div>

Copied!

rc-shadow-none
<div class="rc-padding--sm rc-shadow-none">rc-shadow-none</div>

Copied!