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:
doryan authored and doryan committed 2025-04-03 11:30:03 +04:00
1 parent 9ee845fbba
commit 263856baf1
4 files changed
+74 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/page.tsx
+56 -1
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>