Sticky summary bar
This is a white bar that sticks to the top when scrolling.
Component meta
Component identifier
- component-stickysummarybar
Design version
- 2019-01-29
Design principles
- Trigger insight
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
- White