Working together for the ultimate brand experience

Royal Canin Design Language

Layout container

The Web Design Language grid system is made up of 5 column options. Each column should have a 12px gutter top, bottom, left and right to ensure correct spacing. Column counts can be mixed and the variations documented below will enable a wide range of column options.

Usage

To create a layout container apply the rc-layout-container class to a wrapper element with child elements using the rc-column class. Layout containers only cater for a single row layout, so please only add items to be displayed across one row. To avoid a horizontal scrollbar in cases where the layout container is used as a page layout or is a top-most DOM node, a wrapper container should be added with class rc-scroll--y. This should be added to a tag such as <main> or <div>, it will not directly work on <body>.

You can then apply a layout modifier class:

  • rc-one-column
  • rc-two-column
  • rc-three-column
  • rc-four-column
  • rc-five-column

There are also other useful modifier classes: (See examples below)

  • rc-match-heights
  • rc-reverse-layout
  • rc-content-h-top
  • rc-content-h-middle
  • rc-content-h-bottom
  • rc-flex-start
  • rc-flex-end

To align text, the following modifier classes can be used:

  • rc-text--left
  • rc-text--right
  • rc-text--center

These text alignment modifier classes can be breakpoint specific. (For example rc-text--center--sm-down will center text align from the sm breakpoint and smaller sizes)

To override the default padding and margin, you can use spacer utility classes (See here ). Few examples below:

  • rc-padding--sm
  • rc-padding--none
  • rc-padding-x--sm--desktop
  • rc-margin--sm
  • rc-margin--none
  • rc-margin-x--sm--desktop

One column

1 / 1

<div class="rc-layout-container rc-one-column">
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 1 </h1>
  </div>
</div>

Copied!

Two columns

1 / 2

1 / 2

<div class="rc-layout-container rc-two-column">
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 2 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 2 </h1>
  </div>
</div>

Copied!

Three columns

1 / 3

1 / 3

1 / 3

<div class="rc-layout-container rc-three-column">
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 3 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 3 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 3 </h1>
  </div>
</div>

Copied!

Four columns

1 / 4

1 / 4

1 / 4

1 / 4

<div class="rc-layout-container rc-four-column">
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 4 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 4 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 4 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 4 </h1>
  </div>
</div>

Copied!

Five columns

1 / 5

1 / 5

1 / 5

1 / 5

1 / 5

<div class="rc-layout-container rc-five-column">
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 5 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 5 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 5 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 5 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 5 </h1>
  </div>
</div>

Copied!

Six columns

1 / 6

1 / 6

1 / 6

1 / 6

1 / 6

1 / 6

<div class="rc-layout-container rc-six-column">
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 6 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 6 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 6 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 6 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 6 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 6 </h1>
  </div>
</div>

Copied!

Layout Modifiers

To create variations in your layouts there are some modifier classes to span items across multiple columns. Simply add one of the below modifier classes on one of the rc-column within the container with the class layout-container.

Remember when you add these classes the total needs to add up to number of columns you have declared on the container. i.e three-column container with 2 child elements can have one of its items double-width, so in total the elements fill three columns.

  • rc-double-width
  • rc-triple-width
  • rc-quad-width

Double width

2 / 3

1 / 3

<div class="rc-layout-container rc-three-column">
  <div class="rc-column rc-double-width">
    <h1 class="rc-espilon"> 2 / 3 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 3 </h1>
  </div>
</div>

Copied!

Triple width

3 / 5

2 / 5

<div class="rc-layout-container rc-five-column">
  <div class="rc-column rc-triple-width">
    <h1 class="rc-espilon"> 3 / 5 </h1>
  </div>
  <div class="rc-column rc-double-width">
    <h1 class="rc-espilon"> 2 / 5 </h1>
  </div>
</div>

Copied!

Quad width

1 / 5

4 / 5

<div class="rc-layout-container rc-five-column">
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 5 </h1>
  </div>
  <div class="rc-column rc-quad-width">
    <h1 class="rc-espilon"> 4 / 5 </h1>
  </div>
</div>

Copied!

Layout Order Modifiers

