Alerts & Messages
Message banners are displayed at the top of a page. Just insert the following code in a <% block name = "ribbon"> </% block> of the template. The x button uses the html element hiding utility.
fr :: Les bandeaux d’alerte s’affiche dans le haut d’une page. Il suffit d’insérer le code suivant dans la zone éditable de template <%block name="ribbon"></%block>. Le bouton x utilise l’utilitaire de masquage d’élément html.
<div class="l-bigContainer m-ribbon" id="alerte">
<div class="l-contentContainer">
<div class="l-largeur80p maxWidth">
<p class="message"> This is something you should know. </p>
<a href="" class="x-icon-link" data-hideElement="#alerte">X</a>
</div>
</div>
</div>
Colours and status levels
The default color of the message ribbon is blue (info). Colour of the ribbon can be change to fit common types of messages: .warning, .success and .danger
<div class="l-bigContainer m-ribbon warning" id="alerte">
<div class="l-contentContainer">
<div class="l-largeur80p maxWidth">
<p class="message"> You better watch out... </p>
<a href="" class="x-icon-link" data-hideElement="#alerte">X</a>
</div>
</div>
</div>
Message with choices
To add buttons to a message ribbon, you need to add the .withChoice class to the top container.
<div class="l-bigContainer m-ribbon withChoice">
<div class="l-contentContainer">
<div class="l-largeur80p">
<p class="message"> This is a message for you. <br> <strong>Do you want to.</strong></p>
<div class="btContainer">
<button type="button" class="btn btn-primary plein">yes</button>
<button type="button" class="btn btn-danger" data-hideelement="#ribbonConfirmAccount">no</button>
</div>
</div>
</div>
</div>