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 default 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>
^