import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
const useStyles = makeStyles((theme) => ({
card: {
height: 512
}
}));
export default function Content(props) {
const classes = useStyles();
const content = {
'header-p1': 'Lorem ipsum dolor',
'header-p2': 'sit amet consectetur.',
'description': 'Suspendisse aliquam tellus ante, porttitor mattis diam eleifend quis. Pellentesque pulvinar commodo eros sit amet finibus.',
'primary-action': 'Action',
'image': 'https://images.unsplash.com/photo-1497681883844-82b4f0a359a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80',
...props.content
};
return (
<section>
<Container maxWidth="lg">
<Box py={12}>
<Grid container spacing={8}>
<Grid item xs={12} md={6}>
<Box display="flex" height="100%">
<Box my="auto">
<Typography variant="h3" component="h3" gutterBottom={true}>
<Typography color="primary" variant="h3" component="span">{content['header-p1']} </Typography>
<Typography variant="h3" component="span">{content['header-p2']}</Typography>
</Typography>
<Typography variant="subtitle1" color="textSecondary" paragraph={true}>{content['description']}</Typography>
<Box mt={3}>
<Button variant="contained" color="secondary">{content['primary-action']}</Button>
</Box>
</Box>
</Box>
</Grid>
<Grid item xs={12} md={6}>
<Card>
<CardMedia image={content['image']} className={classes.card}/>
</Card>
</Grid>
</Grid>
</Box>
</Container>
</section>
);
}Framework
Material-UI
UI Library
All Libraries
Component #1
Content makes the page. In our Material-Ui content components, we provide you with many possible variations of content presentation. Regardless of its type and length, you'll find a way to show what's important to your audience.
Browse the Material-Ui navigation component variants available in our editor. Under each of them is clear code that you can easily edit. Components are sorted by UI libraries, which consist of many other elements in the same style. Each of these libraries was created by our talented designers to allow you to create diverse and pretty pages.
See all variations of Material-Ui navigation components and the code underneath them in Shuffle Editor.
Component #2
Component #3
Component #4
