Last active
January 12, 2022 06:31
-
-
Save killshot13/7287f35065ab7b4f91eced0c04b2e758 to your computer and use it in GitHub Desktop.
Demonstrates how the Card component popularized by Material-UI can be enhanced by adding a fixed gradient background. It spices up the appearance and also creates a cool parallax effect.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are entry points to more complex and detailed information. // | |
| // @ts-nocheck | |
| import React from 'react' | |
| import { makeStyles } from '@material-ui/core/styles' | |
| import { | |
| Box, | |
| Card, | |
| CardActions, | |
| CardContent, | |
| CardActionArea, | |
| Grid, | |
| Button, | |
| Divider, | |
| Typography, | |
| } from '@material-ui/core' | |
| const useStyles = makeStyles((theme) => ({ | |
| root: { | |
| minWidth: 300, | |
| background: 'linear-gradient(to right top, #FFF, 50%, #F47721 )', | |
| backgroundRepeat: 'no-repeat', | |
| backgroundPosition: 'center', | |
| backgroundAttachment: 'fixed', | |
| color: 'rgb(0, 35, 57)', | |
| }, | |
| dividerUpper: { | |
| backgroundColor: 'rgba(0, 0, 0, 0.15)', | |
| }, | |
| dividerLower: { | |
| opacity: 0, | |
| }, | |
| edgesUpper: { | |
| pointerEvents: 'none', | |
| }, | |
| button: { | |
| 'background': theme.palette.primary.main, | |
| '&:hover': { | |
| background: theme.palette.primary.light, | |
| }, | |
| 'color': '#FFF', | |
| }, | |
| })) | |
| export default function MuiGradientCardExample() { | |
| const classes = useStyles() | |
| return ( | |
| <Card m={2} className={classes.root}> | |
| <CardActionArea pt={4} px={4} className={classes.edgesUpper}> | |
| <CardContent> | |
| <Grid | |
| container | |
| direction='row' | |
| justifyContent='space-around' | |
| alignItems='center'> | |
| <Grid item xs={8}> | |
| <Typography variant='h5' component='h2'> | |
| Laudantium qui voluptatem veritatis et sed possimus ut. | |
| </Typography> | |
| </Grid> | |
| <Grid item xs={4} /> | |
| </Grid> | |
| <Divider my={4} className={classes.dividerUpper} /> | |
| <Typography variant='subtitle1' component='p'> | |
| Voluptas eum libero. In minima eos rerum. Magni adipisci illo ut quo odio | |
| earum. Eligendi quasi fuga explicabo distinctio iusto. Quidem quis quia. | |
| </Typography> | |
| </CardContent> | |
| </CardActionArea> | |
| <Divider mb={2} className={classes.dividerLower} /> | |
| <CardActions mb={4} mx={4}> | |
| <Button ml={2} size='large' variant='contained' className={classes.button}> | |
| REQUEST OFFER | |
| </Button> | |
| </CardActions> | |
| </Card> | |
| ) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment