title rendered in the meta item

src/common/MetaItem/MetaItem.js

@@ -31,10 +31,23 @@ class MetaItem extends PureComponent {
         );
     }
 
+    renderTitleBar() {
+        if (this.props.title.length === 0) {
+            return null;
+        }
+
+        return (
+            <div className={styles['title-bar-container']}>
+                <div className={styles['title']}>{this.props.title}</div>
+            </div>
+        );
+    }
+
     render() {
         return (
             <div className={classnames(styles['meta-item-container'], styles[`relative-size-${this.props.relativeSize}`], styles[`poster-shape-${this.props.posterShape}`], this.props.className)}>
                 {this.renderPoster()}
+                {this.renderTitleBar()}
             </div>
         );
     }

src/common/MetaItem/styles.less

@@ -8,6 +8,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        overflow: hidden;
         z-index: 0;
 
         .placeholder-image {
@@ -46,6 +47,20 @@
         }
     }
 
+    .title-bar-container {
+        height: calc(var(--poster-relative-size) * 0.14);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .title {
+            flex: 1;
+            font-size: 1.4em;
+            padding: 0 0.5em;
+            color: var(--color-surfacelighter);
+        }
+    }
+
     &.poster-shape-square {
         .poster-image-container {
             width: var(--poster-relative-size);