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;