Inline help


The inline help is used to provide information in context.

Context help

Inline help example

The interactive trigger 'More...' reveals additional information. Once expanded, the 'More...' trigger is hidden. The information cannot be collapsed without a full page reload.


The 'More...' trigger is a link.


Context help collapsed


Context help expanded

Info callout

Info callout example

Info callouts are used to highlight elements and inform about their content. They are just visible for new users and automatically pop up. It is possible to show several callouts one at a time.


Info callout styles
x: 4px

Highlight area

padding: 16px

Callout area

padding: 16px
corner-radius: 3px
max-width: 612px //580px width of content + padding
background-color: #fff

Callout information

font-family: Bernina Sans Regular
font-size: 14px
color: $gray-700


width: 10px
height: 20px
background-color: #fff

Dimmed background

background-color: #gray-500
opacity: 40%


The appearance transition of the info callout should last 500ms. By clicking on the dimmed background or the button in the callout, the information will disappear again.

Info callout animation example