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
Example
Default 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>
Default modal demo
<!-- 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
- Icon (situational): Serves to give more context to what the modal is about.
- Title: Serves to tell users what the modal is about.
- Close icon (situational): Allows users to close the modal manually without the use of CTA buttons.
- Content: Serves to explain what the model is about. For e.g error messaging or confirmation messaging.
- CTA buttons: Serves to let users take a action or cancel.
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;