Modal

The modal component inform users about a specific task and may contain critical information which users then have to make a decision. E.g Accepting the T&Cs during signup

General

Example

Woohoo, you're reading this text in a modal!

 
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h3 class="modal-title" id="exampleModalLabel">
        <i class="bi bi-exclamation-circle left me-3"></i>Modal title
      </h3>
      <button type="button" class="btn-close" aria-label="Close"></button>
    </div>
    <div class="modal-body">Woohoo, you're reading this text in a modal!</div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark sgds">Close</button>
      <button type="button" class="btn btn-primary sgds">Save Changes</button>
    </div>
  </div>
</div>

                

 
<!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary sgds"
  data-bs-toggle="modal"
  data-bs-target="#exampleModal"
>
  Launch default modal
</button>

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">
          <i class="bi bi-exclamation-circle left me-2"></i>Modal title
        </h3>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">This is a modal</div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-outline-dark sgds"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary sgds">Save changes</button>
      </div>
    </div>
  </div>
</div>

Size 

 
<!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary sgds"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalSmall"
>
  Launch small modal
</button>
<button
  type="button"
  class="btn btn-primary sgds"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalMedium"
>
  Launch large modal
</button>
<button
  type="button"
  class="btn btn-primary sgds"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalLarge"
>
  Launch Extra large modal
</button>

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModalSmall"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">
          <i class="bi bi-exclamation-circle left me-2"></i>Modal title
        </h3>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">This is a modal</div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-outline-dark sgds"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary sgds">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div
  class="modal fade"
  id="exampleModalMedium"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">
          <i class="bi bi-exclamation-circle left me-2"></i>Modal title
        </h3>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">This is a modal</div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-outline-dark sgds"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary sgds">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div
  class="modal fade"
  id="exampleModalLarge"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">
          <i class="bi bi-exclamation-circle left me-2"></i>Modal title
        </h3>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">This is a modal</div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-outline-dark sgds"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary sgds">Save changes</button>
      </div>
    </div>
  </div>
</div>

Scrollable 

 
<!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalScrollable"
>
  Launch scrollable modal
</button>

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModalScrollable"
  tabindex="-1"
  aria-labelledby="exampleModalScrollableTitle"
  aria-modal="true"
>
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalScrollableTitle">
          <i class="bi bi-exclamation-circle left me-2"></i>Modal title
        </h3>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <p>
          TLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id
          egestas libero. Proin sed erat sed lectus efficitur rutrum condimentum
          ac orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
          ut vehicula diam. Cras placerat placerat aliquam. Cras semper risus
          sed libero feugiat, at luctus ipsum pellentesque. Vivamus posuere leo
          dolor, vel ornare justo convallis quis. Quisque volutpat aliquet
          maximus. Nulla nibh nibh, malesuada non cursus eu, mollis a tellus.
          Etiam ante purus, tincidunt sed quam porta, semper tincidunt diam. In
          hac habitasse platea dictumst. Proin auctor feugiat mollis. Quisque
          sit amet sem elementum, pulvinar quam sit amet, tristique metus.
          Suspendisse potenti. Aliquam blandit et diam vitae pulvinar. Sed
          vestibulum eget sapien sit amet vestibulum. Lorem ipsum dolor sit
          amet, consectetur adipiscing elit. Vivamus semper porta enim, sed
          viverra eros auctor ac. Nulla consequat maximus lorem, condimentum
          consequat mi. Maecenas malesuada volutpat consequat. Praesent tempor
          in risus ut commodo. Proin ut velit blandit, tincidunt velit id,
          finibus urna. Vestibulum a ligula tortor. Etiam id felis odio. Nunc
          interdum placerat ante ut fermentum. Morbi vitae nisi a tellus
          hendrerit imperdiet vel in elit. Nam eget enim ultricies urna
          tristique vehicula. Pellentesque tempor nunc eu diam elementum, eget
          egestas odio viverra. Integer in sapien urna. Cras rhoncus, neque eget
          auctor ultricies, tortor tortor pharetra purus, vitae ullamcorper
          tellus sem a justo. Ut egestas, felis quis vestibulum elementum, velit
          purus varius massa, ac dignissim nibh libero at massa. Donec non
          maximus est, a facilisis nulla. Phasellus a tortor dignissim, auctor
          lorem eget, tristique urna. Aenean efficitur nunc sed sodales
          scelerisque. Praesent maximus pharetra nisi, dignissim elementum
          ligula volutpat ut. Vivamus sagittis tincidunt augue, vitae sagittis
          ligula dictum eu. Vestibulum aliquam augue arcu, eget bibendum urna
          posuere sed. Fusce vulputate velit sit amet enim tempor aliquam sed eu
          ante. Nam sit amet dui ipsum. Etiam ac arcu lectus. Praesent pretium
          neque erat, at placerat augue cursus id. Integer cursus erat sit amet
          lectus tristique vehicula. Ut id justo quis leo malesuada porta non
          vel ante. Maecenas eget nisl tellus. Vivamus porttitor in nisl
          vulputate blandit. Suspendisse id imperdiet neque. Integer et
          convallis eros. Mauris tellus ligula, placerat efficitur porttitor ut,
          sagittis at enim. Sed pulvinar ipsum purus. Nullam eleifend
          scelerisque mauris, vitae consequat enim eleifend non. Aliquam
          suscipit egestas tellus nec aliquet. Morbi a bibendum lorem. Vivamus
          magna sapien, viverra quis maximus sed, finibus vitae est. Donec
          mollis pretium arcu, at sodales nisi pretium vel. Quisque a imperdiet
          enim. Suspendisse feugiat sagittis quam, vitae feugiat lorem aliquam
          sit amet. Duis convallis consequat elit sed bibendum. Sed aliquam
          vehicula dolor vitae gravida. Nulla ut diam in nibh pharetra commodo
          at in purus.
        </p>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-outline-dark sgds"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Fullscreen 

 
