Edit: FeatureCard.js
import React from 'react' import styled from 'styled-components' import {Flex, Image, Text} from 'rebass' const Card = styled(Flex)` background-color: #f2f2f2ab; box-shadow: 5px 5px 1px 1px ${(props) => props.theme.colors.red}; border-radius: 2px; ` const Desc = styled.p` padding: 5px 0; font-size: 16px; ` const Title = styled(Text)` font-size: 24px; font-weight: 500; text-shadow: 1px 2px 2px #f061df6e; ` const Icon = styled(Image)` width: 110px; flex-shrink: 0; ` const FeatureCard = ({icon, text, title}) => { return ( <Card alignItems='center' flexDirection={['column', 'row']} p={5} m={4}> <Icon src={icon} /> <Flex flexDirection='column' pl={[0, 4]} pt={2}> <Title textAlign={['center', 'left']}>{title}</Title> <Desc>{text}</Desc> </Flex> </Card> ) } export default FeatureCard
Cancel