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.
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).
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.
There are four types of alerts.
Used for informative guiding messages, sometimes proactive advice.
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.
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.
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).
Above: Information alert ribbon
Above: Warning alert ribbon
To make the icons clear on coloured backgrounds, use "solid" FontAwesome icons:
The four types of alert ribbons are used for four different types of information:
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:
Success ribbons may be used to confirm that the customers action was successful.
Why should we confirm?
In success ribbons, the message should consist of:
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:
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: