Did you know you can save 20% on your order with the code SAVEBIG?
<Bannericon="help"title="help">
Did you know you can save 20% on your order with the code SAVEBIG?
</Banner>
Screenshot
Potential uses
Displaying the availability of a promo code or other promotional messaging.
Notifying the user that they’re browsing in offline mode.
Alerting the user that a form has not been submitted due to errors.
Accessibility
Be sure to check the contrast of text on background color to ensure it passes a11y guidelines. Use this handy tool to guide you.
Use green for success and red for failure, however do not rely on color alone. Be sure to include icons, and be clear in your language.
Best practices
On tap, a user can follow a link to a url with further information.
On tap, an action can be set to open a modal which contains further information.
Usually there will be multiple variations of background color and icon.
Common places to position a banner include at the top of the page, below the header bar or fixed to the bottom of the viewport.
If a banner is being used for success/failure messaging, it should be attention-grabbing in color.
If a banner is used for promotional messaging site-wide, it should use a color which does not distract from the main actions on the page.
Banner messages should contain very few words and be clear. If there is more information required to explain the message, this should be accessible from another page or modal window.