The purpose of banners is to contextually inform users about relevant information or changes that require their attention. They can be used to highlight messages like errors or reminders.
Banners can include an option for users to interact with the displayed information, such as a link to another page. They play a crucial role in keeping users informed and engaged with the application or system.
Anatomy
- Background. Warning state color-yellow-200.
- Icon. Warning state icons/actions/warning and color-brand-400.
- Body. Using typography-paragraph-regular-semiBold and color-brand-400.
- Link(optional). Using typography-paragraph-regular-semiBold+underlined and color-brand-400.