The hybris techne component library is rooted in Bootstrap 3 and includes custom UI components used across YaaS. It doesn't include any basic Bootstrap components we haven’t customized, even though you'll find these elements also across YaaS. If you’re looking for something basic for your UI, check the Bootstrap components to help build out your pages.

1 Alerts, Errors & Notifications

Messaging within the application is color-coded to emphasize the level of urgency, but the goal is to limit the number of colors overall to reduce cognitive load. In some cases alerts will allow for dismissal and in other cases alerts must be acted upon in order to complete a task. The color-coded system should allow at-a-glance understanding of allowable actions.

1.1 Alerts

Alert
Use to let people know there is something happening, but you can dismiss and act upon it later if needed, e.g. a service subscribed to needs updating. It’s recommended to use the dark blue treatment for Alerts. Alerts should display until they are dismissed by clicking or tapping X.
Notification
Use to let people know about some information or action that happened, but no action is needed on their part, e.g. the service will be deprecated at a future date. It’s recommended to use the dark blue treatment for Notifications. Notifications should display for 3 seconds, and disappear on their own.
Error
Use to let people know there is an issue that needs attention immediately, e.g. an authorization is expired and no work can proceed until it’s resolved. It’s recommended to use the red treatment for Errors. Errors should display until they are dismissed by clicking or tapping X.

Alert: Blue - confirmation/notification (disappears on it's down)
Notification: Orange - warning but can be dismissed without taking action (user closes)
Error: Red - action can't be taken (user closes) 

 <div class="alert alert-success alert-dismissible" role="alert">
     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
     </button>
     Well done! You successfully read this important alert message. <a href="#">Link</a>
 </div>
 <div class="alert alert-warning alert-dismissible" role="alert">
     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
     </button>
     Warning! There is something going on. <a href="#">Link</a> 
 </div>
 <div class="alert alert-danger alert-dismissible" role="alert">
     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
     </button>
     Stop! This is all wrong. <a href="#">Link</a> 
 </div>