diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css index 067b2c1af..ba90b07fb 100644 --- a/src/components/library-item/library-item.css +++ b/src/components/library-item/library-item.css @@ -58,3 +58,27 @@ white-space: nowrap; min-width: 0; } + +.featured-item { + flex-basis: 300px; + max-width: 300px; + height: 320px; +} + +.featured-image { + height: 160px; + margin: 20px; +} + +.featured-text { + border-top: 1px solid #e9eef2; + font-weight: bold; + padding: 10px; + height: 140px; + width: 300px; +} + +.featured-description { + font-weight: normal; + line-height: 2; +} diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx index 5e0fa5edc..0f1443e36 100644 --- a/src/components/library-item/library-item.jsx +++ b/src/components/library-item/library-item.jsx @@ -4,6 +4,7 @@ import React from 'react'; import Box from '../box/box.jsx'; import styles from './library-item.css'; +import classNames from 'classnames'; class LibraryItem extends React.PureComponent { constructor (props) { @@ -25,7 +26,26 @@ class LibraryItem extends React.PureComponent { this.props.onMouseLeave(this.props.id); } render () { - return ( + return this.props.featured ? ( +
+
+ +
+
+ {this.props.name} +
+ {this.props.description} +
+
+ ) : (