Heads-up Banner


This kind of banner is used for information we want the users not to miss


Heads Up Small
Heads Up Medium
Heads Up Large


This banner is used to inform users about something important related to the whole service, or to a feature they are working with. Heads-up banners stay on the screen until the user dismiss them. This is to ensure the user receives the message.

We use the heads-up banner to notify users about our cookie policy, advise on the expiry date of their course in course pages and to tell about early feature.

There is a modifier (.heads-up-banner--compact) that makes the banner a smaller, more discreet version that can be used in places like the course expiry advice message shown in course steps and on the weekly todo list.

There is a modifier (.heads-up-banner--fixed) that makes the banner fixed at the bottom of the screen. This is used for the cookie banner.