Inline help

inline help more information info callout

Introduction

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.

Styleguide

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

Collapsed

Context help collapsed

Expanded

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.

Styleguide

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

Arrow

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

Dimmed background

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

Animation

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