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
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
- 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
Sticky sumbar in a mobile context