React
Is new design vision part implemented using new tokens?
Up to date
Resources
Example
import { Card, CardContent } from '@optimus-web/core';
<Card padding="0" overflowHidden>
<CardContent padding="200" highlighted>
<Stack distribution="space-between">
<Label secondary>To be paid</Label>
<Label>€100</Label>
</Stack>
</CardContent>
<CardContent padding="200">
<SmallParagraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros lacus, ornare quis
tempus non, ultrices non tortor. Suspendisse ac eros vel odio tincidunt finibus ut quis leo.
</SmallParagraph>
</CardContent>
</Card>
API
|
Name |
Description |
Type |
Default |
|---|---|---|---|
|
attachment? |
Removes the radius on the side you chose so it lines up with that sides content |
Attachment |
undefined |
|
cornerRadius? |
Gives the Card a border radius of small (8px) or medium (16x) |
'small' | 'medium' |
small |
|
outline? |
Gives the Card an outline on the extrior |
boolean |
false |
|
overflowHidden? |
Guarantees the content inside of the card (text, element, background colors, etc.) does not spill outside of the main content area |
boolean |
undefined |
|
padding? |
Gives the Card a padding on all 4 sides |
CardSpacing |
0 |
|
variant? |
Changes the background color of the card |
'default' | 'emphasized' | 'highlighted' |
'default' |