Layout
Card
Storybook
Card
Storybook
This component is a container that can be used to display information and content in a user interface. The "Card" component has several props available that can be used to customize its appearance and behavior
Import
1import { Card } from 'dd360-ds'1import Card from 'dd360-ds/Card'Usage
Hello World
Information about the resume of the homes and value to project.1import { Card } from "dd360-ds"
2
3<Card padding={0} width={250}>
4 <>
5 <div className="pt-4 px-4">
6 <Text bold className="mb-7" variant="h5">
7 Hello World
8 </Text>
9 <Text size="sm">Information on the curriculum of the houses and value to be projected.</Text>
10 </div>
11 <div className="w-full border-t my-6" />
12 <div className="px-2 grid place-center">
13 <Button className="p-0 m-0" variant="secondary">
14 Show detail
15 </Button>
16 </div>
17 </div>
18 </>
19</Card>
20API Reference
| Name | Types | Default |
|---|---|---|
| "width" | string number | - |
| "height" | number auto fit-content | fit-content |
| "children" | ReactNode | - |
| "rounded" | none sm md lg xl 2xl 3xl full 2x 3x 4xl 5xl | none |
| "paddingY" | number | - |
| "paddingX" | number | - |
| "padding" | number | 4 |
| "className" | string | - |