SeMI, our style; providing contextual info to our users

Notifications and information provision

Notification messages

Thee notification messages can be used on a meta-level when it concerns page-wide notifications, or inline, contextual to a single or group of elements.

Information notification

Page-wide

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque vero temporibus tenetur ex ad earum quam assumenda? Atque ipsum laudantium quos, nemo, facere fugiat tempora tempore libero perspiciatis cum ex?

HTML code snippet

<section class="notify-info" id="notify-info"> <div> <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>. Atque vero temporibus tenetur ex ad earum quam assumenda? Atque ipsum laudantium quos, nemo, facere fugiat tempora tempore libero perspiciatis cum ex?</p> </div> <p><a class="close" href="#notify-info" onClick="hide('notify-info')">Close</a></p> </section>

Contextual inline

HTML code snippet

<section class="notify-info notify--contextual" id="notify-info--contextual"> <div> <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>. Atque vero temporibus tenetur ex ad earum quam assumenda? Atque ipsum laudantium quos, nemo, facere fugiat tempora tempore libero perspiciatis cum ex?</p> </div> <p><a class="close" href="#notify-info--contextual" onClick="hide('notify-info--contextual')">Close</a></p> </section>

Warning and error notification

Page-wide

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut ratione voluptatum itaque, laborum perferendis iure atque voluptate. Quae harum doloremque suscipit. Commodi natus, autem asperiores voluptas enim, labore accusamus maxime.

HTML code snippet

<section class="notify-warning" id="notify-warning"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <strong>Ut ratione voluptatum itaque</strong>, laborum perferendis iure atque voluptate. Quae harum doloremque suscipit. Commodi natus, autem asperiores voluptas enim, labore accusamus maxime.</p> </div> <p><a class="close" href="#notify-warning" onClick="hide('notify-warning')">Close</a></p> </section>

Contextual inline

HTML code snippet

<section class="notify-warning notify--contextual" id="notify-warning--contextual"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <strong>Ut ratione voluptatum itaque</strong>, laborum perferendis iure atque voluptate. Quae harum doloremque suscipit. Commodi natus, autem asperiores voluptas enim, labore accusamus maxime.</p> </div> <p><a class="close" href="#notify-warning--contextual" onClick="hide('notify-warning--contextual')">Close</a></p> </section>

Success notification

Page-wide

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ad, necessitatibus veniam reiciendis non! Tempora, fugit, ratione? Ipsa in voluptatum non, vitae totam ad consequuntur magnam quia maiores nobis delectus.

HTML code snippet

<section class="notify-success" id="notify-success"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <em>Id ad</em>, necessitatibus <strong>veniam reiciendis</strong> non! Tempora, fugit, ratione? Ipsa in voluptatum non, vitae totam ad consequuntur magnam quia maiores nobis delectus.</p> </div> <p><a class="close" href="#notify--contextual" onClick="hide('notify-success')">Close</a></p> </section>

Contextual inline

HTML code snippet

<section class="notify-success notify--contextual" id="notify-success--contextual"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <em>Id ad</em>, necessitatibus <strong>veniam reiciendis</strong> non! Tempora, fugit, ratione? Ipsa in voluptatum non, vitae totam ad consequuntur magnam quia maiores nobis delectus.</p> </div> <p><a class="close" href="#notify-success--contextual" onClick="hide('notify-success--contextual')">Close</a></p> </section>