Modals

Image modals should be used when the main content of the modal is an image (with the link being a smaller version of that image), with button modals being otherwise preferred.

Button Modal:

×

Some text in the Modal..

Image Modal:

image modal link example
× image modal content example

Modal text content

Larger blocks of content, such as cards or images paired with captions, can have modals linked to the entire block by adding the 'modal-link' class to the outermost container wrapping the content.

To have part of a content block, such as a button or a link, not open the modal, add the 'modal-noLink' class to that element

image modal link example

This text links to the modal

× image modal content example

Modal text content

image modal link example

This text doesn't link to the modal

× image modal content example

Modal text content

To add a modal, copy the CSS and JS from the codepen below, as well as the section of HTML based on the type of modal you are using (button, image, or block) and replace the content of both the link and the modal.

Alternatively, after copying the CSS and JS, add the modal-link class to the tag that will be used to open the modal, immediately afterwards place the content of the modal in a div with the .modal-content class, inside of a div with the .modal class. Ensure there are no tags between the tag with the .modal-link class and the div with the .modal class, or the modal will not open!

Button and image modal links should follow the rules listed in the Spacing and Images guidelines respectively

See the Pen Modals by Tyson Foster (@Foster-Design-System) on CodePen.