Modals

Modal popups, with great power comes great responsibility. Please use modals wisely.

Basic Modal

Your basic modal has a variety of elements to it. .c-overlay will expand to fill the current space, more information on overlays is available.

The modal it self consists of a .c-modal__header, .c-modal__body and a .c-modal__footer.

<div class="c-overlay"></div>
<div class="c-modal">
  <header class="c-modal__header">
    <button type="button" class="c-button c-button--close">×</button>
    <h3 class="c-heading c-heading--small">Modal heading</h3>
  </header>

  <div class="c-modal__body">
    This is the modal body
  </div>

  <footer class="c-modal__footer">
    <button type="button" class="c-button c-button--primary">Close</button>
  </footer>
</div>

Ghost Modal

This modal has no body, hence "ghost". Lol.

To make a ghost modal simply add the .c-modal--ghost modifier.

<div class="c-overlay"></div>
<div class="c-modal c-modal--ghost">
  <header class="c-modal__header">
    <button type="button" class="c-button c-button--close">×</button>
    <h3 class="c-heading c-heading--small">Modal heading</h3>
  </header>

  <div class="c-modal__body">
    This is the modal body
  </div>

  <footer class="c-modal__footer">
    <button type="button" class="c-button c-button--primary">Close</button>
  </footer>
</div>

Block footer buttons

Apply the .c-modal__footer--block modifier to the footer to make your buttons full width.

<div class="c-overlay"></div>
<div class="c-modal">
  <header class="c-modal__header">
    <button type="button" class="c-button c-button--close">×</button>
    <h3 class="c-heading c-heading--small">Modal heading</h3>
  </header>

  <div class="c-modal__body">
    This is the modal body
  </div>

  <footer class="c-modal__footer c-modal__footer--block">
    <button type="button" class="c-button c-button--success">Save</button>
    <button type="button" class="c-button c-button--error">Cancel</button>
  </footer>
</div>

To give your modal some perspective add the .c-modal--high, .c-modal--higher or .c-modal--highest modifier. The effectiveness will depend on the colour of the background though.

<div class="c-overlay"></div>
<div class="c-modal c-modal--highest">
  <header class="c-modal__header">
    <button type="button" class="c-button c-button--close">×</button>
    <h3 class="c-heading c-heading--small">Modal heading</h3>
  </header>

  <div class="c-modal__body">
    This is the modal body
  </div>

  <footer class="c-modal__footer">
    <button type="button" class="c-button c-button--primary">Close</button>
  </footer>
</div>

Animation

.a-modal

Apply the .a-modal class to enable animation on the modal popup.

--slow, --fast

Every animation comes with slow and fast modifiers.

--top, --bottom, --left, --right

Add one of these modifiers to change the origin of the animation. Top will make the animations appear to start from the top of the modal and so on. Default is from the center of the element.