Skip to main content

Modal

Modal is a component that displays content as a pop up.

This is typically useful for bringing immediate attention to first-time visitors of the site, such as relaying major site updates, assisting users with signing up or subscribing to email lists, or even for general feedback. 

Authoring

The Modal component is separated into authoring the pop up content and enabling the pop up on a page.

Building the pop up content

  • Create a page using the Empty Template.
  • Use different components to author and format the modal content you want.

Enabling the modal on any home page

  • Go to the home page properties page. 
  • Select the enable modal option under the modal tab.
  • Give the modal a title.
  • Link to the modal content page you created.
  • Enter an aria label for the dismiss modal button.

Enabling the modal on other pages

  • Add the Modal component onto the page.
  • Enter the button text.
  • Choose to display the button with the button style or text CTA style.
  • Give the modal a title.
  • Select an icon for the modal button as needed.
  • Link to the modal content page.
  • Configure the button aria label and close modal button aria label.

Examples