Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Alert ribbons

The alert ribbon is a compontent containing information about the state of the system, page or function. Information can be plain information, success, warnings and critical information (such as errors).


Short description

This component is for when the system needs to inform the user of a given situation or state. 


Alert ribbons can stay constantly visible, or if the issue is something that can be resolved by the user, a call to action (button, x or a link) may be included to dismiss the message.

Types of alerts

There are four types of alerts.

1. Information: grey

Used for informative guiding messages, sometimes proactive advice. 

2. Success: green

Indicates that an action processed successfully, or that there are no account-related issues. Typically used when there is no need for a printed receipt.

3. Warning: yellow

A warning, that you may disregard from, but it may influence the experience. Gives the user a hint about a condition or situation that needs attention from the user.

4. Critical or error: red

A critical warning that you may not disregard and requires the full attention. The user usually must act or they will probably not be able to use the function. 


Generally, there are four types of placements that depends on the context; global, page, group and specific. The rule is to simply place the alert near the issue that triggered it.


Alert is placed at the top under the header. Is typically a system notice (i.e Maintenance).


Alert is placed at the top of the page. Is typically a function notice (i.e Bankgiro is down).


Alert is placed in the module. Is typically a notice related to the module (i.e Transaction listing is unavailable).


Alert is placed in the content (table, etc) in the module. Is typically a notice related to the content (i.e Negative balance).

Do's and don'ts

  • Be specific and short in the actual message
  • Place the alert near the context of what is triggered the alert
  • Urge the user to act if needed
  • Add an icon to enforce the message (optional)
  • Overwhelm the user with multiple alerts of the same severity. Group them if possible.


Above: Information alert ribbon

Above: Warning alert ribbon




  • Text: 16 px medium/regular
  • Text line height: 20 px


  • Background height: Min 48 px, max x px
  • Background width ribbon: Full width/content width
  • Background width toast: Min 343 px


To make the icons clear on coloured backgrounds, use "solid" FontAwesome icons: 

  • Information – "info-square"
  • Success – "check"
  • Warning – "exclamation-square"
  • Alert – "exclamation-square"


Information alert ribbon


  • On white backgrounds: Grey 200
  • On grey backgrounds: Grey 800
  • Text: Grey 800


  • Grey 200
  • Grey 800
  • Grey 800


Success alert ribbon


  • Background: Dark green 2
  • Text: White
  • Timeout line: 10% Dark green 2


  • Dark green 2
  • White


Warning alert ribbon


  • Background: Yellow
  • Text: Grey 800


  • Yellow
  • Grey 800


Critical information and error alert ribbon


  • Background: Dark red 1
  • Text: White


  • Dark red 1
  • White


The four types of alert ribbons are used for four different types of information:

  • Information; information in general.
  • Success; confirmations.
  • Warnings; important information to be aware of.
  • Critical and error; what the customer needs to do to be able to proceed.


Information ribbons may be used to inform the users, for instance about new features, or to give proactive advice.

In information ribbons, the message may consist of:

  • Information. Short message about a new feature, current event or guiding tip.
  • Instruction. Next choice or mandatory step. The action may be a button, x or link. The button label or link text might be a separate content.


Success ribbons may be used to confirm that the customers action was successful.

Why should we confirm?

  • People expect digital interfaces to behave according to social norms.
  • Confirmations are among the most important feedbacks that people expect to receive.

In success ribbons, the message should consist of:

  • Confirmation. Everything is done and ok. Generally, we do not thank the customers for what they did, especially not for regular activities like payments or fund or securities orders.However, it might be appropriate to thank the customer after entering KYC information or other private information.
  • Instruction. Next choice or mandatory step. The action may be a button, x or link. The button label or link text might be a separate content.
  • Relation. If appropriate, you can give extra meaning to the action: a positive impression of our brand and the customer’s pleasant experience.


We have opened your account. You can add a monthly saving. Add a monthly saving


We have received your extra payment
It can take up to two weekdays before the reduced mortgage amount appears on your mortgage. Once the instalment is registered, you can pay extra again. However not more than 100 000 kronor within a 30-day period.


Warning ribbons may be used for different types of non-critical information, for instance that the due date of an upcoming transaction is close, that the stock market prices aren’t properly updated or for information about planned maintenance of the service.

In warning ribbons, the information normally consists of:

  • Explanation. Summarise as much of as possible what is wrong, for example There are technical problems with the stock market prices, and you cannot be sure that they are correctly displayed. The message should normally not start with words like Important, Note or Warning.
  • Estimation. How long we estimate the problem to persist, if there is a reasonable estimate.
  • Apology. Apologize only when problems in SEB's system are interfering. Otherwise, the explanation of the problem will suffice.
  • Instruction. Next choice or mandatory step. The action may be a button, x or link. The button label or link text might be a separate content.

Critical and error

Critical and error ribbons may be used for information that is crucial for the users to be able to do what they want, for example if a system is closed, the service cannot be used or if there is a system error.

In critical and error ribbons, the information about the problem normally consists of:

  • Explanation. Explain what is wrong. The message does not need to start with words like Important, Note etc.
  • Apology. Apologise only when problems in SEB’s system are interfering.
  • Help or instruction. What the customer must do to be able to proceed with what the he or she intended to do – now or later. Next choice or mandatory step. The action may include a button, x or link. The button label or link text might be a separate content.

Related patterns & components

Page last updated


Was this helpful?