Working together for the ultimate brand experience

Royal Canin Design Language

Tags

Filter tags provide a simple way to visualise where single or multiple selections have been made from a list of options. These are predominantly used in combination with filter menus and should be used only where necessary.

Dogs Tailored nutrition Cats Our values
<span class="rc-tag" data-js-tag="">
  Dogs
  <button class="rc-tag__close rc-btn rc-btn--icon rc-icon rc-close--xs rc-iconography rc-interactive" aria-label="Close">
    <span class="rc-screen-reader-text">Close Dogs</span>
  </button>
</span>
<span class="rc-tag" data-js-tag="">
  Tailored nutrition
  <button class="rc-tag__close rc-btn rc-btn--icon rc-icon rc-close--xs rc-iconography rc-interactive" aria-label="Close">
    <span class="rc-screen-reader-text">Close Tailored nutrition</span>
  </button>
</span>
<span class="rc-tag" data-js-tag="">
  Cats
  <button class="rc-tag__close rc-btn rc-btn--icon rc-icon rc-close--xs rc-iconography rc-interactive" aria-label="Close">
    <span class="rc-screen-reader-text">Close Cats</span>
  </button>
</span>
<span class="rc-tag" data-js-tag="">
  Our values
  <button class="rc-tag__close rc-btn rc-btn--icon rc-icon rc-close--xs rc-iconography rc-interactive" aria-label="Close">
    <span class="rc-screen-reader-text">Close Our values</span>
  </button>
</span>

Copied!