diff --git a/src/components/GuideTile.js b/src/components/GuideTile.js
index 124ccbf34..8deb3a91b 100644
--- a/src/components/GuideTile.js
+++ b/src/components/GuideTile.js
@@ -1,11 +1,18 @@
import PropTypes from 'prop-types';
import React from 'react';
+import FeatherIcon from './FeatherIcon';
import cx from 'classnames';
import { navigate } from 'gatsby';
import styles from './GuideTile.module.scss';
-const GuideTile = ({ minutes, title, description, path, className }) => (
+const GuideTile = ({ icon, minutes, title, description, path, className }) => (
+ {icon && (
+
+
+
+ )}
+
{minutes} minutes
{title}
@@ -23,6 +30,7 @@ GuideTile.propTypes = {
description: PropTypes.string.isRequired,
path: PropTypes.string.isRequired,
className: PropTypes.string,
+ icon: PropTypes.string,
};
export default GuideTile;
diff --git a/src/components/GuideTile.module.scss b/src/components/GuideTile.module.scss
index 5e05be824..bfa6f3532 100644
--- a/src/components/GuideTile.module.scss
+++ b/src/components/GuideTile.module.scss
@@ -8,6 +8,7 @@
padding: 0.5rem;
border: 1px solid var(--color-neutrals-300);
border-radius: 0.25rem;
+ position: relative;
button:hover {
transform: translateY(-1px);
@@ -28,6 +29,21 @@
background-position: left center;
}
+.iconContainer {
+ position: absolute;
+ top: -2.75rem;
+ left: 50%;
+ margin-left: -2.75rem;
+ width: 5.5rem;
+ height: 5.5rem;
+ border: 4px solid var(--color-white);
+ background-color: var(--color-neutrals-200);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
.main {
grid-area: main;
display: flex;