Добавил media

projectConfig.json

@@ -49,7 +49,8 @@
     "nouislider": [],
     "off-canvas": [],
     "burger": [],
-    "progress": []
+    "progress": [],
+    "media": []
   },
   "addCssBefore": [
     "./src/scss/variables.scss",

src/blocks-demo.html

@@ -1374,7 +1374,7 @@
 
     </section>
 
-    <section class="blocks-library__item  blocks-library__item--menusep" id="progress" data-name=".progress">
+    <section class="blocks-library__item" id="progress" data-name=".progress">
 
       <h2 class="blocks-library__item-title">Прогресс</h2>
 
@@ -1393,6 +1393,52 @@
 
     </section>
 
+    <section class="blocks-library__item  blocks-library__item--menusep" id="media" data-name=".media">
+
+      <h2 class="blocks-library__item-title">Медиа-компонент</h2>
+
+      <article class="media">
+        <div class="media__picture">
+          <img class="thumb" src="img/joker.jpg" alt="" width="150">
+        </div>
+        <div class="media__body">
+          <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Запятой если рыбного всемогущая выйти за но, то щеке, одна свое снова сбить вопроса? Семь свой, его это. Силуэт!</p>
+        </div>
+      </article>
+
+      <article class="media">
+        <div class="media__picture">
+          <img class="thumb" src="img/joker.jpg" alt="" width="150">
+        </div>
+        <div class="media__body">
+          <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Запятой если рыбного всемогущая выйти за но, то щеке, одна свое снова сбить, вопроса? Семь свой, его это. Силуэт!</p>
+
+          <article class="media">
+            <div class="media__picture">
+              <img class="thumb" src="img/joker.jpg" alt="" width="150">
+            </div>
+            <div class="media__body">
+              <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Запятой если рыбного всемогущая выйти за но, то щеке, одна свое снова сбить, вопроса? Семь свой, его это. Силуэт!</p>
+            </div>
+          </article>
+
+        </div>
+      </article>
+
+      <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">
+          <pre class="code">
+            <code>&lt;article class="media"></code>
+            <code>  &lt;div class="media__picture">...&lt;/div></code>
+            <code>  &lt;div class="media__body">...&lt;/div></code>
+            <code>&lt;/article></code>
+          </pre>
+        </div>
+      </div>
+
+    </section>
+
 
 
 

src/blocks/media/media.html

+<!--DEV
+
+Для использования этого файла как шаблона:
+
+@ @include('blocks/media/media.html')
+
+(Нужно убрать пробел между символами @)
+Подробнее: https://www.npmjs.com/package/gulp-file-include
+
+-->
+
+<div class="media">content</div>

src/blocks/media/media.scss

+// В этом файле должны быть стили только для БЭМ-блока media, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Не пишите здесь другие селекторы.
+
+.media {
+  display: flex;
+  margin-top: $line-height;
+  margin-bottom: $line-height;
+
+  &__picture {
+    flex-shrink: 0;
+    margin-right: 1em;
+  }
+
+  &__body {
+    flex-grow: 1;
+
+    *:first-child {
+      margin-top: 0;
+    }
+  }
+}