[vc_row full_width=”stretch_row”][vc_column][stack_hero image=”38″][vc_column_text]
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]
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:
[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=”7/12″][stack_notification button_text=”Trigger Notification” trigger_name=”mainModal”][vc_single_image image=”185″ img_size=”100×100″][vc_empty_space][vc_column_text]
Hey there I’m Mandy, the notification master. You clicked the trigger, and that triggered me to appear, so here I am.[/vc_column_text][/stack_notification][/vc_column][/vc_row][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”5/12″][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]
A notification can be set to automatically display after a certain period of time once the page has loaded. You will have already seen an autoshow appear in the top-right hand corner of this page when you arrived.
You can adjust the autoshow time by adding the data attribute data-autoshow=”” to the .notification element with a millisecond value ie. a value of ‘1000’ would show the notification 1 second after the page has loaded.[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=”7/12″][stack_notification button_text=”Trigger Notification” trigger_name=”autoshowModal” autoshow=”500″][vc_column_text]
Here’s a handy little notification that’ll pop up and tell the user something important about your page.[/vc_column_text][/stack_notification][/vc_column][/vc_row][/vc_section]
