Modals

Modals

Modals shift the user's attention by interrupting the current process. They use a 90% black backdrop to prevent interaction with the background.

1. Dialogue Box

Short content like alerts or confirmations displayed in a centered tile.

Confirm Action

Are you sure you want to permanently delete this resource?

2. Scrollable Modal

For long content. Fills the viewport height while keeping the header/footer fixed.

Long Content Modal

Scrollable content area...

Content continues for a long time...

Full-screen Modal (Implementation)

On mobile (Breakpoint S) or specific high-focus tasks, modals can cover the entire viewport. 

<!-- Used for high-focus or mobile viewports -->
<div class="modal-overlay">
  <div class="modal modal--full-screen">
    <div class="modal__header">...</div>
    <div class="modal__body">...</div>
  </div>
</div>