Banner informs users about important changes or conditions in the interface. Use this component if you need to communicate to users in a prominent way.
We’ve updated your plan, make sure you know how these changes affect it.
<a href="#">Learn more</a>.
We’re experiencing an incident. Please see our <a href="#">status page</a> for more details.
Payment details missing. To stay on your current plan, <a href="#">add payment details</a>.
Your order has been shipped and will arrive on May 27th. <a href="#">Track order</a>.
The style variant of the banner.
|Default slot||default slot|
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
Controls how rounded the corners are, using border radius tokens.
Controls the surrounding shadow, using box shadow tokens.
This section includes guidelines for designers and developers about the usage of this component in different contexts.
- Use this component if you need to communicate in a prominent way.
- Place banner at the top of the section it applies to.
- Use for highlighting errors and success statuses.
- Put banner close to the context it’s referring to.
- Move focus to the banner if it’s relevant to the current workflow.
- Move focus to banner if it appears on page load.
- Use for highlighting general content or as a banner.
- Use to replace an error page.
Content guidelines #
Banner content should be clear, accurate and easy to understand:
When writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Always end in punctuation:
Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.
If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.