import Card , { CardProps } from '@proton/components/components/card/Card' ; import { Button } from '@proton/components' ; import { getTitle } from '../../helpers/title' ; import mdx from './Card.mdx' ; export default { component : Card , title : getTitle ( __filename , false ) , parameters : { docs : { page : mdx , } , } , } ; export const Playground = ( { ... args } ) => < Card { ... args } / > ; const args = { children : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet qui vero, blanditiis quos?' , } ; Playground . args = args ; export const Basic = ( ) => ( < Card > Lorem ipsum dolor sit amet , consectetur adipisicing elit . Sit doloribus nobis eos iusto . Ducimus numquam laborum aliquid culpa ! Dolor voluptatem modi inventore error , qui repudiandae consequatur autem vitae illum voluptatibus ? < /Card>); export const WithActionHorizontal = ( ) => ( < Card className = "flex flex-align-items-center" > < p className = "m0 mr2 flex-item-fluid" > Lorem ipsum , dolor sit amet consectetur adipisicing elit . Tempore ipsa dolores delectus fugit consequuntur impedit velit officia tenetur , magni placeat , voluptatum porro unde repudiandae cum explicabo assumenda distinctio , mollitia voluptate . < /p> < Button color = "norm" > Upgrade < /Button> < /Card>);