Modals

When creating modals, be mindful of section heading semantics. Since modals sit outside of page, they should not use a <h1> but instead start with a <h2>. For an example of an accessible modal, please refer to WAI-ARIA Authoring Practices.

Different types of modal designs to be used in different scenarios.

Default, large, and small modal sizes, which can be applied to any type of modal.

An example of a modal that disappears after 5 seconds after being launched. Make sure there is enough time for a user to read the message.

This modal example has a checkbox that when checked, sets a cookie to not show the modal again for one day.