Logomark for Development Bank of Singapore (DBS), a bright red shape resembling a flowerDBS Digital
Design System

Information banners

Information banners display a prominent message to provide additional context for the user.

What’s here

  1. Resources
  2. Types
  3. Variations
  4. Usage
  5. FAQs

Resources

  • Information banners on Figma
  • Information banners API

Types

Media is restricted, please login to view

Variations

Media is restricted, please login to view

Usage

Placement

An informational banner can be a general message placed at the top of the page.

Media is restricted, please login to view

Alternatively, an information banner can be displayed contextually within a section on the page.

Media is restricted, please login to view

Multiple alerts

Up to 3 alerts can be stacked at one time.

Media is restricted, please login to view

Keep alert content succinct

Keep alert title within one line and message within three lines.

FAQs

What is the difference between an information banner and an alert?

An information banner is used for a general message that doesn't require validation. Use alerts only for form validation, to highlight any errors that the user needs to fix before navigating to the next screen. To learn more, check out the alert guidelines.

Loading...