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
Name | Type | Size | Permission | Actions |
---|---|---|---|---|
DarkBlock.js | File | 1.07 KB | 0644 |
|
FeatureCard.js | File | 861 B | 0644 |
|
Features.js | File | 2.41 KB | 0644 |
|
Footer.js | File | 672 B | 0644 |
|
Terminal.js | File | 2.74 KB | 0644 |
|
Windows.js | File | 1.55 KB | 0644 |
|
cubes.js | File | 2.29 KB | 0644 |
|
hero.js | File | 616 B | 0644 |
|