Alert Element
The Alert Element displays a short message in a colored box with an icon. It is made for information that must not be overlooked: a notice about changed opening hours, a warning before a download, or a confirmation that something worked.
Four ready-made types (General, Error, Success and Notice) each come with their own colors and icon. The Custom type lets you choose the colors, border and icon yourself. Visitors can close the box with a dismiss button if you turn it on.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Alert Element
Add the Alert Element to any column, write the message in Alert Content and choose the Alert Type. The four standard types bring their own colors and show a matching icon automatically.
Choose Custom when the box should follow your own design. Then set the Accent Color (border, text and icon), the Background Color, the Border Size and the Border Radius, and pick an icon in Select Custom Icon. These options only take effect with the Custom type.
Content Alignment, Padding, Text Transform and Box Shadow work for every type. Dismiss Button adds a close button, either Boxed or Floated. Link Color Inheritance decides whether links in the message take the alert’s text color or keep the normal link color.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Alert. Change them there to style every Alert at once.
General
| Heading | Description |
|---|---|
| Alert Type | Select the type of alert message. Choose custom for advanced color options below. |
| Accent Color | Custom setting only. Set the border, text and icon color for custom alert boxes. |
| Background Color | Custom setting only. Set the background color for custom alert boxes. |
| Border Size | Custom setting only. Set the border size for custom alert boxes. In pixels. |
| Border Radius | Enter values including any valid CSS unit, for example 10px. |
| Select Custom Icon | Click an icon to select, click again to deselect. |
| Content Alignment | Choose how the content should be displayed. |
| Padding | In pixels or percentage, for example 10px or 10%. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Text Transform | Choose how the text is displayed. |
| Link Color Inheritance | Choose if links should inherit the alert box text color. |
| Dismiss Button | Select if the alert box should be dismissable. |
| Box Shadow | Display a box shadow below the alert box. |
| Alert Content | Insert the alert’s content. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
| Conditional Logic | Add conditional logic when the element is used within a form. |
Tips
- A dismissed alert is only hidden until the page is loaded again. Do not rely on the close button for messages that should disappear for good.
- The alert box is marked with the ARIA role
alert, so screen readers announce it. Keep the message short and use alerts sparingly. - The General, Error, Success and Notice types show a matching icon automatically.
- Turn Link Color Inheritance on when links in a colored box would otherwise be hard to read against its background.
- Inside a Tirenoa Form, Conditional Logic (Extras tab) can show the alert only for certain answers, for example a hint when a visitor selects a specific option.