Royal Canin Logo

Working together for the ultimate brand experience

Royal Canin Design Language

Alerts

Alerts can be used to showcase success, warning and additional information on pages such as tips or ‘did you know’ information.

Default

Alerts by default appear in page but can also appear and disappear on a page with a specific timeout function.

<aside class="rc-alert" role="alert">
  <span>
    <strong class="rc-font--bold">TIP: </strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
</aside>

Copied!

Flat

Alerts can sit within a page. To make sure other element such as dropdowns sit on top, the alert gets a z-index of 0 using the alert--flat class.

<aside class="rc-alert rc-alert--flat" role="alert">
  <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>
</aside>

Copied!

Full Width

<aside class="rc-alert rc-alert--full rc-text--center" role="alert">
  <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>
</aside>

Copied!

Close Button

Alerts can appear with or without a close icon, giving the user the ability to close an alert once they have read it.

<aside class="rc-alert rc-alert--with-close" role="alert">
  <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <button class="rc-btn rc-alert__close rc-icon rc-close--xs rc-iconography" aria-label="Close">
      <span class="rc-screen-reader-text">Close</span>
    </button>
  </span>
</aside>

Copied!

Alert with inline link button

<aside class="rc-alert rc-alert--with-close" role="alert">
  <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <a class="rc-styled-link" href="#">See more</a>
    <button class="rc-btn rc-alert__close rc-icon rc-close--xs rc-iconography" data-close="" aria-label="Close">
      <span class="rc-screen-reader-text">Close</span>
    </button>
  </span>
</aside>

Copied!

Success

Success messages use the brand colour Success for body copy and border, the icon Success and opacity of 15% on the background of the alert to highlight its message and differences to a normal alert state.

<aside class="rc-alert rc-alert--success rc-alert--with-close" role="alert">
  <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
  <button class="rc-alert__close rc-icon rc-close-success--xs" data-close="" aria-label=">Close">
    <span class="rc-screen-reader-text">Close</span>
  </button>
</aside>

Copied!

Warning

Warning messages use the brand colour Error for body copy and border, the icon Warning and opacity of 15% on the background of the alert to highlight its message and differences to a normal or successful alert state.

<aside class="rc-alert rc-alert--warning rc-alert--with-close" role="alert">
  <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
  <button class="rc-alert__close rc-icon rc-close-warning--xs" data-close="" aria-label=">Close">
    <span class="rc-screen-reader-text">Close</span>
  </button>
</aside>

Copied!

Error

<aside class="rc-alert rc-alert--error rc-alert--with-close" role="alert">
  <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
  <button class="rc-alert__close rc-icon rc-close-error--xs" data-close="" aria-label=">Close">
    <span class="rc-screen-reader-text">Close</span>
  </button>
</aside>

Copied!