Alert

The Alert tool allows you to insert messages that are highlighted. Use it to draw your visitor’s attention and set it to be dismissible by your visitors.

Examples

Basics

In this example we're using basic settings for the Alert tool and have set it to use the Primary palette preset. You can add various content types to an Alert. Here we've opted for just a Header and Paragraph.

More Content

Here we've opted for a custom color, as well as upped the content in this Alert, including a Badge, Header, Paragraph and a List stack using inline Linked List items.

Oh, the red button there kid. Don't ever, ever touch the red button.

Alert provides a way to present highlighted content to your visitors. While the Alert tool can be dismissable, the alert message will reappear when the page is loaded or reloaded. We do this purposefully as to not use cookies with this tool, making the page and site more visitor friendly.

Settings

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

General

Include Base Margin

When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.

Make Alert Dismissable

Allows you to decide if the visitor can dismiss the Alert by clicking a small x icon. Alerts will always appear as visible when the page is reloaded.

Styling

Background

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for styling the Alert background. You're also provided an option to choose a custom one-off color as well.

Text

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for choosing the text color in the Alert. You're also provided a a option to choose a custom one-off color as well.

Shadow

Shadow

Used to add a decorative shadow to the Alert. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.

Hover Shadow

This setting can be used to apply a different shadow, or none at all, to Alert when the visitor hovers over the button on the page.

Animate Hover Shadow

When enabled a small transition animation, essentially a keyframe animation, will be applied to the Alert when the visitor hover over it. This will give the transistion from normal Shadow style to Hover Shadow style a bit more personality and visual interest.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.