There are some modifiers to help make these layouts more flexible.

  • rc-stacked - Stack columns on top of one another within a layout container
  • rc-reverse-layout - Note how in the DOM the right-hand side item is actually first
  • rc-reverse-layout-mobile – Same as the above but only activated at the mobile breakpoints
  • rc-match-heights – Forces the height of the columns to match their siblings
  • rc-flex-start – Align components to the start - particularly for multi column horizontal layouts
  • rc-flex-end – Align components to the end - particularly for multi column horizontal layouts
  • rc-flex-direction--reverse--*-* – Reverses order of components - requires breakpoint and direction from which to take effect (For example rc-flex-direction--reverse--md-up reverses components at the md breakpoint and all larger sizes)'

Two columns stacked

1 / 2

1 / 2

<div class="rc-layout-container rc-two-column rc-stacked">
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 2 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 2 </h1>
  </div>
</div>

Copied!

Three columns stacked

1 / 3

1 / 3

1 / 3

<div class="rc-layout-container rc-three-column rc-stacked">
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 3 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 3 </h1>
  </div>
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 3 </h1>
  </div>
</div>

Copied!

Reverse order

1 / 3

2 / 3

<div class="rc-layout-container rc-reverse-layout rc-three-column">
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 3 </h1>
  </div>
  <div class="rc-column rc-double-width">
    <h1 class="rc-espilon"> 2 / 3 </h1>
  </div>
</div>

Copied!

Reverse order on mobile

1 / 3

2 / 3

<div class="rc-layout-container rc-reverse-layout-mobile rc-three-column">
  <div class="rc-column">
    <h1 class="rc-espilon"> 1 / 3 </h1>
  </div>
  <div class="rc-column rc-double-width">
    <h1 class="rc-espilon"> 2 / 3 </h1>
  </div>
</div>

Copied!

Layout Alignment Utilities

There are some utility classes to help align content within the container.

  • rc-content-h-top - Align content horizontally to the top of the container
  • rc-content-h-bottom - Align content horizontally to the bottom of the container
  • rc-content-h-middle - Align content horizontally to the middle of the container

You can also use modified version of each class by adding --desktop or --mobile, for desktop or mobile only functionality.

Align to bottom

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

<div class="rc-layout-container rc-three-column rc-content-h-bottom">
  <div class="rc-column">
    <p class=""> Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
  </div>
  <div class="rc-column">
    <p class="">
      Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
      <br />
      Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
      <br />
      Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      <br />
      Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.
    </p>
  </div>
  <div class="rc-column">
    <p class=""> Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
  </div>
</div>

Copied!

Align to top

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo

Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo

<div class="rc-layout-container rc-three-column rc-content-h-top">
  <div class="rc-column">
    <p class=""> Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo </p>
  </div>
  <div class="rc-column">
    <p class="">
      Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
      <br />
      Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
      <br />
      Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      <br />
      Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur
    </p>
  </div>
  <div class="rc-column">
    <p class=""> Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo </p>
  </div>
</div>

Copied!

Align to middle

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

<div class="rc-layout-container rc-three-column rc-content-h-middle">
  <div class="rc-column">
    <p class=""> Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
  </div>
  <div class="rc-column">
    <p class="">
      Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
      <br />
      Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
      <br />
      Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      <br />
      Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.
    </p>
  </div>
  <div class="rc-column">
    <p class=""> Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
  </div>
</div>

Copied!

Self align each column

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.

Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.

<div class="rc-layout-container rc-three-column">
  <div class="rc-column rc-self-h-bottom">
    <p class=""> Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
  </div>
  <div class="rc-column rc-self-h-top">
    <p class="">
      Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.
      <br />
      Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo.
      <br />
      Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      <br />
      Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.
    </p>
  </div>
  <div class="rc-column rc-self-h-middle">
    <p class=""> Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
  </div>
</div>

Copied!

Alignment Utilities

There are some utility classes to help align content within a container, for example aligning list items.

  • rc-content-v-left - Align content to the left of the container
  • rc-content-v-middle - Align content to the middle of the container
  • rc-content-v-right - Align content to the right of the container

Align content left

Aligned column content

<div class="rc-padding--sm rc-content-v-left">
  <h4 class="rc-delta">Aligned column content</h4>
</div>

Copied!

Align content center

Aligned column content

<div class="rc-padding--sm rc-content-v-middle">
  <h4 class="rc-delta">Aligned column content</h4>
</div>

Copied!

Align content right

Aligned column content

<div class="rc-padding--sm rc-content-v-right">
  <h4 class="rc-delta">Aligned column content</h4>
</div>

Copied!