Royal Canin Logo

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.

<button class="rc-btn rc-btn--one" data-modal-trigger="modal-example">Open standard modal</button>
<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-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">
      <div class="rc-margin-top--md">
        <h2 class="rc-gamma">Standard modal</h2>
        <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.
          <br />
        </p>
      </div>
      <button class="rc-btn rc-btn--one">Click here</button>
    </section>
  </div>
</aside>

Copied!

<button class="rc-btn rc-btn--one" data-modal-trigger="full-modal-example">Open full screen modal</button>
<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-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">
      <div class="rc-margin-top--md">
        <h2 class="rc-gamma">Full screen modal</h2>
        <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.
          <br />
        </p>
      </div>
      <button class="rc-btn rc-btn--one">Click here</button>
    </section>
    <footer class="rc-modal__footer rc-align-children--space-between">
      <button class="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!