Card

Cards are styled, flexible containers used to group related information.

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>
                                                        
                                                            

This is just sample code, which is not related to the above example.