Component <Card />
Props
| Props | Type | Meaning | Possible values |
|---|---|---|---|
| radius | object | Set radius for each card corner | { desktop: array with 4 string with units, mobile: array with 4 string with units } |
| spaceVertical | object | Set top and bottom paddings | { desktop: from 0 to any number, mobile: from 0 to any number } |
| spaceHorizontal | object | Set left and right paddings | { desktop: from 0 to any number, mobile: from 0 to any number } |
Radius
Examples:
<Card radius={{ desktop: ['25px', '25px', '0px', '0px'], mobile: ['15px', '15px', '0px', '0px'] }}>
<H4>Radius top left: 25/15, top right: 25/15, bottom left: 0, bottom right: 0</H4>
</Card>
<Card radius={{ desktop: ['50%', '50%', '50%', '50%'], mobile: ['50%', '50%', '50%','50%'] }}>
<H4>Radius top left: 50%, top right: 50%, bottom left: 50%, bottom right: 50%</H4>
</Card>
<Card radius={{ desktop: ['0px', '10px', '20px', '30px'], mobile: ['30px', '20px', '10px',' 0px'] }}>
<H4>Radius top left: 0/30, top right: 10/20, bottom left: 20/10, bottom right: 30/0</H4>
</Card>
Radius top left: 25/15, top right: 25/15, bottom left: 0, bottom right: 0
Radius top left: 50%, top right: 50%, bottom left: 50%, bottom right: 50%
Radius top left: 0/30, top right: 10/20, bottom left: 20/10, bottom right: 30/0
Spacing
Examples:
<Card spaceVertical={{ desktop: '50px', mobile: '20px' }}>
<H4>Space top and bottom 50/20</H4>
</Card>
<Card spaceHorizontal={{ desktop: '120px', mobile: '80px' }}>
<H4>Space left and right 120/80</H4>
</Card>