Example

Show modal

Trigger

<!-- Modal trigger (button, link, etc...) -->
<!-- an attribute "data-modal" must be specified -->
<!-- the "data-modal" value is the ID of the modal content to show when clicked -->
<button class="ui-btn" data-modal="modal-content-1">...</button>

Modal

<!-- Modal -->
<!-- the modal is hidden by default, visibility is toggled using JS -->
<!-- the ID must match the ID specified in the "data-modal" attribute -->
<div class="ui-modal" id="dialog-content-1">

  <!-- overlay is a button (for accessibility) -->
  <button class="ui-modal__overlay" tabindex="-1"></button>

  <div class="ui-modal__body">

    <!-- we need an extra element for the sticky header -->
    <!-- the content (text) must be the same as the main title "modal__title" -->
    <div class="ui-modal__sticky">...</div>

    <!-- close button - note that the text will be hidden (css) but remains for accessibility -->
    <button class="ui-modal__close">...</button>

    <!-- main container -->
    <div class="ui-modal__container">
      <div class="ui-modal__header">
        <!-- optional prefix (eyebrow) -->
        <div class="ui-modal__prefix">...</div>

        <!-- main title -->
        <!-- the title text must be duplicated in "ui-modal__sticky" -->
        <h1 class="ui-modal__title">...</h1>

        <!-- optional subline -->
        <p class="ui-modal__subline">...</p>
      </div>

      <div class="ui-modal__content">
        <!-- content goes here -->
        <!-- can be anything: text, form, buttons, etc... -->
        <!-- you can use generic styling classes to adjust layout, ex: grid, margin/padding utility classes, etc... -->
      </div>
    </div>

    <!-- footer -->
    <div class="ui-modal__footer">

      <!-- sticky footer -->
      <!-- we re-use the "ui-sticky-footer" component here -->
      <!-- add the modifier class "ui-sticky-footer--single-row" to prevent the footer to go on 2 rows on mobile -->
      <div class="ui-sticky-footer ui-sticky-footer--single-row">
        <div class="ui-sticky-footer__container">
          <div class="ui-sticky-footer__left">
            <a class="ui-link ui-link--left" href="#">...
              <i class="ui-icon ui-icon--arrow-left"></i>
            </a>
          </div>
          <div class="ui-sticky-footer__right">

            <!-- we re-use the "ui-link-group" component here -->
            <ul class="ui-link-group">

              <!-- don't forget the "--last" on the last link (excluding buttons)  -->
              <li class="ui-link-group__link ui-link-group__link--last"><a class="ui-link ui-link--underline">...</a></li>
              <li class="ui-link-group__btn"><button class="ui-btn">...</button></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>