Skip to main content

Banner

Banner are page level messages provided to the user.

Variants​

There are 3 different sized varients of banners provided in GEL. Info, Preprod and Danger

Banner types

Demo​

Banner demo

Guidance​

  • Banner should always be the first item on the page when displayed.
  • Banners are non closable in behaviour meaning they remain at the top of the page until the entirety of the frame.

When to use​

  • Use banner when user would require information about the page at the top level.

When not to use​

  • If you need to communicate that a feature hasn't been configured or used, consider using an empty state instead.
  • If you need to communicate status of the contents of the page, consider using an alert instead.

Designer assets​

figma
Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API​

Code

Banner is a custom component specific to GEL and is not available in PrimeVue.

Last updated on