@wix/design-system
Version:
@wix/design-system
83 lines (80 loc) • 2.67 kB
Markdown
### badge
- type: ReactNode
- description: Accepts a <Badge/> or any other static indicator. Passed element will be displayed at the top left corner of a card.
### title
- type: ReactNode
- description: Set card title.
### subtitle
- type: ReactNode
- description: Set card subtitle.
### suffix
- type: ReactNode
- description: Accepts any component to be rendered as a suffix of the card's footer.
### draggable
- type: boolean
- description: Show drag handle
### dragHandleProps
- type: Partial<DragHandleProps>
- description: Extra props to pass to the `<DragHandle />` element.
### dragging
- type: boolean
- description: Indicates the element is dragging.
### droppable
- type: boolean
- description: Removes buttons when other element is dragging and this card is droppable.
### dragDisabled
- type: boolean
- description: Show disabled drag handle.
### tabIndex
- type: number
- description: Specifies the tab order of the component.
### size
- type: "small" | "medium"
- description: Set card size.
- default: 'medium'
### backgroundImageUrl
- type: string
- description: Specifies background image URL.
### backgroundImageNode
- type: ReactNode
- description: Accepts any component to be rendered as a background image.
### primaryActionProps
- type: { label?: ReactNode; onClick?: MouseEventHandler<HTMLDivElement> | undefined; disabled?: boolean | undefined; disabledMessage?: string | undefined; }
- description: Defines properties for the primary action button.
### secondaryActionProps
- type: { label?: ReactNode; onClick?: MouseEventHandler<HTMLButtonElement> | undefined; }
- description: Defines properties for the secondary action button.
### settingsMenu
- type: ReactNode
- description: Defines a popover menu to be displayed on hover at the top right corner or a card.
### dataHook
- type: string
- description: Applies a data-hook HTML attribute that can be used in the tests.
### aspectRatio
- type: string | number
- description: Recommended values:
- Square - 1
- Portrait - 3/4
- Cinema - 16/9
- Landscape - 4/3
- Custom number (e.g. 1.5)
- default: 1.6
### imagePlacement
- type: "top" | "side"
- description: Sets placement of background image.
- default: 'top'
### showSuffixOnHover
- type: boolean
- description: Sets suffix behavior to appear only on card hover.
- default: false
### skin
- type: "standard" | "outlined"
- description: Sets skin to the card item.
- default: 'standard'
### skinVisibility
- type: "hover" | "always"
- description: Sets when the skin is visible.
- default: 'always'
### footer
- type: ReactNode
- description: Accepts any component to be rendered under default footer. Only on imagePlacement 'top'.