<section class="message">
  <header></header>
  <i></i>
  <h2>
    <span>Hello!</span> 
    This is the default look
  </h2>
</section> 

<section class="message error">
  <header></header>
  <i></i>
  <h2>
    <span>Error!</span> 
    A problem has occured! 
  </h2>
</section> 

<section class="message warning">
  <header></header>
  <i></i>
  <h2>
    <span>Warning!</span> 
    Are you sure you wanna do this? 
  </h2>
</section> 

<section class="message neutral">
  <header></header>
  <i></i>
  <h2>
    <span>Tip</span> 
    This might help you! 
  </h2>
</section> 

<section class="message success">
  <header></header>
  <i></i>
  <h2>
    <span>Success</span> 
    You did something good!
  </h2>
</section> 

<section class="message uhm">
  <header></header>
  <i></i>
  <h2>
    <span>uhm....</span> 
    In case something went to $*#@
  </h2>
</section> 

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");

$default:#9E9E9E;
$error:#D50000;
$warning:#FF6F00;
$neutral:#448AFF;
$success:#388E3C;
$uhm:#c1610d;

$light:#eee;
$dark:#222;

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  font-family: 'Roboto';
  padding: 0;
  margin: 0;
  font-size:16px;
  overflow:hidden;
}

.message{
  background:$light;
  box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.31);
  border-radius:1em;
  overflow:hidden;
  display:flex;
  flex-wrap:wrap;
  max-width:40em;
  margin:2em auto;
  
  header {
    background:$default;
    width:100%;
    padding:.5em;
  }
  
  i:after{
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content:'\f128';
    font-style:normal;
    color:$light;
    background:mix($dark, $default, 85%);
    padding:1em .75em;
    font-size:1.25em;
    display:block;
    width:2.5em;
    height:100%;
    text-align:center;
  }
  
  h2{
    margin:.75em;
    font-size:1.25em;
    position:relative;
    display:block;
    width:calc(100% - 2.5em - 1.5em);
    
    span {
      color:$default;
    }
    
    &:after {
      content:'';
      border-bottom:.1em solid $default;
      width:100%;
      height:100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}

.error {
  header {
    background:$error;
  }
  
  i:after{
    background:mix($dark, $error, 85%);
    color:lighten($error, 25%);
    content: "\f12a";
  }
  
  h2 {
    span {
      color:$error;
    }
  
    &:after {
      border-bottom:.1em solid $error;
    }
  }
}

.warning {
  header {
    background:$warning;
  }
  
  i:after{
    background:mix($dark, $warning, 85%);
    color:lighten($warning, 25%);
    content: "\f071";
  }
  
  h2 {
    span {
      color:$warning;
    }
  
    &:after {
      border-bottom:.1em solid $warning;
    }
  }
}

.neutral {
  header {
    background:$neutral;
  }
  
  i:after{
    background:mix($dark, $neutral, 85%);
    color:lighten($neutral, 25%);
    content: "\f05a";
  }
  
  h2 {
    span {
      color:$neutral;
    }
  
    &:after {
      border-bottom:.1em solid $neutral;
    }
  }
}

.success {
  header {
    background:$success;
  }
  
  i:after{
    background:mix($dark, $success, 85%);
    color:lighten($success, 25%);
    content: "\f058";
  }
  
  h2 {
    span {
      color:$success;
    }
  
    &:after {
      border-bottom:.1em solid $success;
    }
  }
}

.uhm {
  header {
    background:$uhm;
  }
  
  i:after{
    background:mix($dark, $uhm, 85%);
    color:lighten($uhm, 25%);
    content: "\f2fe";
  }
  
  h2 {
    span {
      color:$uhm;
    }
  
    &:after {
      border-bottom:.1em solid $uhm;
    }
  }
}