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.

Section expander

A section expander, or toggle block, is used to let the visitor expand sections with more detailed information in regards to the content they are reading.

Guidelines

Short description

A section expander, also called toggle block in Epi, is used to truncate one or more sections from a longer combined section of text, images or other suitable information that is not needed to be visible directly for the user.

When and how to use it 

Use a section expander to minimise the length of a long section in a page. This gives us the possibility to present more content if the user chooses to, without leaving the actual context. For example, detailed information about how an ISK account works - information that is relevant, but probably only to a few of the visitors.

Behaviour

Make sure the component follow-up on a context (as oppose to being used stand-alone). 

Note that the arrow is pointing in the direction the content is moving (up or down) and is animated when clicked on.

Do's and don'ts 

  • Do use as part of a context
  • Do use it for additional “detailed” information, not to save space

 

  • Don’t use it alone, or when the additional information adds a insignificant amount of additional space

 

Examples

Specification

Measurements

States

  • Hover: Dark blue 2
  • Arrow: Dark blue 2
  • Line: Grey 200 
  • Text: Default inline link

Colours

  • Dark blue 2
  • Grey 200

Page last updated

Feedback

Was this helpful?