Alert
The Alert stack allows you to insert content on your page that is highlighted to draw your visitor’s attention and can be set to be dismissible.
- Use a simple or advanced layout
- Advanced layout includes Stacks dropzone
- Use preset colors
- Make the alert dismissible
- Allow alert to fade out when dismissed
- Use square or rounded corners
- Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.
Example
Advanced Alert
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Using Alert
General
Type
You can choose between using a simple Alert, which contains a place for text only, or an advanced Alert that allows you to have a header followed by a drop zone for other stack types.
Dismissible
Allows you to decide if the user can get rid of the Alert by clicking a small x icon.
Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Alert stack.
Style
Style
Alert boxes have their own, predefined styles for Success, Info, Warning and Danger. You can choose from any of the four for your alert. These color choices are not defined by the Control Center, but are their own predefined Foundry styles.
Starting with Foundry v2 you can now set custom colors for the background, text header and close button using color pickers. v2
Square Corners
Remove the predefined, rounded corners from your Alert.
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.