Information bar componentAvailable since EcoComposer 2.2

Classical information bar examples :

First information

Second information

First information

Second information

Third information

First information

Second information

First information

Second information

Third information

The defaults values are :

'info-bar--block--padding' : 1rem * theming.$font-size .5rem * theming.$font-size,
'info-bar--background-image' : 'info-bar--background-image',
'info-bar--box-shadow' : 'info-bar--box-shadow',
'info-bar--primary--color' : 'info-bar--primary--color',
'info-bar--primary--text-shadow' : 'info-bar--primary--text-shadow',
'info-bar--error--background-color' : 'info-bar--error--background-color',
'info-bar--block--border-color' : 'info-bar--block--border-color',
'info-bar--block--color' : 'info-bar--block--color',
'info-bar--block--background-color' : 'info-bar--block--background-color',
'print' : false,
'suffix' : '',
'themes' :  (
  'light' : (
    'default--info-bar--background-image' : linear-gradient(45deg, hsl(170deg 100% 50%), hsl(190deg 100% 50%)),
    'default--info-bar--box-shadow' : 0 0 30px 0 #ccc inset,
    'default--info-bar--primary--color' : #333,
    'default--info-bar--primary--text-shadow' : 0 0 3px #ccc,
    'default--info-bar--error--background-color' : #fff,
    'default--info-bar--block--border-color' : #bbb,
    'default--info-bar--block--color' : #333,
    'default--info-bar--block--background-color' : transparent
  ),
  'dark' : (
    'default--info-bar--background-image' : linear-gradient(45deg, hsl(170deg 100% 27%), hsl(190deg 100% 27%)),
    'default--info-bar--box-shadow' : 0 0 30px 0 #555 inset,
    'default--info-bar--primary--color' : #eee,
    'default--info-bar--primary--text-shadow' : 0 0 3px #ccc,
    'default--info-bar--error--background-color' : #fff,
    'default--info-bar--block--border-color' : #ccc,
    'default--info-bar--block--color' : #eee,
    'default--info-bar--block--background-color' : transparent
  )
)

We can implement it that way : 

@include informationBar.init();
@include informationBar.create();
@include informationBar.create(
  (
    'info-bar--block--padding' : 2rem 1rem,
    'suffix' : '-2'
  )
);

We can implement it that way :

<div class="suffix info-bar info-bar--top"> <button type=button class="suffix info-bar--help-cursor info-bar--block" title="First block tooltip">First block</button> <div class="suffix info-bar--block--container"> <p class="suffix info-bar--block--container--element"> First information </p> <p class="suffix info-bar--block--container--element"> Second information </p> </div> <button type=button class="suffix info-bar--help-cursor info-bar--block" title="Second block tooltip">Second block</button> <div class="suffix info-bar--block--container"> <p class="suffix info-bar--block--container--element"> First information </p> <p class="suffix info-bar--block--container--element"> Second information </p> <p class="suffix info-bar--block--container--element"> Third information </p> </div> </div>
^