Banner
A horizontal bar that appears at the top of a page to display important announcements, notifications, or warnings to users. Users can click the “X” in the right-hand corner to close the banner.
On this page
Example
Purus varius tortor netus ultricies aliquam mattis erat. Ipsum lacus sed velit malesuada pulvinar dui consectetur tristique.
When to use
Banners can be used for:
- Urgent information, such as information in the event of an emergency
- Time-sensitive alerts like limited-time promotions and deadline reminders
Guidelines
- Avoid them for general marketing messages that aren’t urgent
- Keep messages concise and actionable
- Banners take up valuable screen space so use them sparingly and only when the message truly deserves prominence
Component Cheat Sheet
[Banner]
Icon: **select an icon or leave blank
Type:
Text: