Chi · Modal

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

<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

<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.

<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.

<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.

<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.

<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>