mixin alert(clazz, icon, title, subtitle, actions)
  div(class=('notif notif--' + clazz))
    div.notif__content
      i.material-icons.notif__icon #{icon}
      div
        h1.notif__title #{title}
        span.notif__subtitle #{subtitle}
    if (actions.length > 0)
      .notif__actions
        each action in actions
          a.notif__action(href=action.link data-tooltip=(action.tooltip ? action.tooltip : null))
            i.material-icons #{action.icon}

+alert('success', 'check', 'Upload complete', 'Woohoo!', [{link: '#', icon: 'link', tooltip: 'Get link'}])
+alert('error', 'error', 'Upload failed', 'Sorry about that.', [{link: '#', icon: 'refresh', tooltip: 'Retry'}, {link: '#', icon: 'info', tooltip: 'Error info'}])
View Compiled 
body {
  font-family: 'Signika Negative', Roboto, sans-serif;
  font-size: 14px;
  
  background: #434343;
}

.notif {
  width: 420px;
  height: 150px;
  margin: 40px auto;
  
  color: white;
  
  border-radius: 4px;
  box-shadow: 0 8px 12px rgba(0,0,0,0.3);
  overflow: hidden;
  
  &--success {
    background: #39cccc;
  }
  
  &--error {
    background: #d35757;
  }
  
  &__icon {
    padding: 20px;
    
    font-size: 56px;
  }
  
  &__content,
  &__actions {
    height: 100%;
    float: left;
  }
  
  &__content {
    width: 85%;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  &__title {
    margin-bottom: 0.2em;
    
    font-size: 2em;
  }
  
  &__actions {
    width: 15%;
    display: flex;
    flex-direction: column;
    
    background: rgba(0, 0, 0, 0.4);
    
    > * {
      flex-grow: 1;
    }
  }
  
  &__action {
    position: relative;
    
    text-align: center;
    text-decoration: none;
    
    &:hover {
      background: rgba(0, 0, 0, 0.4);
      
      &:after {
        display: block;
      }
    }
    
    &:after {
      content: attr(data-tooltip);
      display: none;
      position: absolute;
      right: 110%;
      top: 50%;
      margin-top: -1em;
      padding: 0.5em 1em;
      
      text-align: center;
      white-space: nowrap;
      
      background: rgba(20,20,20,1);
      border-radius: 4px;
    }
    
    > * {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -12px;
      margin-left: -12px;
      
      font-size: 24px;
    }
  }
  
  a {
    color: inherit;
  }
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/icon?family=Material+Icons
  2. https://fonts.googleapis.com/css?family=Signika+Negative:400,300

External JavaScript

This Pen doesn't use any external JavaScript resources.