Fixed some margins, added requires/collab library item section, and reminders to make extension/metadata-only.

src/components/library-item/library-item.css

@@ -110,12 +110,47 @@
     width: 300px;
 }
 
+.featured-extension-text {
+    text-align: left;
+    padding-left: 1.25rem;
+}
+
 .featured-description {
     display: block;
     font-weight: normal;
     line-height: 2;
 }
 
+.featured-extension-metadata {
+    width: 100%;
+    padding: 0rem 10px 1rem 1.25rem;
+    text-align: left;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 12px;
+    color: rgb(130, 135, 151);
+}
+
+.featured-extension-requirement {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+}
+
+.featured-extension-collaboration {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+}
+
+.featured-extension-metadata-detail {
+    padding-top: 0.4rem;
+    font-weight: bold;
+}
+
 .coming-soon-text {
     position: absolute;
     background-color: $data-primary;

src/components/library-item/library-item.jsx

@@ -81,12 +81,30 @@ class LibraryItem extends React.PureComponent {
                     </div>
                 ) : null}
                 <div
-                    className={styles.featuredText}
+                    className={true ? /* TODO: make extension-only */
+                        classNames(styles.featuredExtensionText, styles.featuredText) : styles.featuredText
+                    }
                 >
-                    <span className={styles.libraryItemName}>{this.props.name}</span>
+                    <span className={styles.libraryItemName}>
+                        {this.props.name}
+                    </span>
                     <br />
-                    <span className={styles.featuredDescription}>{this.props.description}</span>
+                    <span className={styles.featuredDescription}>
+                        {this.props.description}
+                    </span>
                 </div>
+                {true ? ( /* TODO: make extension-only and requirements-only */
+                    <div className={styles.featuredExtensionMetadata}>
+                        <div className={styles.featuredExtensionRequirement}>
+                            <div>Requires</div>
+                            <div className={styles.featuredExtensionMetadataDetail}>[icon]</div>
+                        </div>
+                        <div className={styles.featuredExtensionCollaboration}>
+                            <div>Collaboration with</div>
+                            <div className={styles.featuredExtensionMetadataDetail}>Amazon Web Services</div>
+                        </div>
+                    </div>
+                ) : null}
             </div>
         ) : (
             <Box