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.

html
            <button data-modal-trigger="modal-example" class="rc-btn rc-btn--one rc-btn--sm">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-modal__close rc-btn rc-btn--icon-label rc-icon rc-close--xs rc-iconography" data-modal-trigger="modal-example">Close</button>
    </header>

    <section class="rc-modal__content">
      <h1 class="rc-gamma rc-modal__title">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>
        
html
            <button data-modal-trigger="full-modal-example" class="rc-btn rc-btn--one rc-btn--sm">Open fullscreen modal</button>

<aside role="modal" class="rc-modal rc-modal--full rc-hidden" data-modal-target="full-modal-example">
  <div class="rc-modal__container">
    <header class="rc-modal__header">
      <button class="rc-modal__close rc-btn rc-btn--icon-label rc-icon 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-flag rc-gb--xs" href="#/">United Kingdom</button>
      <div>
        <a class="rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-facebook--xs" href="#/" aria-label="Facebook"><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" href="#/" aria-label="Twitter"><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" href="#/" aria-label="Youtube"><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" href="#/" aria-label="Facebook"><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" href="#/" aria-label="Facebook"><span class="rc-screen-reader-text">Pinterest</span></a>
      </div>
    </footer>
  </div>
</aside>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo