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.

Channel components

To create a cohesive experience and visual consistency across our shells and channels we share some common components. These components are described here with their specific attributes and descriptions on how they behave in the context of our shells.

All channels

Slide-out

How and when to choose to use a slide-out modal are described in detail under Components > modals.

When building a slide-out modal for our shells (Internetbank Private, Business Arena and Nexus), it is the shell team that build and host the modal. The team that is using the modal for their content calls on the modal from the shell. Information on how to do this will soon be found in Developer Garden.

Examples
Normal slide-out

Normal slide-out

Large slide-out

Large slide-out

Mobile slide-out

Mobile slide-out

Specification
  • Normal slide-out used in our shells have a fixed width in larger viewports (desktop and tablet): 512 px
  • Large slide-out a wider version of the normal slide-out may be used in some cases (i.e. preview of pdf): 768 px
  • In mobile viewports the slide-outs become a full takeover or slide-up: 100% width
Shell slide-out specification

Shell slide-out specification

 

Support corner

Will be described soon.

 

Navigation

The navigation structure is used by all shells, but Nexus are also using the navigation to view out the customer holdings.

  • The shell is responsible for the navigation component
  • Read more about Navigation.

 

Profile selector

The Profile selector is used by all shells. When you expand the Profile selector, you’ll find settings for the customer/employee.

  • The shell is responsible for the Profile selector component. 

 

Language selector

You’ll find the Language selector under the Profile selector. This is a common functionality for all shells. The customer/employee selects a language and the selection appears on all connected Micro frontend pages. It’s the Micro frontend owner’s responsibility to build the language choices that connects to the shells Language selector.

  • The shell is responsible for the Language selector component.
  • See guidelines and specifications for Language selector

Nexus

Customer selector

Customer selector is a feature of the Nexus shell where SEB employees can search for SEB customers. The component is placed within the search input field the top of the Nexus shell.

Behaviour

Start to write a name or social security number for SEB customer to start the search. You can search for several things, like "Anna Alingsås" and see all Anna's in Alingsås. Select a customer by clicking on the row of the customer's name in the customer selector. The customer selector will show 30 customers at a time. To load more customers, you scroll down.

Desktop

Desktop

Tablet

Tablet

Mobile

Mobile

 

Subsections

Related patterns & components

Page last updated

Feedback

Was this helpful?