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.

Related Large

This is used to highlight a story, article, news or a product that is related to the current content, or in other ways relevant to the reader.

Guidelines

Short description

Gives the user an easy way to explore more content relevant and related to the current content they are reading. Or highlighted content on a landing or startpage.

When and how to use it

Use this block to add a relevant story, article, news or a product that is related to the current content, or in other ways relevant to the reader.

The content is fitted in cards, with good contrast to the grey background, to show that it is content living on another page. They show a glint on the content they are linked to.

The related blocks are designed to fit well together. An editor can give the user a package of related information in three different sizes, where content is placed in each type of related block size, depending on its importance or business.

Behaviour

The Large block contains an image, optional label, header, body text and link on a solid grey background. The text area can switch places, right or left aligned.

On mobile devices, the text area will float 2 rems under the picture to give the user a clear difference between the Large, Medium and Small Related blocks. Best practice is to place text area and the picture motive so they work well together. 

Do's and don'ts

  • Always give the user a headline, a glint of the preamble or body text.
  • Always link the content with a link or button.
  • Always take time to place the image and the text box so they work together. 

 

  • Use this as a block with all the information. Always link to other content. This is supposed to show a glint of content on another page.

Examples

Desktop - content to the left

Desktop - content to the right

Mobile - content to the left

All Related blocks

An overview of all of the Related blocks together

Business Arena

Exploration of Related blocks in zone 3 for Business Arena

Specification

Specification

Desktop

Mobile

States

  • Link in block is underlined on hover

 

Related patterns & components

Page last updated

Feedback

Was this page helpful?