Sticky summary bar

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

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

Do

  • Use the bar for dynamic content

Don't

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

Specification

  • Height: 90 px
  • Width: 100%
  • Background: #FFFFFF
  • Shadow (bottom): X: 0px, Y: 2px, Blur: 5px, Spread: 0
  • Shadow colour: #000000 Alpha: 0,25 

Above: Sticky bar with label, value and button

Above: Sticky bar with label, value in two columns

States

No change 

Sticky sumbar in a mobile context