Skip to content
IndexDesign corpus

Banner

31 resources ship this component · Feedback

Also called: alert banner, global banner, page-level alert, system banner, full-width alert, notice bar.

Before you ship6 checks
  1. 01Style — How the banner types look (fill, text colour, border radius etc)
  2. 02Content — A title is a must but you can consider a description if you feel a title does not convey enough information
  3. 03Types — Banners typically appear as 5 options: information, success, warning, error, neutral. This helps visually establish context and level of importance
  4. 04Call to action button — A banner may call for the user to do something, like fix the error it is calling out, or viewing the successful outcome of an event
  5. 05Placement — Where the banner sits on the page, dependent on context and importance
  6. 06Dismissable — Whether the banner can be dismissed. Positive/neutral banners (info and success) would suit this, but not warning/error banners as they are too critical

Checks from checklist.design, MIT.

Ships it31