doryan04
1c91bd8caa
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
139 lines
7.1 KiB
TypeScript
139 lines
7.1 KiB
TypeScript
import React from 'react';
|
|
import testImage1 from './test-images/test-image-1.jpg';
|
|
import { Card } from '../src/primitive-components/card/card';
|
|
import { CardMedia } from '../src/primitive-components/card/card-media';
|
|
import { CardActionArea } from '../src/primitive-components/card/card-action-area';
|
|
import { Button } from '../src/primitive-components/button-components/button/button';
|
|
import { CardHeader } from '../src/primitive-components/card/card-header';
|
|
import { CardBody } from '../src/primitive-components/card/card-body';
|
|
import { CardFooter } from '../src/primitive-components/card/card-footer';
|
|
|
|
export default function Page() {
|
|
return (
|
|
<main>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
padding: '8px',
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', gap: '8px', maxWidth: '90vw' }}>
|
|
<Card variant={'outlined'}>
|
|
<CardHeader>
|
|
<h1>Header</h1>
|
|
</CardHeader>
|
|
<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'}>
|
|
<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'}>
|
|
<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>
|
|
</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>
|
|
);
|
|
}
|