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.

List

The simplest way of listing data in an orderly fashion with labels and associated data.

Guidelines

Short description

When there is a larger number of entries in the list, they may be grouped under a separate label, creating a group.

When and how to use it

Lists are used when the added functionality of tables are not required.

Behaviour

When there is sufficient space, data is listed to the right of the label, but in smaller containers, such as a slide-out, it may be displayed the same was as done in a mobile device with the label above the data. See examples below.

Do's and don'ts

 

Examples

1. Left-aligned data

When the list is wide, the data (=column to the right) is aligned to the left.

2. Label above data

When the device is smaller, you can place the label above the data, both aligned to the left..

3. Right-aligned data

In this example, when the space for the list is smaller, the data is aligned to the right.

Specification

Specification

The list component inherits measurements from tables in regards to line-heights, colours, etc.

Desktop

 

Mobile

Page last updated

Feedback

Was this page helpful?