Notifications
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack’s modular elements at the Element Index Page →[/vc_column_text][/stack_hero][/vc_column][/vc_row][vc_section css=”.vc_custom_1498220928915{padding-top: 0px !important;}”][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”5/12″][vc_raw_html]JTNDZGl2JTIwY2xhc3MlM0QlMjJhbGVydCUyMGJnLS1lcnJvciUyMiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTIyYWxlcnRfX2JvZHklMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NzcGFuJTNFJTNDc3Ryb25nJTNFTm90ZSUzQSUzQyUyRnN0cm9uZyUzRSUyMFRoZSUyMGVsZW1lbnRzJTIwaW4lMjB0aGlzJTIwcGFnZSUyMGFyZSUyMGN1cnJlbnRseSUyMGF2YWlsYWJsZSUyMHRvJTIwVmlzdWFsJTIwQ29tcG9zZXIlMjBvbmx5JTIwJTI4bm90JTIwVmFyaWFudCUyOSUzQyUyRnNwYW4lM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZkaXYlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMmFsZXJ0X19jbG9zZSUyMiUzRSVDMyU5NyUzQyUyRmRpdiUzRSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQyUyRmRpdiUzRQ==[/vc_raw_html][vc_empty_space][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]
Trigger Notification
Stack’s notification system allows you to alert users attention to certain aspects or features of the page without commanding all of their attention. Notifications can be triggered by any element on the page that shares the same data-notification-link with the corresponding .notification element. Customise the notification with the following classes and data attributes:- .pos-left,right,top,bottom – positions the notification on the page
- [data-animation=”from-left,right,top,bottom”] – determines the direction the notification should pop in from
- .col-* – Use the grid classes to determine the width of the notification