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

About grid and responsiveness when designing specifically for our common shells.

Grid

Columns, margins, and gutters depend on the actual width of a browser's viewport, to adapt content to any possible screen size with set UI breakpoints. The grid is based on Bootstrap and modified to align with the SEB experience.

The grid is based on a fluid 12-column grid. If there is a sidebar, it is fixed and excluded from the 12 columns in the grid. SEB works with a fluid grid which is defined by the specified number of columns that are proportional to the browser's 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.

Read more about the general pattern grid and spacing.

Responsiveness

Our users want to be able to choose how they want to use our channels, therefore all Micro Frontend pages need to be responsive in Business Arena, IBP and Nexus.

Breakpoints

It is common to think of the breaking points as specific devices, but at SEB we think of breaking points and resolution as an area of space that is not necessarily tied to one specific device. The main reason for this is that one breakpoint can be a possible viewport for several devices. For example, a user can resize the browser window on a desktop to fit several browser windows in one screen.

Even though the viewport has a size of e.g 1200 pixels, the area that can be used for design is less because there is a scrollbar. The size of the scrollbar differs depending on the browser but you should always leave at least 1,875 rem (30px) on the right-hand side.

Fluid

SEB works with a fluid grid which is defined by the specified number of columns that are proportional to the browser's 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

Related patterns & components

Page last updated

Feedback

Was this helpful?