<!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary sgds"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalFullscreen"
>
  Full screen
</button>

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModalFullscreen"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">
          <i class="bi bi-exclamation-circle left me-2"></i>Modal title
        </h3>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">This is a modal</div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-outline-dark sgds"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary sgds">Save changes</button>
      </div>
    </div>
  </div>
</div>

Anatomy

Modal Anatomy
  1. Icon (situational): Serves to give more context to what the modal is about.
  2. Title: Serves to tell users what the modal is about.
  3. Close icon (situational): Allows users to close the modal manually without the use of CTA buttons.
  4. Content: Serves to explain what the model is about. For e.g error messaging or confirmation messaging.
  5. CTA buttons: Serves to let users take a action or cancel.

Spacing

Modal Spacing

Within the modal
Ensure that there is at least 24px of spacing within the modal and between content elements.

Usage guidelines

Modals should be used:

  • When you want to interrupt a user’s current task to direct the user’s attention to something important. For example, confirming when a user wants to submit a form, user sign up and login, or highlighting an important event with an infographic upon entering your website.
  • When you want to highlight something.

Modals should not be used:

  • When you need to present simple notifications to the user. It should always accompany something actionable by the user such as confirming or filling in a form. If you need to notifiy the user, use something less intrusive such as the notification component instead.

Usability guidelines

User triggered
Modals should always appear as a result of a action that a user has taken like when submitting a application. Modals should not be automatically displayed to the user. Some exceptions to the rule would be if you need to inform users that their session is about to time out or if they have to accept cookies before proceeding.

Clear heading labels and CTAs
Ensure that the heading and CTAs are clear to the user. This avoids confusion and indicates what action needs to be taken.

Try to avoid long content with scrolling
Long content with scrolling limits a user's ability to view the entire message due to the limited space.

Modal design tokens 

$modal-inner-padding:$spacer !default;
$modal-footer-margin-between:.5rem !default; $modal-dialog-margin:.5rem
!default; $modal-dialog-margin-y-sm-up:1.75rem !default;
$modal-title-line-height:$line-height-base !default; $modal-content-color:null
!default; $modal-content-bg:$white !default;
$modal-content-border-color:rgba($black, .2) !default;
$modal-content-border-width:$border-width !default;
$modal-content-border-radius:$border-radius-lg !default;
$modal-content-inner-border-radius:subtract($modal-content-border-radius,
$modal-content-border-width) !default;
$modal-content-box-shadow-xs:$box-shadow-sm !default;
$modal-content-box-shadow-sm-up:$box-shadow !default; $modal-backdrop-bg: $black
!default; $modal-backdrop-opacity: .5 !default; $modal-header-border-color:
$border-color !default; $modal-footer-border-color: $modal-header-border-color
!default; $modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !default;
$modal-header-padding-y: $modal-inner-padding !default; $modal-header-padding-x:
$modal-inner-padding !default; $modal-header-padding: $modal-header-padding-y
$modal-header-padding-x !default; // Keep this for backwards compatibility
$modal-sm: 300px !default; $modal-md: 500px !default; $modal-lg: 800px !default;
$modal-xl: 1140px !default; $modal-fade-transform: translate(0, -50px) !default;
$modal-show-transform: none !default; $modal-transition: transform .3s ease-out
!default; $modal-scale-transform: scale(1.02) !default;
Home
Previous version 2.1.1