Design Pattern Library - Add banners

Add all approved banner styles to brand.ai

Example(s)

(Image of the pattern you are adding to the library)

White background Blue background White background without image Banner in a list
white blue white-without-image embedded-to-list

Usage

(When do you use this pattern? And how? This is being collected for design.gitlab)

Banners are used to promote or introduce features. Banners disappear after clicking the “Dismiss” button and never show up again. They can display on the top of the screen or the section they are part of. (updated on 2018/04/24) Banners have the ability to be dismissed whenever users don't want to see the messages again. (Updated on 2018/06/25) The banners are dismissed depends on the content is for per project, per group, or all projects.

The banners in the light blue background are used for feature introduction. The banners in the white background are used for feature promotion. The maximum width of the text in the banner is 580px regardless of the width of the banner. The width of the banner depends on the width of the section or the screen.

For the graphics of feature introduction banners, the maximum width and height of the image are 120px. For the graphics of feature promotion banners, the maximum width is 74px and the maximum height is 80px.

The graphics can only display on the left side of the text.

Dos and Dont's

(Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)

Don’t show two banners at a time in the same section.

We prevent to have two banners in the same section because it makes the screen heavy and takes too much space.

✅ Do 🛑 Don’t
01-do-showing-a-banners 01-dont-showing-two-banners
Don’t use banners for system messages.

Banners are used for feature promotion and introduction. For system messages, we would recommend using toast messages.

✅ Do 🛑 Don’t
02-do-persistent-conditions 02-don_t-persistent-conditions
Apply the correct style for the banner depends on the purpose.

The banner with the light blue background is used for feature introduction. Don't use it for feature promotion.

✅ Do 🛑 Don’t
04-do-introduction-with-blue-background 04-dont-introduction-with-withe-background

Related patterns

(List any related or similar solutions. If none, write: No related patterns)

No related patterns

Links / references

Pattern checklist

Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.

  1. Ensure that you have broken things down into atoms, molecules, and organisms.
  2. Check that you have not created a duplicate of an existing pattern.
  3. Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
  4. Make sure that text is created using text styles. When applicable used shared styles for colors.
  5. QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)
Edited by Hazel Yang