title: Alert - offset icon, header and body text
body: <p>I am trying to create a system alert message that was mocked up (only grahpically) to looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/UBxUl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UBxUl.png" alt="enter image description here"></a></p>
  
  <p>However, I have not been able to do so as I am not much of a front-end developer/UX person, so I am reaching out to the community for input.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="apparent-message warning-message"&gt;
    &lt;div class="message-container"&gt;
      &lt;div class="apparent-message-icon fa fa-fw fa-2x fa-exclamation-triangle"&gt;
          &lt;/div&gt;
          &lt;div class="content-container"&gt;
              &lt;div class="message-header"&gt;
                  &lt;span&gt;Header&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="message-body"&gt;Message&lt;/div&gt;
              &lt;div class="message-action"&gt;View&lt;/div&gt;
          &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.apparent-message {
      height: 75px;
      width: 75%;
      border-style: solid;
      border-width: 1px;
      margin-bottom: 50px;
  
      .apparent-message-icon {
          font-size: 3em;
          color: #fff;
          padding: 15px 0px 0px 0px;
          .fa-2x{
              box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.45);
          }
          text-shadow: 1px 1px 10px #000;
          width: 100%;
          height: 100%;
      }
  }
  
  .message-container {
      &gt; div {
          display: inline-block;
      }
      .icon-col {
          width: 7%;
      }
      .content-container {
          width: 92.4%;
          height: 98%;
          padding-left: 15px;
          background-color: #fff;
          text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
          .message-header {
              margin-top: 10px;
              font-size: 20px;
          }
          .message-body {
              margin-top: 10px;
              font-size: 14px;
              color: #515151;
          }
          .message-action {
              position: absolute;
              right: 30px;
              bottom: 10px;
          }
      }
  }
  
  .warning-message {
      background-color:#f39b0e;
      border-color: #f39b0e;
  }
  
  .info-message {
      background-color:#3598db;
      border-color: #3598db;
  }
  
  .success-message {
      background-color:#43a046;
      border-color: #43a046;
  }
  
  .error-message {
      background-color:#e1374c;
      border-color: #e1374c;
  }
  </code></pre>
  
  <p>Here is an accompanying JSFiddle with an attempt to accomplish this.</p>
  
  <p><a href="https://jsfiddle.net/latchkostov/dLL1r1ap/" rel="nofollow noreferrer">https://jsfiddle.net/latchkostov/dLL1r1ap/</a></p>