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.

Sticky summary bar

A white bar that sticks to the top when scrolling.

Sticky summary bar

Guidelines

Short description

The sticky bar can be used in both a desktop and a mobile context to give the user an overview. The content is always updated and related to the choices made in the main content.

When and how to use it

Use the sticky bar when the value can be changed in-page to give the user a sense of control of what the choices are. The user needs to be aware that a change is affecting the values/choices in the summary bar.

The bar container can hold components such as label, value and button.

Behaviour

The sticky bar is presented at the top. It can appear when needed and then become sticky on scroll. There is a black shadow that gives the impression of the bar floating on top of the content.

Do's and don'ts

Do
  • Use the bar for dynamic content
Don't
  • The bar is white. Do not use other colours.
  • Avoid using more than one sticky component at the same time

Examples

Mobile

Mobile

Desktop without the bar

Desktop without the bar

Desktop with the bar

Desktop with the bar

 

Writing

-

 

Accessibility

-

 

Specification

 

Page last updated

Feedback

Was this helpful?