Modal

Modals are windows used for displaying prompts and subtasks without losing context of the parent application.

Examples

Modals are composed of several parts. To render a modal, include a modal backdrop, modal header, modal body, and modal footer (optional).

Base

Modal Title

Modal content

<div class="a-backdrop">
  <div class="a-modal">
    <div class="a-modal__header">
      <h3 class="a-modal__title">Modal Title</h3>
      <button class="a-btn -icon -close">
        <div class="a-btn__content">
          <i class="a-icon icon-x"></i>
        </div>
      </button>
    </div>
    <div class="a-modal__content">
      <p class="-text -m--0">Modal content</p>
    </div>
    <div class="a-modal__footer">
      <button class="a-btn">Cancel</button>
      <button class="a-btn -primary -ml--2">Save</button>
    </div>
  </div>
</div>

With Subtitle

Modal Title

Modal subtitle

Modal content

<div class="a-backdrop">
  <div class="a-modal">
    <div class="a-modal__header">
      <h3 class="a-modal__title">Modal Title</h3>
      <p class="a-modal__subtitle">Modal subtitle</h3>
      <button class="a-btn -icon -close">
        <div class="a-btn__content">
          <i class="a-icon icon-x"></i>
        </div>
      </button>
    </div>
    <div class="a-modal__content">
      <p class="-text -m--0">Modal content</p>
    </div>
    <div class="a-modal__footer">
      <button class="a-btn">Cancel</button>
      <button class="a-btn -primary -ml--2">Save</button>
    </div>
  </div>
</div>

Inverse Backdrop

Invert a modals backdrop by applying the class -inverse.

Modal Title

Modal content

<div class="a-backdrop -inverse">
  <div class="a-modal">
    <div class="a-modal__header">
      <h3 class="a-modal__title">Modal Title</h3>
      <button class="a-btn -icon -close">
        <div class="a-btn__content">
          <i class="a-icon icon-x"></i>
        </div>
      </button>
    </div>
    <div class="a-modal__content">
      <p class="-text -m--0">Modal content</p>
    </div>
    <div class="a-modal__footer">
      <button class="a-btn">Cancel</button>
      <button class="a-btn -primary -ml--2">Save</button>
    </div>
  </div>
</div>

Borderless

Disable header or footer borders by applying the class -noBorder to a-modal__header or a-modal__footer.

Modal Title

Modal content

<div class="a-backdrop">
  <div class="a-modal">
    <div class="a-modal__header -noBorder">
      <h3 class="a-modal__title">Modal Title</h3>
      <button class="a-btn -icon -close">
        <div class="a-btn__content">
          <i class="a-icon icon-x"></i>
        </div>
      </button>
    </div>
    <div class="a-modal__content">
      <p class="-text -m--0">Modal content</p>
    </div>
    <div class="a-modal__footer -noBorder">
      <button class="a-btn">Cancel</button>
      <button class="a-btn -primary -ml--2">Save</button>
    </div>
  </div>
</div>

Multi-step

For multi-step modals, ensure the class -centered is applied to a-modal__title. This will provide sufficient real estate on the left side to store a back button a-modal__back.

Modal Title

Modal content

<div class="a-backdrop">
  <div class="a-modal">
    <div class="a-modal__header">
      <h3 class="a-modal__title -centered">Modal Title</h3>
      <button class="a-modal__back"></button>
      <button class="a-btn -icon -close">
        <div class="a-btn__content">
          <i class="a-icon icon-x"></i>
        </div>
      </button>
    </div>
    <div class="a-modal__content">
      <p class="-text -m--0">Modal content</p>
    </div>
    <div class="a-modal__footer">
      <button class="a-btn -primary -ml--2">Next</button>
    </div>
  </div>
</div>

Simple

Remove a-modal__header and a-modal__footer for a simple and customizable modal.

Modal Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mollis nulla, eget ornare tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet rutrum eros laoreet.

<div class="a-backdrop">
  <div class="a-modal">
    <button class="a-btn -icon -close">
      <div class="a-btn__content">
        <i class="a-icon icon-x"></i>
      </div>
    </button>
    <div class="a-modal__content -text--center -p--6">
      <h3 class="-text--bolder -m--0">Modal Title</h3>
      <p class="-text -py--1 -px--3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mollis nulla, eget ornare tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet rutrum eros laoreet.</p>
      <button class="a-btn -primary -lg -mt--1">Action</button>
    </div>
  </div>
</div>