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.

Micro-frontend

When you are going to create a micro-frontend page, you need know what guidelines there are for an internal or/and an external shell.

Guidelines

Use the shell guidelines

  • Use the same grid & responsiveness as the current channels.
  • The shells are responsible for the first level in the navigation, the Micro frontend owner are responsible for the second level (when you click on the first level) and the structure for the navigation. It’s important to collaborate between the other Micro frontend owners if you are under the same first level.
  • Think about what page type you are building and use the taxonomy & page types for help.
  • Present the information in the right order, read about the page anatomy & zones.

Shell functionality

The shells share common functionality as much as possible if they have the same need, but there is also separate functionality for each shell.

Common components

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 components

Customer selector

In the Nexus shell you’ll find a Customer selector. The employee can start to write in letters/numbers (name, social security number, org.name/number) for a customer and a relevant search result will appear. When the employee has found the right customer, he/she can click on the whole customer area.

  • The shell is responsible for the Customer selector component.

Page design

Start page

Nexus is collaborating with other teams like Advisory to find the best content for our employee needs.

  • The shell is responsible for the information on the start page. 

Breadcrumbs

  • The shell is responsible for the breadcrumbs.
  • See guidelines and specifications for Breadcrumbs.

Header tags

Implementation of headings is especially important for people using assistive technologies. Web content must be semantically structured to be programmatically determinable in a meaningful way.

  • Heading level 1 will be provided by the shells, but the micro-frontend owner is responsible for the name of the heading level 1.
  • Headings from level 2 and higher is up to the micro-frontend owner.
  • Read more about this in WCAG Layers of Guidance.

Footer links

  • The shell is responsible for the footer links.

Slide-out

  • The shell is responsible to develop a Slide-out for the Micro frontend pages, so they can call on this function when it’s needed.
  • See guidelines and specifications for Slide-out.

Take-over

  • The shell is responsible to develop a Take-over for the Micro frontend pages, so they can call on this function when it’s needed.
  • See guidelines and specifications for Take-over.
FAQ

CSS

Question

What is the recommendation from the shells when it comes to making sure that any CSS spills over from a MFE up to the shell? 

Answer

MFE's use unique classes on their base node in MFE DOM and wraps all CSS within it. This protects it from any "spillage".

 

Subsections

Page last updated

Feedback

Was this page helpful?