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

This is a white bar that sticks to the top when scrolling.

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.

In the sticky bar container, components such as label, value and button can be used.

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 need to be aware that a change is affecting the values/choices in the summary bar 

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

  • Use the bar for dynamic content

 

  • The sum bar is white. Do not use other colours.
  • Avoid using more than one sticky component at the same time

Examples

Sticky sumbar in a mobile context

Specification

Measurements

  • Height: 90 px
  • Width: 100%

Above: Sticky bar with label, value and button

Above: Sticky bar with label, value in two columns

Shadow

  • Shadow (bottom): X: 0px, Y: 2px, Blur: 5px, Spread: 0
  • Shadow colour: #000000 Alpha: 0,25 

Colours

  • Background: White

Page last updated

Feedback

Was this page helpful?