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.

Page anatomy & zones

The content area is divided into three zones that contain different types of content depending on its function.

In larger viewports the layout of the zones will change and zone 3 will move up next to zone 2. See more on the page about Grid & responsiveness.

Zone 1: Header

The section is responsible for orientation and quick introduction.

The zone is divided into these features:

  • Backdrop (optional). May be an image, colour, fifth element or left blank (will then receive the background tint as default). The plan is to replace the backdrop with a black header in all shells, as in the example images above
  • Page title. A name of the page or sometimes a group of pages.
  • Introduction (optional). May be used to give an introduction or description of a product or explain features of the page
  • Notifications. Here users are notified about items they need to act upon, e.g. signing a payment.
Tech stuff

The zone is not a part of the module/spa that each project develops. Instead, each page needs to supply the shell with information such as header and introduction.

The notifications show content form NoteHub.

Zone 2: Main content

The main stage, where a module or widgets present the customers data.

  • This is the area where you as a designer and/or product owner develops the views needed for the specific area.
  • The layout is further detailed in different page types that keeps us coherent across the site. See more under Taxonomy & pagetypes.
Tech stuff

In this area the spa/micro site is hosted

Zone 3: Explore

The zone presents information that may be the next step for the user. This may be a promotional offer, or simply links to related pages/functions.

  • Some content may be presented based on the page’s purpose while other content may be selected based on the customer or his/hers financial situation. For example, a page about accounts may show information about what services you could connect to your account, but if you do not have any accounts, it may instead promote what accounts the bank can offer you. Visually this zone will borrow its style from public web being more bold and loud.
Tech stuff

The zone content is handled by the shell, much in the same way as promotional messages are handled in current IBx (“puffarna” in Swedish).

Example

 

Subsections

Page last updated

Feedback

Was this page helpful?