Royal Canin Logo

Working together for the ultimate brand experience

Royal Canin Design Language

Content Block

This content block includes an icon list, which allows the user to add an icon in place of a bulleted list. With an image or other media to the side it can be used for summary points or to build interest on a standard bullet list.

Usage

We recommend the bullets are taken from the existing Design Language collection, used in 24px (small) sizes. We do not recommend repeating an icon within the same list, the icons used should be specific and relevant to the text. This should be used with either a medium or a large content container. Using extra large will cause the line length on the bullets to be too long.

Usage

Incredible in every detail

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempor pulvinar sem, sit amet ultricies odio dignissim in. Etiam et lorem a ante hendrerit tincidunt quis sed est. Vivamus et risus feugiat eros iaculis hendrerit.

  • List item Test
  • List item Test 2
<div class="rc-layout-container rc-max-width--xl rc-two-column rc-stacked--xl rc-padding--sm rc-padding--md--mobile">
  <div class="rc-column rc-margin-right--md--desktop">
    <h1 class="rc-text-colour--brand1">Incredible in every detail</h1>
    <p class="rc-margin-bottom--sm--mobile">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempor pulvinar sem, sit amet ultricies odio dignissim in. Etiam et lorem a ante hendrerit tincidunt quis sed est. Vivamus et risus feugiat eros iaculis hendrerit.</p>
    <ul class="rc-margin-bottom--lg--mobile rc-list rc-list--blank rc-margin-top--xs rc-margin-bottom--sm">
      <li class="rc-list__item rc-icon rc-user--xs rc-iconography--xs"> List item Test</li>
      <li class="rc-list__item rc-icon rc-settings--xs rc-iconography--xs"> List item Test 2</li>
      <li class="rc-list__item rc-icon rc-email--xs rc-iconography--xs"> List item Test 3</li>
    </ul>
    <button class="rc-margin-bottom--xl--mobile rc-margin-bottom--md rc-btn rc-btn--two">Button Label</button>
  </div>
  <div class="rc-column">
    <div class="rc-video-wrapper">
      <iframe title="Making a better world for pets" src="https://www.youtube.com/embed/FYwO1fiYoa8?rel=0&amp;controls=0&amp;showinfo=0?ecver=1" allowfullscreen="" frameborder="0"></iframe>
    </div>
  </div>
</div>

Copied!

Usage

Incredible in every detail

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempor pulvinar sem, sit amet ultricies odio dignissim in. Etiam et lorem a ante hendrerit tincidunt quis sed est. Vivamus et risus feugiat eros iaculis hendrerit.

  • List item Test
  • List item Test 2
Kitten and puppy playing with ball
<div class="rc-layout-container rc-max-width--xl rc-two-column rc-stacked--xl rc-padding--sm rc-padding--md--mobile">
  <div class="rc-column rc-margin-right--md--desktop">
    <h1 class="rc-text-colour--brand1">Incredible in every detail</h1>
    <p class="rc-margin-bottom--sm--mobile">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempor pulvinar sem, sit amet ultricies odio dignissim in. Etiam et lorem a ante hendrerit tincidunt quis sed est. Vivamus et risus feugiat eros iaculis hendrerit.</p>
    <ul class="rc-margin-bottom--lg--mobile rc-list rc-list--blank rc-margin-top--xs rc-margin-bottom--sm">
      <li class="rc-list__item rc-icon rc-user--xs rc-iconography--xs"> List item Test</li>
      <li class="rc-list__item rc-icon rc-settings--xs rc-iconography--xs"> List item Test 2</li>
      <li class="rc-list__item rc-icon rc-email--xs rc-iconography--xs"> List item Test 3</li>
    </ul>
    <button class="rc-margin-bottom--xl--mobile rc-margin-bottom--md rc-btn rc-btn--two">Button Label</button>
  </div>
  <div class="rc-column">
    <img src="https://placehold.it/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
  </div>
</div>

Copied!