Overview

A Banner displays a prominent, succinct message with a related link or action.

Best Practices

Banners should:

  • Be presented at the top of the screen, below the top navigation bar and page header.
  • Require user action in order to be dismissed.
  • Be persistent and non-modal, allowing users to either ignore them, or interact on them at any time.
  • Contain a single message, with a corresponding action that the user can take.

Banners should not:

  • Be user to provide feedback on system or user actions. Use a flash messsage for page-level feedback and an alert for feedback specific to a container on a page.

Examples

Banners can be used to draw attention to marketing messages, using color to indicate that the content is related to a particular order source: our marketplace, ez-ordering, direct entry, or other marketing channels.

Banners must include an onDismiss prop, allowing the user to acknowledge and dismiss the banner.

Banners must include a link containing a label and either a href, to or onClick property, to offer the user an action to take relating to the banner message. For more information on using links, see EzLink.

Code example
Playroom

More orders, lower commission.

Linking to ezOrdering from your website lets you take catering orders online, without ezCater branding and at a lower cost per order.

Learn more

More orders, lower commission.

Linking to ezOrdering from your website lets you take catering orders online, without ezCater branding and at a lower cost per order.

Current theme

Theme

Contents