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

COMPLETED: Card sub-components

Browse Source 
HOTFIX: In all cards add CSS rule : if card media subcomponent are first, or first any of subcomponents contain on first place media component - applying a zero-padding and border-radius exclude a default padding value
This commit is contained in:
doryan04
2024-02-04 23:48:45 +04:00
committed by doryan
parent 263856baf1
commit 1c91bd8caa
5 changed files with 65 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/page.tsx
View File

@@ -20,7 +20,7 @@ export default function Page() {
padding: '8px',
}}
>
<div style={{ display: 'flex', gap: '8px', maxWidth: 1024 }}>
<div style={{ display: 'flex', gap: '8px', maxWidth: '90vw' }}>
<Card variant={'outlined'}>
<CardHeader>
<h1>Header</h1>
@@ -76,6 +76,32 @@ export default function Page() {
<Button>label</Button>
</CardFooter>
</Card>
<Card variant={'elevated'}>
<CardActionArea>
<CardMedia src={testImage1.src} type={'img'} />
<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>