diff --git a/docs/data/material/components/cards/DeveloperProfileCard.tsx b/docs/data/material/components/cards/DeveloperProfileCard.tsx new file mode 100644 index 00000000000000..aa2ebe2cdca0de --- /dev/null +++ b/docs/data/material/components/cards/DeveloperProfileCard.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import Avatar from '@mui/material/Avatar'; +import Button from '@mui/material/Button'; +import Card from '@mui/material/Card'; +import CardContent from '@mui/material/CardContent'; +import Chip from '@mui/material/Chip'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; + +export default function DeveloperProfileCard() { + return ( + + + + + D + + + + Developer Profile + + + + Full-stack developer passionate about building modern web applications. + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/docs/data/material/components/cards/cards.md b/docs/data/material/components/cards/cards.md index c843f78ff4c916..411cff76956bf0 100644 --- a/docs/data/material/components/cards/cards.md +++ b/docs/data/material/components/cards/cards.md @@ -85,3 +85,10 @@ To customize a Card's styles when it's in an active state, you can attach a `dat {{"demo": "SelectActionCard.js", "bg": true}} 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/primitive/card). + + +## Profile card + +Example of building a user profile card by combining multiple Material UI components. + +{{"demo": "ProfileCard.js", "bg": true}} \ No newline at end of file