Vanilla
CSS/SCSS
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.
The alert ribbon is a component containing information about the state of the system, page or function.
CSS/SCSS
CSS/SCSS
This component is for when the system needs to inform the user of a given situation or state. Information can be plain information, success, warnings and critical information (such as errors).
Overview
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 colour-coded alerts.
Generally, there are four types of placements that depends on the contex. The rule is to simply place the alert near the issue that triggered it.
Global
Page
Group
Specific
Information alert ribbon
Warning alert ribbon
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:
Don't start each word in headings and labels with upper case. Only use upper case in:
Specification
To make the icons clear on coloured backgrounds, use "solid" FontAwesome icons:
Information
Success
Warning
Error