Toast

Popup notifications for your visitors with this lightweight and easily customizable alert message. Include them inline within your content, or have them floating in a fixed position within the browser window.

Examples

Inline Toast

This Toast popup is configured to fade in after 2 seconds, then pause here for 20 seconds and then fade back out again. We've not enabled cookies, so this popup will reload when and if the page is loaded again. We've placed this example inline with our content, but you want position it in a fixed location as well.

With great power comes great responsibility.

Toast gives you the ability to display popup notices, alerts and more, whether inline in the content of your page, or fixed to a specific location on the page.

Toast allows you to use cookies to detect if the visitor has dismissed this Toast popup in the past, and if so not display it for a set period of time.

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.

Header

Include Header

Enabling this feature adds a small text-based header section to the top of the Toast popup. It includes an icon for closing the popup as well as a Title and Small Title. All three are optional and customizable.

Include Title

Adds a Title label to the small header that sits at the top of the Toast popup.

Title

Here you can customize the Title text that is optionally included in the Header section of the popup.

Include Small Title

Adds a Small Title label to the header that sits at the top of the Toast popup. This element positions itself accordingly based on whether the main Title is turned on or off.

Small Title

Here you can customize the Small Title text that is optionally included in the Header section of the popup.

Include Close X Button

When enabled a toggle icon is added to the Header section. This allows visitors to close the Toast popup by clicking it.

Close Icon

Let's you choose from a variety of icon styles for the closer toggle button.

Position

Position

Here you'll decide how your Toast popup will be displayed. By default we place it inline with the rest of your content. You can however also choose to place it in a fixed position within the browser window. We offer several choices for this fixed style positioning.

Styling

Header 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 the background of the header section of the popup. You're also provided an option to choose a custom one-off color as well.

Title

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 the title text within the header section of the popup. You're also provided an option to choose a custom one-off color as well.

Small Title

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 the small title text within the header section of the popup. You're also provided an option to choose a custom one-off color as well.

Close Icon

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 the closer icon within the header section of the popup. You're also provided an option to choose a custom one-off color as well.

Content Background

This color picker provides you a way to customize the background of the main content section of the popup.

Border

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 the border of the Toast popup. You're also provided an option to choose a custom one-off color as well.

Disable Default Content Padding

Enabling this feature removes the padding from the Toast popup's main content area. This allows you to instead use a Spacing tool to create custom padding. This provides more granular control when needed.

Border

Enable Borders

This feature adds a border to the outer edge of the Toast popup as well as a divider border between the header section and the main content area of the popup.

Width

Width

Here you can adjust the width of the Toast popup. This width is only applied to fixed positioned popups and is not applied when using the inline position mode.

This is applied uniformly to the popup up at all responsive breakpoints by default. You can however click the small + icon above this setting to adjust the width at each individual breakpoint for more granular control.

Width Units

Lets you choose the unit of measure used for the width setting above.

Shadow

Shadow

Used to add a decorative shadow to the Toast popup. 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.

Show / Hide

Fade in on Page Load

Enabling this feature will have the Toast popup fade in after a specified period of time. When disabled the Toast popup will be visible immediately and will not be delayed.

Fade in Delay

This is the amount of time in milliseconds that Toast will wait before fading in. This setting is only applied if the Fade in on Page Load feature is enabled.

Fade Out After Delay

This feature, when turned on, will fade out the Toast popup after a specified period of time.

Fade Out Delay

This is the amount of time in milliseconds that Toast will wait before fading out. This setting is only applied if the Fade Out After Delay feature is enabled. Note that you must also being using the Fade in on Page Load feature for the Fade Out option to be enabled.

Cookies (Advanced)

Enable Cookies

This feature, off by default, allows you to detect if the visitor has dismissed this popup previously. If they have dismissed it previously and the cookie has not yet expired, then the popup will not be displayed.

When disabled the popup will be displayed to the visitor each time the page is loaded, whether they've dismissed it in the past or not.

Expiration

This is the amount of time, in hours, until the cookie expires. If the cookie has expired then the visitor will see this popup again.

Z-Index (Advanced)

Z-Index

Allows you to adjust the layering of elements using a custom z-index value.

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.