Modals
How to add and style modals.
Last updated
Was this helpful?
How to add and style modals.
Last updated
Was this helpful?
A 'Modal' is used to show a dialog or a box when you click a button or a link. They serve as interactive elements that can enhance user experience by temporarily capturing user attention and focus.
Location in the Parts Library: Base Parts > Actions > Modal
Modal parts are useful for several reasons. They can:
Grab Attention: Modal parts pop up in front of the main content, ensuring that users notice important information or actions. This is especially useful for alerts, notifications, or messages that require immediate attention.
Improve Focus: By temporarily dimming or disabling the background content, modal parts help users concentrate on the task or information presented within the dialog box. This prevents distractions and improves user focus.
Add an Interactive Element: Modal parts often contain interactive elements such as forms, buttons, or multimedia content, allowing users to perform specific actions without leaving the current page. This can streamline workflows and enhance user engagement.
Provide Contextual Information: Modal parts can provide additional context or details related to a specific element or action on the webpage. For example, they can display product details when users click on a product image or provide confirmation messages after completing a form submission.
Increase User Guidance: Modal parts can guide users through multi-step processes or workflows by presenting one step at a time in a structured manner. This helps prevent information overload and improves usability, especially for complex tasks.
Choose the modal most closely aligned with what you need from the Parts Library.
Choose your preferred modal variation, select the part where you’d like to add your modal and click ‘+ add to page’.
Modals are contained in a Group, and they generally consist of:
A button or link that activates the Modal Part
The Modal Box - the box that shows the content of the modal. This could include text, cards, images, buttons, and anything you want to display in the box.
The Modal Part - the container element that covers the screen and changes its color when the modal is open.
The example below shows these key parts:
To add contents to the modal box, select the 'Modal Box' part. This will open the modal box property panel in the right menu. Add any parts from the part library to the modal box.
To edit the contents of the modal box, select the part to be edited, which will open the relevant parts' property panel.
In the example below, a card was added to the modal box, and the existing text in the modal box was amended.
Using the color editor in the property editor on the right will apply colors to the modal box and its contents. You can apply a background color, color gradient, and foreground color.
If the modal part is selected, the modal part property editor will be activated. Changing the color for the modal part will apply color to the whole screen whilst the modal is open.
Editing and styling the or the containing the modal is done how you would usually edit and style a button or a link.
Buttons
Links
Text
Customizing and formatting
