I'm new to material ui and I want to design colored rounded squares with a letter inside placed on a card component, similar to the image below.
https://i.stack.imgur.com/fmdi4.png
As shown in the example, the colored square with "A" acts as a badge on the card component. I would like to achieve the same effect using material ui but I'm unsure where to locate this feature. This is how my current card appears:
https://i.stack.imgur.com/n9yQ6.png
This is the code I have for displaying a component:
import React from 'react';
Grid from '@material-ui/core/Grid';
Card from '@material-ui/core/Card';
makeStyles from '@material-ui/core/styles';
CardContent from '@material-ui/core/CardContent';
Typography from '@material-ui/core/Typography';
Box from '@material-ui/core/Box';
Badge from '@material-ui/core/Badge';
VisibilityIcon from '@material-ui/icons/Visibility';
const useStyles = makeStyles({
cardRoot: {
width:"400px",
fontSize: "1.125rem",
fontWeight:"bold",
lineHeight:"1.5rem",
marginLeft:"50px",
padding:"10px"
},
// More CSS styling...
export default function Job({job}) {
const classes = useStyles();
const bull = <span className={classes.bullet}>•</span>;
return (
<Grid item sm={4} xs={2}>
<Card className={classes.cardRoot}>
<CardContent>
<Box p={1} display="flex" justifyContent="flex-end" flexDirection="row" className={classes.viewContainer}>
<VisibilityIcon></VisibilityIcon>
<Typography component="span"> VIEW DETAILS</Typography>
</Box>
<Box display ="flex" justifyContent="flex-start">
<Box p ={1}>
... // Rest of the code here
</Box>
</Box>
</CardContent>
</Card>
</Grid>
);
}
Your assistance would be greatly appreciated.