Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 61x 12x 12x 12x | import React from "react";
import Grid from "@material-ui/core/Grid";
import Box from '@material-ui/core/Box'
import Container from '@material-ui/core/Container';
import { Typography } from "@material-ui/core";
import { makeStyles } from '@material-ui/core/styles'
const useStyles = makeStyles((theme) => ({
textStyle:{
textAlign:'left',
[theme.breakpoints.down('md')]: {
fontSize: '1.25rem',
textAlign:'center',
},
},
item1_img: {
margin:'auto',
order:1,
},
item1_txt: {
margin:'auto',
order:2,
},
item2_img: {
margin:'auto',
order:3,
[theme.breakpoints.up('lg')]: {
order: 4,
},
},
item2_txt: {
margin:'auto',
order:4,
[theme.breakpoints.up('lg')]: {
order: 3,
},
},
item3_img: {
margin:'auto',
order:5,
},
item3_txt: {
margin:'auto',
order:6,
},
}))
/**
* Generates marketing cards that contain an image and text. 3 part grid containing multiple card items.
* @param {*} props.imgSrc
* @param {*} props.imgAlt
* @param {*} props.children
*/
export default function PictureCard(props) {
const items = props.items;
const classes = useStyles()
return (
<>
<Box className='containerGray' pt='30px' pb='115px' >
<Container>
<Grid container display="flex" justify="flex-start" >
<Grid item xs={8} md={8} lg={5} align='center' className={classes.item1_img} >
<img src={items[0].src} alt={items[0].alt} />
</Grid>
<Grid item xs={8} md={8} lg={5} className={classes.item1_txt} >
<Typography variant='h4' className={classes.textStyle} >{items[0].children}</Typography>
</Grid>
<Grid item xs={8} md={8} lg={5} align='center' className={classes.item2_img} >
<img src={items[1].src} alt={items[1].alt} />
</Grid>
<Grid item xs={8} md={8} lg={5} className={classes.item2_txt} >
<Typography variant='h4' className={classes.textStyle} >{items[1].children}</Typography>
</Grid>
<Grid item xs={8} md={8} lg={5} align='center' className={classes.item3_img} >
<img src={items[2].src} alt={items[2].alt} />
</Grid>
<Grid item xs={8} md={8} lg={5} className={classes.item3_txt} >
<Typography variant='h4' className={classes.textStyle} >{items[2].children}</Typography>
</Grid>
</Grid>
</Container>
</Box>
</>
);
}
|