Sticky button bar

This is a white bar that contains buttons and sticks to the bottom when scrolling.

Short description

The sticky bottom bar can be used in both a desktop and a mobile context to give the user the fastest call-to-action.

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

When and how to use it

Use the sticky bottom bar when a call-to-action must be visible at all times. 

Behaviour

The sticky bottom bar is presented at the bottom. There is a black shadow that gives the impression of the bar floating on top of the content.

Particularily useful when designing web pages that will be integrated inside an app.

The (primary) button component is placed to the right.

Do's and don'ts

  • The sum bar is white. Do not use other colours.

Specification

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

Above: Sticky button bar in mobile

States

No change