Working together for the ultimate brand experience

Royal Canin Design Language

Modals

Modals are used to overlay a website or app with additional information such as navigation, alert messages, newsletter signups and forms. There are multiple types of Modals that can be used in Design Language with various uses for each.

<aside role="modal" class="rc-modal rc-hidden" data-modal-target="modal-example">
  <div class="rc-modal__container">
    <header class="rc-modal__header">
      <button class="rc-btn rc-btn--icon-label rc-icon rc-advice--xs rc-iconography rc-icon rc-btn--icon-label rc-modal__close rc-close--xs rc-iconography" data-modal-trigger="modal-example">Close</button>
    </header>
    <section class="rc-modal__content rc-scroll--y">
      <h1 class="rc-gamma rc-modal__title">Standard modal</h1>
      <p>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.</p>
    </section>
  </div>
</aside>

Copied!

<aside role="modal" class="rc-modal rc-hidden rc-modal--full" data-modal-target="full-modal-example">
  <div class="rc-modal__container">
    <header class="rc-modal__header">
      <button class="rc-btn rc-btn--icon-label rc-icon rc-advice--xs rc-iconography rc-icon rc-btn--icon-label rc-modal__close rc-close--xs rc-iconography" data-modal-trigger="full-modal-example">Close</button>
    </header>
    <section class="rc-modal__content rc-scroll--y">
      <h1 class="rc-gamma rc-modal__title">Full screen modal</h1>
      <p>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.</p>
    </section>
    <footer class="rc-modal__footer rc-align-children--space-between">
      <button class="rc-btn rc-btn--icon-label rc-icon rc-advice--xs rc-iconography rc-btn rc-btn--icon-label rc-flag rc-gb--xs">United Kingdom</button>
      <div>
        <a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-facebook--xs" aria-label="facebook" href="#">
          <span class="rc-screen-reader-text">facebook</span>
        </a>
        <a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-twitter--xs" aria-label="twitter" href="#">
          <span class="rc-screen-reader-text">twitter</span>
        </a>
        <a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-youtube--xs" aria-label="youtube" href="#">
          <span class="rc-screen-reader-text">youtube</span>
        </a>
        <a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-instagram--xs" aria-label="instagram" href="#">
          <span class="rc-screen-reader-text">instagram</span>
        </a>
        <a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-pinterest--xs" aria-label="pinterest" href="#">
          <span class="rc-screen-reader-text">pinterest</span>
        </a>
      </div>
    </footer>
  </div>
</aside>

Copied!