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.

Grid & responsiveness

This section is about how to think about grid and responsiveness when designing for our common shells.

Grid

Based on Boostrap

The grid is based on Bootstrap but modified to align with the SEB experience.

The grid that we use is fluid* and consists of 12 columns, with a gutter of 1 rem (16px). It uses an 8 point system that defines margins and paddings for visible elements in the UI. An exception is that the 12 columns are visually translated to a 4 column grid at the 768px breakpoint and below.

Breakpoints

This is how the breakpoints affect the content:

The example below shows how the different page zones (zone 2 & 3) are affected and placed in the grid for each breakpoint. All white boxes are marked with a number that corresponds to its zone inherence.

For more details about each zone, visit #link title#. The grid columns are marked with a semitransparent red colour in each image.

A few items are excluded from the grid, specifically the side-menu and the docked notification feed. The side-menu is visible at 1440px for Business Arena and 1280px for Internetbanken Privat. At a width of 2560px and above the notifications feed is made visible and docked to the right side of the viewport.

As more space is available at wider viewports, the content should realign to make the best use of it.

  • Up to 768; widgets & modules accommodate the whole viewport/page width.
  • 768 to 1024; widgets & modules can be accommodated on two columns.
  • 1024 to 1680; 3 columns
  • 1680 to 2560; 4 columns
  • 2560 and above; 6 columns

Fluid

A fluid grid is defined by the specified number of columns that are proportional to browsers viewport width or height instead of fixed pixel dimensions. For example; when a browser window is resized, the elements within will adjust their widths and/or heights accordingly to their container.

Subsections

Page last updated

Feedback

Was this page helpful?