Modal

Modals appear in front of all other elements in the page, and can be used to display a notification or alert to the user. They are dynamic and must be dismissed by the user through the cancel or close button. Modals can also be used to prompt user action.

Class .wb-modal, wb-modal--header, wb-modal--body, wb-modal--footer

Modals should follow a header, body, footer format. The layout and spacing for the modal can be applied using the whiteboard class. Aside from the layout and spacing that can be applied through these whiteboard modal classes, there are other guidelines that modals in our app should follow to ensure a consistent experience.

Header

The header text for our modal should be teal. The class .wb-heading--colored should be applied on the text element in the modal header.

Call to Actions

In HTML, the primary action button should be listed before the secondary button as shown in the example below. However, visually, the primary button will be on the right and secondary action button will be on the left of the footer. Flex styles applied in whiteboard reinforces this visual order. Having the primary action button element first in the markdown enhances accessibility because the user will tab into the primary action before the secondary action.

The upper right corner should have a close button to dismiss the modal.

More info

For more detailed designs and guidelines on how to apply the modal design, see this pdf.

Modal Title

This is the modal body text. You might add some user notification message or something that demands action from the user. It should be pretty significant information since it disrupts whatever the user was doing on the page... 

<div class="wb-modal">
 <button class="wb-modal--close-button" aria-label="close">
   <i class="fa fa-close"></i>
 </button>
 <div class="wb-modal--header">
   <h3 class="wb-heading-3 wb-heading--colored">Modal Title</h3>
 </div>
 <div class="wb-modal--body">
   <p>
    This is the modal body text. You might add some user notification message
    or something that demands action from the user. It should be pretty
    significant information since it disrupts whatever the user was doing on the
    page...
   </p>
 </div>
 <div class="wb-modal--footer">
   <button class="wb-button wb-button--primary">Delete</button>
   <button class="wb-button">Cancel</button>
 </div>
</div>

Modifier .wb-modal--large

Use .wb-modal--large if you need a large modal. It has a max width of 1020px, instead of the default max width of 750px.

Modal Title

I am a very large modal 

<div class="wb-modal wb-modal--large">
 <button class="wb-modal--close-button" aria-label="close">
   <i class="fa fa-close"></i>
 </button>
 <div class="wb-modal--header">
   <h3 class="wb-heading-3 wb-heading--colored">Modal Title</h3>
 </div>
 <div class="wb-modal--body">
   <p>
    I am a very large modal
   </p>
 </div>
 <div class="wb-modal--footer">
   <button class="wb-button wb-button--primary">Nice</button>
   <button class="wb-button">Cancel</button>
 </div>
</div>

Class .wb-modal-scroll, .wb-modal-scroll__content, .wb-modal-divider

Use .wb-modal-scroll and .wb-modal-scroll__content to create a scrollable section within the modal. By default, .wb-modal-scroll sets of a maximum height of 500px. To override it, just set a new max height via inline styles or add a new class with the new max height definiton.

You can use the .wb-modal-divider to create divider lines that span the width of the modal. Typically we would want the divider line at the bottom of the scrollable content, so people know there is more content beneath the line. Depending on the content, you can also add a divider at the top of the scrollable area.

Dentention List

Griffindor students

  • Harry Potter
  • Hermione Granger
  • Ronald Weasley
  • George Weasley
  • Fred Weasley
  • Neville Longbottom
  • Dean Thomas
  • Seamus Finnigan
  • Lavender Brown
  • Parvati Patil
<div class="wb-modal">
  <button class="wb-modal--close-button" aria-label="close">
    <i class="fa fa-close"></i>
  </button>
  <div class="wb-modal--header">
    <h3 class="wb-heading-3 wb-heading--colored">Dentention List</h3>
  </div>
  <div class="wb-modal--body">
    <p class="wb-text">Griffindor students</p>
    <div class="wb-modal-scroll" style="max-height: 190px">
      <div class="wb-modal-scroll__content">
        <ul class="wb-list">
          <li>Harry Potter</li>
          <li>Hermione Granger</li>
          <li>Ronald Weasley</li>
          <li>George Weasley</li>
          <li>Fred Weasley</li>
          <li>Neville Longbottom</li>
          <li>Dean Thomas</li>
          <li>Seamus Finnigan</li>
          <li>Lavender Brown</li>
          <li>Parvati Patil</li>
        </ul>
      </div>
    </div>
    <div class="wb-modal-divider"></div>
  </div>
  <div class="wb-modal--footer">
    <button class="wb-button wb-button--primary">Delete</button>
    <button class="wb-button">Cancel</button>
  </div>
</div>