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.

Formatting guidelines

It's important that formatting of data is done consistently across a system, and hopefully the same way across all SEB systems.

General guidelines

Ideally we would like the user to be in control of the formatting by setting a personal preference as a profile setting. This has proven problematic in many of our systems. So we do need a fallback for how to handle this.

Language

Historically we have only relied on Swedish formatting rules, but as many systems and user contexts spread outside Swedish context, we need to at least have an “English” formatting available. To keep it fairly simple we choose to link the formatting to language-setting.

As we use British English, we also use British formatting rules when it comes to data.

When to apply formatting

Formatting of data should always be applied. We should also apply data formatting when user has entered data into a field. When the field looses focus, we should apply formatting rules.

The input should be as forgiving as possible, allowing users to enter data with or without formatting. Our application of format will act as an confirmation that we understood the input correctly. I.e if user enters "231231" in a date-field, we will assume they mean "2023-12-31".

 

Formatting rules

Overview

Overview

 

Dates

Write out the name of the month when it is possible. It might be space-consuming, but it is more accessible to the users. If you want to include the weekday, always aim to write out the whole weekday. If you run out of space, consider not using the weekday at all rather than shortening it. If you must include it and it must be shortened, do it with three letters.

Using ISO åååå-mm-dd is acceptable when there is a lack of space, but never in a body text.   

Stay consistent. If a date is written out with the name of the month, do not write åååå-mm-dd in the same context. If a date needs to be shortened, use one of the short versions of the month written out.

In contexts where months are listed and abbreviated due to limited space, the full stop (period) is unnecessary.

Dates in mobile

The format åååå-mm-dd is not used in the app.

Dates in desktop

Long (English)
  • Monday 20 October 2023
  • 20 October 2023
  • 20 October
Short (English)
  • Mon 20 Oct 2023
  • 20 Oct 2023
  • 20 Oct
Lång (Swedish)
  • måndag 20 oktober 2023 ("Måndag" if it starts a sentence)
  • 20 oktober 2023
  • 20 oktober
Kort (Swedish)
  • mån 20 okt 2023
  • 20 okt 2023
  • 20 okt 

 

Amounts

When entering values into the amount input field, the values shall get formatted on-the-fly according to SEB’s formatting rules. E.g.

  • 9000 = 9,000 (English)
  • 9000 = 9 000 (Swedish)

It should also be possible to put in decimals. E.g.

  • 9000.00 = 9,000.00 (English)
  • 9000,00 = 9 000,00 (Swedish)

When pasting an amount in the input field, the value shall get automatically formatted according to SEB’s formatting rules.

 

Periods and ranges

In time periods and other ranges, we use short dashes (en dash). There should be no spaces before or after the dash.

Date ranges

In English
  • 3–16 May 2023
  • 26 April–3 May 2023
  • 28 December 2023–6 January 2024
In Swedish
  • 3–16 maj 2023
  • 26 april–3 maj 2023
  • 28 december 2023–6 januari 2024

Dates in body text

In English
  • The offer is valid from 3 to 16 May 2023.
  • The offer is valid from 26 April to 3 May 2023.
  • The offer is valid from 28 December 2023 to 6 January 2024.
In Swedish
  • Erbjudandet gäller från 3 till 16 maj 2023.
  • Erbjudandet gäller från 26 april till 3 maj 2023.
  • Erbjudandet gäller från 28 december 2023 till 6 januari 2024.

Amounts, years, hours, pages etc.

In English
  • You can apply for 20,000–150,000 kronor.
  • During the global financial crisis of 2007–2008.
  • We are open 10–12. See pages 45–52.
In Swedish
  • Du kan ansöka om 20 000–150 000 kronor.
  • Under den globala finanskrisen 2007–2008.
  • Vi har öppet 10–12.
  • Se sidorna 45–52.

Do's and don'ts

Do

In the phrases betweenand … and fromto …, it’s standard to retain the word and or to instead of using an en dash, to maintain parallel construction in the sentence. Or use the en dash instead of between/and respectively from/to.

In English
  • You can apply for between 20,000 and 150,000 kronor.
  • We are open from 10 to 12.
In Swedish
  • Du kan ansöka om mellan 20 000 och 150 000 kronor.
  • Vi har öppet från 10 till 12.
Or:
In English
  • You can apply for 20,000–150,000 kronor.
  • We are open 10–12.
In Swedish
  • Du kan ansöka om 20 000–150 000 kronor.
  • Vi har öppet 10–12.

 

Don’t

In English
  • You can apply for between 20,000–150,000 kronor.
  • We are open from 10–12.
In Swedish
  • Du kan ansöka om mellan 20 000–150 000 kronor. (English)
  • Vi har öppet från 10–12. (Swedish)

 

Business Arena

Local adaptions in Business Arena

If users have English chosen as language, they are able to change what format they want the channel to use for date and numbers. The users set this in the channel settings component. They can choose freely between the following formats:

Date

  • DD/MM/YYYY
  • DD.MM.YYYY
  • YYYY-MM-DD

Number

  • 100,000,000.00
  • 100 000 000,00
  • 100.000.000,00

The value that will be visible to MFEs will be according to locale, e.g. if Date setting is set as "DD.MM.YYYY" in the UI, then the API will set "da-DK". It is then up to the MFE to set the correct date format in their MFE. We recommend using short date* (referred to date numbers only in Design Library) in this link: https://www.intl-explorer.com/DateTimeFormat?locale=da-DK and this for number format: https://www.intl-explorer.com/NumberFormat/Currency?locale=sv-SE.

We have gathered the formats in the table below.

overview

 

More info

For more information: Business arena - Settings for Date and Number (Confluence)

 

*Locale is a way of grouping the user's language, region and any special variant preferences that the user wants to see in their user interface. Usually a locale consists of at least a language and a region. E.g language could be "en" for English language and the region "GB" that stands for Great Britain region (since the English language is used in other countries as well).

 

Related patterns & components

Page last updated

Feedback

Was this helpful?