added text nodes

src/components/flow/Cell/index.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import * as styles from './styles.scss';
+import { TEXTS } from '~/constants/texts';
 
 import classNames = require('classnames');
 
@@ -9,6 +10,7 @@ interface IProps {
   title?: string;
   is_hero?: boolean;
   is_stamp?: boolean;
+  is_text?: boolean;
 }
 
 const Cell: FC<IProps> = ({
@@ -16,14 +18,22 @@ const Cell: FC<IProps> = ({
   height = 1,
   title,
   is_hero,
+  is_text = (Math.random() > 0.8),
 }) => (
   <div
-    className={classNames(styles.cell, `vert-${height}`, `hor-${width}`)}
+    className={
+      classNames(
+        styles.cell, 
+        `vert-${height}`,
+        `hor-${width}`,
+        { is_text },
+      )}
     style={{
       // gridRowEnd: `span ${height}`,
       // gridColumnEnd: `span ${width}`,
     }}
   >
+    {is_text && <div className={styles.text}>{TEXTS.LOREM_IPSUM}</div>}
     { title && <div className={styles.title}>{title}</div> }
   </div>
 );

src/components/flow/Cell/styles.scss

@@ -6,6 +6,7 @@
   background: $cell_bg;
   border-radius: $cell_radius;
   position: relative;
+  overflow: hidden;
 
   &:global(.is_hero) {
     .title {
@@ -16,6 +17,16 @@
   @include outer_shadow();
 }
 
+.text {
+  line-height: 1.6em;
+  font-size: 18px;
+  font: $font_18_regular;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: $gap;
+}
+
 .title {
   font: $font_cell_title;
 
@@ -49,4 +60,10 @@
   .hor-2 {
     grid-column-end: span 2;
   }
+
+  .is_text {
+    background: none;
+    padding: 10px;
+    box-shadow: inset #444 0 0 0 1px;
+  }
 }