The message box can be used to create an attractive message box. You can use this to display important notifications, announcements, alerts, GDPR and privacy notifications. You can make the notification appear each time the user opens a page, or appear once only and also use this element to display dismissable special offers that can reappear after some delay according to your given time. This contains various customization options for building the message box.
Content
- Title: Add your title in the text field.
- Description: Provide a description in the description box.
- Alert Icon: Choose the icon according to your need.
- Alert Icon Position: Choose the alert icon position either vertical, horizontal or reverse.
- Gap: Set the Gap between icon and title.
- Content Gap: Set the gap between the content of the message box.
- Is Dismissible: Enable to make it dismissible, if disabled you won’t get the option to close the message box.
- Close icon: Change the close button as per your need that displays on the top-right.
- Enable CTA: Enable/disable to control the CTA button section.
CTA (Call To Action)
- Position: Set the position of CTA as vertical, horizontal and reverse.
- Layout: Set the layout position vertical, horizontal and reverse.
- Align: Change the alignment of the button Start, center and End.
Button
- Title: Set the title of the button.
- Icon: Select the library and choose any icon among those options.
- Icon Position: Change position to be displayed either left or right.
- Action: Choose from provided options links, defer and dismiss.
- Dismiss Option – It will dismiss the Message Box.
- Links Options: It will link your button to an external or internal page.
- Link: Mention the link it can be any external link or any internal post, page.
- Rel attribute: It defines the relationship between the current and linked document.
If you want to open it in a new tab, select the open in new tab option. - Aria label: Aria label is for the users who use assistive technology to specify extra information about the structure.
- Title: Provide the title to the linked page, which opens in the new tab.
- Differ Option: It will set the expiration time of The Message Box.
- Expiration Time: Set the expiration time, after a given delay the message box appears again.
- Color: Choose the color of the title for the CTA button.
- Background Color: Apply colors to the background.
- Typography: Set the typography of the CTA.
- Border: Set the Border of the CTA button.
- Icon spacing: Set the space between the icon and the title.