Ribbon Shape mateerial ui
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
root: {
margin: '0 auto',
width: 500,
},
card: {
maxWidth: 360,
marginTop: 40,
position: "relative",
},
ribbon: {
backgroundColor: 'skyblue',
position: "absolute",
color: 'white',
width: 150,
zIndex: 3,
textAlign: 'center',
textTransform: 'uppercase',
padding: 5,
font: 'Lato',
'&::before': {
position: "absolute",
zIndex: -1,
content: '',
display: 'block',
border: '5px solid #2980b9',
},
'&::after': {
position: "absolute",
zIndex: -1,
content: '',
display: 'block',
border: '5px solid #2980b9',
},
transform: 'rotate(-45deg)',
top: 60,
marginLeft: -40,
},
span: {
}
export default function RibbonMaterialCard() {
const classes = useStyles();
return (
<div className={classes.root}>
<div className={classes.ribbon}><span className={classes.span}>ribbon</span>
</div>
<Card className={classes.card}>
<CardActionArea>
<CardMedia
component="img"
alt="Contemplative Reptile"
height="140"
image="/static/images/cards/contemplative-reptile.jpg"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging
across all continents except Antarctica
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
</div>
);
}