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

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">you're reading this text in a modal!</div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark cgds">Close</button>
      <button type="button" class="btn btn-primary cgds">Save Changes</button>
    </div>
  </div>
</div>

        

 
<button type="button" class="btn btn-primary cgds" 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 cgds" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary cgds">Save changes</button>
      </div>
    </div>
  </div>
</div>

Size 

 
<button
  type="button"
  class="btn btn-primary btn-sm cgds"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalSmall"
>
  Launch small modal
</button>
<button
  type="button"
  class="btn btn-primary cgds"
  data-bs-toggle="modal"
  data-bs-target="#exampleModalMedium"
>
  Launch large modal
</button>
<button
  type="button"
  class="btn btn-primary btn-lg cgds"
  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 cgds"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary cgds">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 cgds"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary cgds">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 cgds"
          data-bs-dismiss="modal"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary cgds">Save changes</button>
      </div>
    </div>
  </div>
</div>

Scrollable 

 
<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 cgds" 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 cgds" 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 cgds" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary cgds">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 an 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 signs 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 notify the user, use something less intrusive such as the notification component instead.

Usability guidelines

User triggered
Modals should always appear as a result of an action that a user has taken like when submitting an 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: 0.5rem !default;
$modal-dialog-margin: 0.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, 0.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: 0.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 0.3s ease-out !default;
$modal-scale-transform: scale(1.02) !default;
Home
Previous version 1.0.3