doryan/material-you-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

COMPLETED: Card sub-components

Browse Source 
TODO: fixed styles for :active state
This commit is contained in:
doryan04
2024-02-04 02:58:56 +04:00
committed by doryan
parent 9ee845fbba
commit 263856baf1
4 changed files with 74 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/page.tsx
View File

@@ -20,7 +20,7 @@ export default function Page() {
padding: '8px',
}}
>
<div style={{ display: 'flex', gap: '8px', maxWidth: 512 }}>
<div style={{ display: 'flex', gap: '8px', maxWidth: 1024 }}>
<Card variant={'outlined'}>
<CardHeader>
<h1>Header</h1>
@@ -50,6 +50,61 @@ export default function Page() {
<Button>label</Button>
</CardFooter>
</Card>
<Card variant={'elevated'}>
<CardMedia src={testImage1.src} type={'img'} />
<CardActionArea>
<CardBody>
<h4>
<strong>Sub-header</strong>
</h4>
<p>
Lorem ipsum dolor sit amet, consecrate
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</CardBody>
</CardActionArea>
<CardFooter>
<Button>label</Button>
</CardFooter>
</Card>
<Card variant={'elevated'}>
<CardHeader>
<h1>Header</h1>
</CardHeader>
<CardMedia src={testImage1.src} type={'img'} />
<CardActionArea>
<CardBody>
<h4>
<strong>Sub-header</strong>
</h4>
<p>
Lorem ipsum dolor sit amet, consecrate
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</CardBody>
</CardActionArea>
<CardFooter>
<Button>label</Button>
</CardFooter>
</Card>
</div>
</div>
</main>