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 body it self consists of cards, providing you with a consistent way of building structured content. Please familiarise yourself with what is possible with cards to make full use of modals.

<div class="c-overlay"></div>
<div class="o-modal">
  <div class="c-card">
    <header class="c-card__header">
      <button type="button" class="c-button c-button--close">×</button>
      <h2 class="c-heading">Modal heading</h2>
    </header>
    <div class="c-card__body">
      This is the modal body
    </div>
    <footer class="c-card__footer">
      <button type="button" class="c-button c-button--brand">Close</button>
    </footer>
  </div>
</div>

Ghost Modal

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

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

<div class="c-overlay"></div>
<div class="o-modal o-modal--ghost">
  <div class="c-card">
    <header class="c-card__header">
      <button type="button" class="c-button c-button--close">×</button>
      <h2 class="c-heading">Modal heading</h2>
    </header>
    <div class="c-card__body">
      This is the modal body
    </div>
    <footer class="c-card__footer">
      <button type="button" class="c-button c-button--brand">Close</button>
    </footer>
  </div>
</div>

Scrollable content

To make a scrollable modal add the .o-panel class to the modal body, and apply a fixed height so long content starts to scroll.

<div class="c-overlay"></div>
<div class="o-modal">
  <div class="c-card">
    <header class="c-card__header">
      <button type="button" class="c-button c-button--close">×</button>
      <h2 class="c-heading">Modal heading</h2>
    </header>
    <div class="c-card__body o-panel" style="height: 300px;">
      This is long body content ....
    </div>
    <footer class="c-card__footer">
      <button type="button" class="c-button c-button--brand">Close</button>
    </footer>
  </div>
</div>

Full screen modal

To make a full screen modal simply add the .o-modal--full modifier.

<div class="c-overlay"></div>
<div class="o-modal o-modal--full">
  <div class="c-card">
    <header class="c-card__header">
      <button type="button" class="c-button c-button--close">×</button>
      <h2 class="c-heading">Modal heading</h2>
    </header>
    <div class="c-card__body">
      This is the modal body
    </div>
    <footer class="c-card__footer">
      <button type="button" class="c-button c-button--brand">Close</button>
    </footer>
  </div>
</div>

To give your modal some perspective add the .u-high, .u-higher or .u-highest modifiers. The effectiveness will depend on the color of the background though.

<div class="c-overlay"></div>
<div class="o-modal u-highest">
  <div class="c-card">
    <header class="c-card__header">
      <button type="button" class="c-button c-button--close">×</button>
      <h2 class="c-heading">Modal heading</h2>
    </header>
    <div class="c-card__body">
      This is the modal body
    </div>
    <footer class="c-card__footer">
      <button type="button" class="c-button c-button--brand">Close</button>
    </footer>
  </div>
</div>

Variations

Since modals simply display cards differently you can use all the variations cards give you as the different content types of modals.