Banner

Usage

A banner is a component that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page. Banners should be used to display functional feedbacks (e.g. “You have 3 days to update your folder”). Banners should be used to display high priority messages. A banner can be floating or attached (stuck to a header or top of screen).

Don’t : Use banners to display system feedbacks (ex : “Message sent”, “Task deleted” etc.) In those cases use a snackbar component instead.

Color usage

There are 4 different color variants used for the banner component: info, success, warn and critical. Each semantic color signifies a different type of information.

Info

1 - Bar : Background/Info/Dark 2 - Icon : Icon and Action/Info/Dark/active 3 - Title: Texts/Info/High Emphasis 4 – Text : Texts/Neutral/High Emphasis 5 - Background : Background/Info/Light 6 - Button : Texts/Info/High Emphasis 7 - Button : Info Dark

Success

1 - Bar : Background/Success/Dark 2 - Icon : Icon and Action/Success/Dark/active 3 - Title: Texts/Success/High Emphasis 4 – Text : Texts/Neutral/High Emphasis 5 - Background : Background/Success/Light 6 - Button : Texts/Success/High Emphasis 7 - Button : Success Dark

Warn 1 - Bar : Background/Warn/Dark 2 - Icon : Icon and Action/Warn/Dark/active 3 - Title: Texts/Warn/High Emphasis 4 – Text : Texts/Neutral/High Emphasis 5 - Background : Background/Warn/Light 6 - Button : Texts/Warn/High Emphasis 7 - Button : Warn Dark Critical

1 - Bar : Background/Critical/Dark 2 - Icon : Icon and Action/Critical/Dark/active 3 - Title: Texts/Critical/High Emphasis 4 – Text : Texts/Neutral/High Emphasis 5 - Background : Background/Critical/Light 6 - Button : Texts/Critical/High Emphasis 7 - Button : Critical Dark

Types

Other than color variants, banners have variable content. Following are the different types of displays:

Floating banner, two lines

Floating banner, single line

Attached banner, single line and close icon

Attached banner, two lines and close icon Attached banner, single line and action button

Attached banner, two lines and 2 buttons

Attached banner, two lines and two buttons

Anatomy and content

1 - Bar Visual cues that emphasize the toaster’s main color theme 2 - Icon Icon component (20px) 3 - Title 4 - Text Description, massage 4 - Background/Structure of the card 6 - Button Outlined 7 - Button Contained A close button can also be used on a banner

Behaviour and interaction

Do Use the banner component as an information bar inside the layout Display several messages inside a banner if necessary