Banners

We use a banner to display information to the user that isn't critical. A banner should be displayed at the top of the screen or above the card component to set it in context of the information or the issue. The banner can include a button for a call to action but does not necessarily need it. A user action is required to dismiss the banner – it should only be dismissable if it's not very important.

 
 
General CSS for banners

.banner {
  padding: 20px 48px 20px 16px;
  border-radius: 3px;
  border-left: 4px solid;
}

.banner .banner-indicator {
  margin: -3px 16px 0 0;
}
 
.banner .banner-close {
  position: absolute;
  top: 20px;
  right: 16px;
  color: #72808e;
  cursor: pointer;
}

Banner variations

The banner can have a different color coding to indicate the importance to the user. Blue – for information, which does not require an action, green for a completed operation, yellow as a notification which needs attention and red as a warning which requires a prompt user action to resolve a critical issue.

Info banner variations

 

 
 
Success banner variations

 

 
 
Warning banner variations

 

 
 
Error banner variations

 

 
 
Additional CSS for banner variations

.banner.banner-info {
  color: #0292d2;
  border-left-color: currentColor;
  background: #ebfaff;
  box-shadow: 0 0 0 1px rgba(24, 97, 130, .1), 0 2px 5px rgba(24, 97, 130, .05), 0 1px 12px rgba(24, 97, 130, .1);
}
 
.banner.banner-success {
  color: #03bc9d;
  border-left-color: currentColor;
  background: #e9fcf3;
  box-shadow: 0 0 0 1px rgba(42, 113, 101, .1), 0 2px 5px rgba(42, 113, 101, .05), 0 1px 12px rgba(42, 113, 101, .1);
}
 
.banner.banner-warning {
  color: #ffca5a;
  border-left-color: currentColor;
  background: #fffbed;
  box-shadow: 0 0 0 1px rgba(171, 124, 24, .1), 0 2px 5px rgba(171, 124, 24, .05), 0 1px 12px rgba(171, 124, 24, .1);
}

.banner.banner-error {
  color: #f16b8b;
  border-left-color: currentColor;
  background: #fff3f4;
  box-shadow: 0 0 0 1px rgba(148, 77, 94, .1), 0 2px 5px rgba(148, 77, 94, .05), 0 1px 12px rgba(148, 77, 94, .1);
}