Info

Page-load notification system used to display important information, announcements, or guidance when visitors enter the site.

Autoload Component

The
Autoload - Info
component lives inside
Global
, so updates to the component apply across the site. Ensure that
Global
is placed on every page where Info is required.
Choose the Modal or Popover system based on the desired Info layout and behavior, then place its structure inside the
Autoload - Info
component. This allows the info to load automatically while keeping the modal or popover behavior controlled by its own documented system.
The page-load animation is controlled under Autoload in the Interactions (X) panel. The interaction should target either b-modal-target = autoload-info or b-popover-target = autoload-info, depending on the selected system. When the page loads, the interaction adds is-open and on-enter to the targeted element to make it visible and play the entrance animation.
Autoload - Info

Popover System

Info layout that uses the Popover system to present page-load information, announcements, or guidance in a flexible overlay format. For full setup instructions, visit the Popover page.
Important: The popover-navigation is-autoload-info class combination controls the position of the autoload info. Place the Info layout inside this container so its position remains controlled by the Popover system. Once the layout is complete, place the finished Popover component inside the required Autoload component.
System Container
popover-navigation
is-autoload-info
b-popover-target = autoload-info
Note: Element is hidden by default.
Interaction States
Control how elements become visible and how their entrance and exit animations run. If no changes are made, the default Popover setup will be used.
Menu Open
popover-navigation
is-autoload-info
is-open
Menu Enter Animation
popover-navigation
is-autoload-info
is-open
on-enter
Menu Exit Animation
popover-navigation
is-autoload-info
is-open
on-enter
on-exit
Layouts
Choose a layout, then place it inside the popover-navigation is-autoload-info element within the System Container.
This message appears automatically when visitors enter the site. Use it to highlight important updates, announcements, or guidance before they continue browsing.
Got it!
Important!
This message appears automatically when visitors enter the site. Use it to highlight important updates, announcements, or guidance before they continue browsing.
Got it!
Image Placeholder
This message appears automatically when visitors enter the site. Use it to highlight important updates, announcements, or guidance before they continue browsing.
Got it!
Image Placeholder
Image PlaceholderImage PlaceholderImage PlaceholderImage Placeholder
This message appears automatically when visitors enter the site. Use it to highlight important updates, announcements, or guidance before they continue browsing.
Got it!
Important!
This message appears automatically when visitors enter the site. Use it to highlight important updates, announcements, or guidance before they continue browsing.
Learn more...
Got it!
Important!
This message appears automatically when visitors enter the site. Use it to highlight important updates, announcements, or guidance before they continue browsing.
Learn more...
Got it!
Important!
This message appears automatically when visitors enter the site. Use it to highlight important updates, announcements, or guidance before they continue browsing.
Learn more...
Got it!
Important!
This message appears automatically when visitors enter the site. Use it to highlight important updates, announcements, or guidance before they continue browsing.
Learn more...
Image PlaceholderImage Placeholder
Got it!
Image Placeholder

Important!

This message appears automatically when visitors enter the site. Use it to highlight important updates, announcements, or guidance before they continue browsing.
Learn more...
Got it!

Important!

This message appears automatically when visitors enter the site. Use it to highlight important updates, announcements, or guidance before they continue browsing.
Learn more...
Got it!
Image PlaceholderImage PlaceholderImage PlaceholderImage Placeholder
The attribute b-autoload-info = dismiss is added to the close element that contains the "Got it!" text.
Custom Behavior -
Info

Info Autoload

Automatically displays the Info component through the page-load interaction until the visitor dismisses it.

When the visitor clicks the exit button, the code saves the dismissed state in the browser. On future page loads, it hides the component and removes the autoload target attribute before the page-load interaction can run.

‍

Component Attribute

Add the following attribute to the complete Info component: b-modal-target = autoload-info or b-popover-target = autoload-info‍

This identifies the component that should load automatically when no saved dismissed state exists.

‍

Dismiss Button Attribute

Add the following attribute to the exit button inside the component: b-autoload-info = dismiss

When clicked, this button saves the dismissed state and prevents the component from loading again.

‍

Interactions

The entrance and exit animations are controlled in the Interactions panel.

The page-load interaction should target b-modal-target = autoload-info and b-popover-target = autoload-info.

The exit button can also have a click interaction that visually closes the component. The code allows time for this animation to complete before hiding the component.