fixes

src/components/flow/Cell/index.tsx

@@ -1,19 +1,22 @@
 import React, { FC } from 'react';
 import * as styles from './styles.scss';
+import classNames = require("classnames");
 
 interface IProps {
   height?: number;
   width?: number;
   title?: string;
+  is_hero?: boolean;
 }
 
 const Cell: FC<IProps> = ({
   width = 1,
   height = 1,
   title,
+  is_hero,
 }) => (
     <div
-      className={styles.cell}
+      className={classNames(styles.cell, { is_hero })}
       style={{
         gridRowEnd: `span ${height}`,
         gridColumnEnd: `span ${width}`,

src/components/flow/Cell/styles.scss

@@ -5,13 +5,31 @@
   flex: 0 0;
   background: $cell_bg;
   border-radius: 4px;
+  position: relative;
 
+  &:global(.is_hero) {
+    .title {
+      font-size: 48px;
+    }
+  }
   @include outer_shadow();
 }
 
 .title {
-  font-family: 'Montserrat';
+  font-family: $font;
   font-weight: 700;
-  font-size: 32px;
+  font-size: 24px;
+
   text-transform: uppercase;
+  height: 1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 $gap;
+
+  position: absolute;
+  bottom: $gap;
+  left: 0;
+  width: 100%;
+  box-sizing: border-box;
 }

src/components/flow/TestGrid/index.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import classnames from 'classnames';
 import { Cell } from "~/components/flow/Cell";
 
 const style = require('./style.scss');
@@ -9,11 +8,15 @@ export const TestGrid = () => (
     <Cell
       height={1}
       width={4}
-      title="Example cell"
+      title="Example cell Example cell Example cell Example cell Example cell Example cell Example cell "
+      is_hero
     />
 
     <Cell />
-    <Cell height={2} />
+    <Cell
+      height={2}
+      title="Example cell Example cell Example cell Example cell Example cell Example cell Example cell "
+    />
     <Cell width={2} />
     <Cell />
   </div>