The Alert Element allows you to display a colored alert box with many styles to draw the attention of your viewers for different purposes.
You can use this element to display dismissable special offers, GDPR and Privacy notifications like the ones you see on this page. It is appearing each time the user opens the page.
In this article
Displaying the Alert Element
To add an Alert element to a page:
|Type||There are 4 types of alerts to fit with 4 general purposes: Info, Success, Warning, Danger.|
|Title & Description||You need to add the message content and Title in the respective boxes.|
|Choose Icon||Adds icon displayed inside the alert box.|
|Dismiss Button||Toggle the dismiss button on or off. Please note that, dismiss button will hide the box, but as soon as you refresh the page, the alert box will show up again.|
|Background Color Type||Sets a classic or gradient background color for the Alert element.|
|Width||Sets the width of the Alert element.|
|Height||Sets the height of the Alert element.|
|Padding||Sets a padding for the Alert element.|
|Alignment||Aligns the button on a page.|
|Border Type||Sets a type of border for the Alert element.|
|Border Radius||Sets a custom radius for the border.|
|Text Color||Sets the color of the title text in the Alert box.|
|Typography||Lets you change and style everything related to the Alert title text.|
|Text Color||Sets the color of the description text in the Alert box.|
|Typography||Lets you change and style everything related to the Alert box description text.|
|Color||Sets the color of the icon.|
|Size||Sets the size of the icon.|
|Padding||Sets a padding around the icon.|
You can choose to have different settings on different screen sizes for some of the Alert element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.
At first you’ll see the icon for desktop layout only
But when you click that icon, you’ll get two more layouts: for tablet and phone.
To learn more about it, please check this article.