Notifications

Base Foundry stack

Add popup, dismissible, overlay notifications to your pages. The Notification stack lets you easily customize the look of your notifications.

  • Allow notification to be closed
  • Opt to have close button appear on hover
  • Set width of notification
  • Hide notification after delay
  • Choose from preset color options
  • Place notification in upper right- or left-hand side of page
  • Customize notification's opacity
  • Include drop shadow
  • Dodge mode allows items under notification to be seen
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

The Notification stack example can be seen at the top left corner of this page. We’ve opted for to allow the notification to be dismissed. Check it out and give it a try by clicking the close X icon.

Using Notifications

General

Title & Message
Set the title and text for your notification here.

Closeable
Decide whether visitors will be able to dismiss your notification. We highly recommend that they be allowed to.

Show Close Button on Hover
If you’ve made your notification dismissible you can use this feature to make the close button only show when the notification is hovered over.

Alignment
Set the placement of your notification. You can place it on the right- or left-hand side of the page.

Positioning
Allows you to set the distance from the right or left of the page as well as the top. This allows you to adjust the spacing between your notification and the edge of the browser window.

Style

Width
Set the size of your notification popup.

Opacity
You can adjust the opacity of the notification as a whole, allowing it to be slightly translucent.

Style
Allows you to choose from 3 preset styles for the notification popup.

Shadow
Add a subtle shadow to your popup to set it apart from the background.

Advanced

Hide After Delay
Allows you to have the notification go away after a period of time, which you specify.

Dodge Mode
When enabled the notification will dim itself when hovered over so that the visitor can more clearly see the page contents behind the notification.

Insight
Control Center

The Foundry Control Center houses some of the style settings for the Alert stack. This allows them to retain a consistent, page-wide look. You can also adjust the Dark Mode colors for Alert, and other stacks, there as well.