Card
Cards are surfaces that display content and actions on a single topic. They help group related information and make it easier to scan, compare, and take action.
Figma Link
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=2379-71025
- Web Components
- Flutter
Demo
zeta-web v1.4.2
Web Components
Storybook
https://design.zebra.com/web/storybook/index.html?path=/docs/components-cards--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | The content of the card. | text |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| rounded | Whether the component is rounded or sharp.When true, rounded will set the border radius of the first child, and any children with class 'contourable-target' to --radius-minimal.Otherwise, this value will be --radius-none. | boolean | undefined | true | Contourable |
CSS Properties
| Name | Description |
|---|---|
| --card-border-line-width | The line width of the border |
| --card-border-color | The color of the border |
| --card-border-line-style | The line style of the border |
Flutter component not available yet