Grid & responsiveness

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

Grid

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.