Banner
Persistent announcement bar for important messages, promotions, or warnings. Supports dismiss with localStorage persistence, action buttons, and multiple variants. Can be fixed to the top or bottom of the viewport, or rendered inline in the document flow.
Preview & Code
_banner.html.erb
███
██████ █████████ █████████
██████
███ ██████ ████████████████████ ████████ ███ ████ ████████ █████████ ██████ ████████ █████ ██
███ ██████ ████████████████████ ████████ ██████ ████ ███████ ████████ █████████ ████████████ █████ █████ ███████████ ███████ ██
███ ██████ ████████████████████ ████████ ███████ ████████████ ████████ █████████ ████████████ █████ ████████████████ █████ ████████████ ██████████████████ ██
███ ██████ ████████████████████ ████████ ███████ █████████ ████████ ███████ █████████ ███████ ██
██
banner_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ███████ ███████████ ██████ █████████████ ████ ████████ ████████████ ███████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █
███████████ ███████
████████ ███████
█
█████████ █
banner_component.html.erb
████ ██████████ ███████████████ █████ ██████████████████ ██ ███ ██ ██ ███ █ ███████ █ █████ ███ ███
████ ███████████ ████████████ ██████████████ ███████ ██████ ███████████████ █████████
██ ██ ██████████ ██
████ ███████████████ ███ ████ ███████████ ██████████ █ ██ ███ ██████████████████████
███ ██████████████████ ██
██████
██ ███ ██
█████ ████████████████████
██ ██ ████████████████ ██
banner_component.rb
█ ██████████████████████ ████
█████ ███████████████ █ ███████████████████
████████ █ ███████ ███████ ███████ █████████████
█████████ █ ██████ ██████ ██████████████
███ ███████████████████ ████ ████████ ██████ ████████████ ██████ ████████████████ ██████
████████████ ████ ████████████ ████ ███████████ ████ █████████ █████ █████ █████ ████████████████
████████ █ ███████
████████ █ █████████████████████████████████ █ ██████████████ █ █████
banner_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ███████ ███████████ ██████ █████████████ ████ ████████ ████████████ ███████████
██████ ███████ █████ ███████ ██████████ █
██████ ██████ █ █
███████████ ███████
████████ ███████
█
█████████ █
Changelog
- Initial release with info, success, warning, and error variants
- Fixed top/bottom positioning and inline rendering mode
- Dismissible with optional localStorage persistence
- Optional action button/link with arrow icon
- Variant-specific icons and color schemes with dark mode support
Get Full Access
Unlock the source code for this component and all others. One-time payment for lifetime access.
Get Access Now