BannerReady

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.

Open in new window

View RTL

<nord-stack>
  <nord-banner variant="info">
    We’ve updated your plan, make sure you know how these changes affect it.
    <a href="#">Learn more</a>.
  </nord-banner>
  <nord-banner variant="danger">
    We’re experiencing an incident. Please see our <a href="#">status page</a> for more details.
  </nord-banner>
  <nord-banner variant="warning">
    Payment details missing. To stay on your current plan, <a href="#">add payment details</a>.
  </nord-banner>
  <nord-banner variant="success">
    Your order has been shipped and will arrive on May 27th. <a href="#">Track order</a>.
  </nord-banner>
</nord-stack>

<nord-banner>
  We’ve updated your plan, make sure you know how these changes affect it.
  <a href="#">Learn more</a>.
</nord-banner>

<nord-card>
  <h2 slot="header">Paid invoices</h2>
  <nord-stack>
    <nord-banner variant="info">
      We’ve updated your plan, make sure you know how these changes affect it.
      <a href="#">Learn more</a>.
    </nord-banner>
    <nord-banner variant="danger">
      We’re experiencing an incident. Please see our <a href="#">status page</a> for more details.
    </nord-banner>
    <nord-banner variant="warning">
      Payment details missing. To stay on your current plan, <a href="#">add payment details</a>.
    </nord-banner>
    <nord-banner variant="success">
      Your order has been shipped and will arrive on May 27th. <a href="#">Track order</a>.
    </nord-banner>
  </nord-stack>
</nord-card>

<nord-stack direction="horizontal" justify-content="start">
  <nord-button href="#" variant="primary" size="l">Submit ticket</nord-button>
  <nord-banner>You need to be logged in with a Nordhealth account to submit tickets.</nord-banner>
</nord-stack>

<nord-stack style="max-width: 340px; margin: var(--n-space-xl) auto">
  <nord-banner shadow variant="warning">You’ve been signed out. Please sign in to continue.</nord-banner>
  <nord-card padding="l">
    <h1 slot="header">Sign in to Nord</h1>
    <form action="#">
      <nord-stack>
        <nord-input
          label="Username"
          expand
          required
          hide-required
          name="username"
          type="email"
          placeholder="user@example.com"
        ></nord-input>
        <nord-input
          label="Password"
          expand
          required
          hide-required
          name="password"
          type="password"
          placeholder="••••••••"
        >
        </nord-input>
        <nord-button type="submit" expand variant="primary">Sign in</nord-button>
      </nord-stack>
    </form>
  </nord-card>
  <nord-card class="n-align-center"> New to Nord? <a href="#">Create an account</a>. </nord-card>
</nord-stack>

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:

Icon
Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to display an icon from the Nordicons library.

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:

We’re experiencing an incident. Please see our status page for more details.

There was an error.

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):

We’re experiencing an incident.

We’re Experiencing An Incident.

Always end in punctuation:

We’re experiencing an incident.

We’re experiencing an incident

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

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.