The pop-up should be used to provide system feedback, confirm user actions, prevent errors and to communicate urgent information to the user.
Desktop
Mobile
The pop-up appears on top of the page (higher z-index), and consist of
- Headline*
- Body copy*
- Close button*
- CTAs. (Optional)
* required element
The background and styling for this component are non-editable.
Headline
Character limit: 25
Do not exceed one lines of text on 360px screens
Paragraph
Character limit: 148
For general copywriting guidelines, please refer to the Writing rules.
Colorways
The pop-up should be used to communicate to the user important information, to prevent errors and ensure the users take the right actions. They can be used, for example, for confirmations of user’s actions or to communicate high-priority messages.
Pop-ups are generally considered a disruptive element that are designed to take users out of their ‘flow’. As such they are very effective at conveying important information, but at the same time they should be used very sparingly. Pop-ups should be used only to grab users’ attention when it matters most.
Example of use: If a user clicks on the bin icon next to a product in their cart, a pop-up will ask the user wether they are sure that they want to remove the product from their cart. If they do want to remove the product they can proceed - but if they do not they have option to cancel the action and keep the product in the cart.
Examples of use
DO: Use short and precise headline and copy that informs the user about context of the pop-up.
DON’T: Don’t use long text for headline and copy - this will reduce the likelihood of the customer reading and understanding the message.
DON’T: Don’t overuse the pop-ups. Use them for high-priority messages only.