Pattern Library Notes

See the main page for details. Navigation is available via the side menu. You can also toggle all the patterns:

Pattern Section: Modals

When we need to focus the user’s attention on a particular topic, we use a modal to take focus away from the rest of the interface.


A link with an href pointing to the ID of the modal element, and the class js-activate-modal applied so that we can attach a JS event handler to it.

Toggle pattern display width


The modal code itself, include at the end of the page content markup, outside of any containers—they are automatically hidden on load, with JS enabled, as is demonstrated here.

Toggle pattern display width

Modal overlay

An overlay, used to obscure the whole contents of the screen while the modal is loaded.

Toggle pattern display width

Modal and trigger

A demo of the Modal and Trigger patterns, showcasing how the modal actually loads.

Toggle pattern display width