Добавил алерт с предупреждением

src/blocks-demo.html

@@ -77,7 +77,7 @@
 
       <h2 class="blocks-library__item-title">Определение мобильного устройства</h2>
 
-      <p class="alert  alert--danger">Зависмость от <a href="https://github.com/kaimallea/isMobile">isMobile</a>. Последний должен быть включен в сборку (есть по умолчанию) или подключен к странице иным образом.</p>
+      <p class="alert  alert--warning">Зависмость от <a href="https://github.com/kaimallea/isMobile">isMobile</a>. Последний должен быть включен в сборку (есть по умолчанию) или подключен к странице иным образом.</p>
 
       <p>Javascript, добавляющий на <code>&lt;html></code> класс <code>is-mobile</code>, если страница открыта с мобильного устройства. Так же, добавляются модификаторы блока с указанием типа устройства и производителя.</p>
 
@@ -294,7 +294,7 @@
         <code>&lt;/svg></code>
       </pre>
 
-      <p class="alert  alert--danger">Чтобы использовать ссылки на внешние svg-файлы со спрайтами, используйте <a href="https://www.npmjs.com/package/svg4everybody">svg4everybody</a> (включен в сборку по умолчанию).</p>
+      <p class="alert  alert--warning">Чтобы использовать ссылки на внешние svg-файлы со спрайтами, используйте <a href="https://www.npmjs.com/package/svg4everybody">svg4everybody</a> (включен в сборку по умолчанию).</p>
 
       <p>Демонстрационный контент блока (иконки стрелок):</p>
 
@@ -480,6 +480,11 @@
         Далеко-далеко за <a href="">словесными горами</a> в стране, гласных и согласных живут.
       </div>
 
+      <div class="alert  alert--warning">
+        <h1 class="alert__header">Заголовок</h1>
+        Далеко-далеко за <a href="">словесными горами</a> в стране, гласных и согласных живут.
+      </div>
+
       <div class="blocks-library__code-wrapper">
         <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
         <div class="blocks-library__code">
@@ -493,6 +498,11 @@
             <code>  &lt;h1 class="alert__header">Заголовок&lt;/h1></code>
             <code>  Далеко-далеко за &lt;a href="">словесными горами&lt;/a> в стране, гласных и согласных живут.</code>
             <code>&lt;/div></code>
+            <code> </code>
+            <code>&lt;div class="alert  alert--warning"></code>
+            <code>  &lt;h1 class="alert__header">Заголовок&lt;/h1></code>
+            <code>  Далеко-далеко за &lt;a href="">словесными горами&lt;/a> в стране, гласных и согласных живут.</code>
+            <code>&lt;/div></code>
           </pre>
         </div>
       </div>

src/blocks/alert/alert.html

@@ -15,4 +15,9 @@
   <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рукопись подпоясал деревни всеми ведущими великий, злых lorem собрал переписали лучше речью которой букв, продолжил заголовок переулка себя рукописи! Сих!</p>
 </div>
 
+<div class="alert  alert--warning">
+  <h1 class="alert__header">Нейтральное сообщение</h1>
+  <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рукопись подпоясал деревни всеми ведущими великий, злых lorem собрал переписали лучше речью которой букв, продолжил заголовок переулка себя рукописи! Сих!</p>
+</div>
+
 -->

src/blocks/alert/alert.scss

@@ -6,6 +6,7 @@ $gray-lighter:                hsl(0, 0%, 80%) !default;
 $gray-lightest:               hsl(0, 0%, 90%) !default;
 $color-success:               hsl(120, 39%, 54%) !default;
 $color-danger:                hsl(2, 64%, 58%) !default;
+$color-warning:               hsl(35, 84%, 62%) !default;
 $text-color:                  hsl(0, 0%, 10%) !default;
 $font-size--h3:               1.5em !default;
 $border-radius:               3px !default;
@@ -72,4 +73,10 @@ $border-radius:               3px !default;
       }
     }
   }
+
+  &--warning {
+    background-color: lighten($color-warning, 30%);
+    border: 1px solid lighten($color-warning, 20%);
+    color: $text-color;
+  }
 }

src/scss/variables.scss

@@ -15,6 +15,7 @@ $white:                       hsl(0, 0%, 100%);
 $color-main:                  hsl(208, 98%, 43%);
 $color-success:               hsl(120, 39%, 54%);
 $color-danger:                hsl(2, 64%, 58%);
+$color-warning:               hsl(35, 84%, 62%);