Banner
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.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
variant | variant | The style variant of the banner. | 'info' | 'danger' | 'success' | 'warning' | 'info' |
Slots
| Slot name | Description |
|---|---|
Default slot | default slot |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-banner-border-radius | Controls how rounded the corners are, using border radius tokens. | var(--n-border-radius) |
--n-banner-box-shadow | Controls the surrounding shadow, using box shadow tokens. | var(--n-box-shadow-card) |
Dependencies
This component is internally dependent on the following components:
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- 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.
Don’t
- 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:
Integration
For integration guidelines, please see Web Components documentation .