| Name | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Custom content that will be placed inside the component. | - |
| defaultSelected | boolean | Initial state of the checkbox, only when it is uncontrolled. | - |
New direction | 'row' | 'column' | Specifies the direction of the card content. | 'column' |
New emptySize | {
width?: string;
height?: string;
iconSize?:
"small" | "medium" | "large";
} | Specifies the size of the empty state. By default the icon is set to "medium". | - |
| href | string | Specifies the URL of the card. If provided, the card will be clickable and navigate to the specified URL. The card will also be considered as an anchor and selectable will be ignored, even if it's set to true. | - |
New image | | This prop has the same type as the Image component props and it will be used to render an image inside the card. It is optional and if not specified, no image will be rendered. | - |
| imagePosition | 'before' | 'after' | Specifies the position of the image inside the card. | 'before' |
New isEmpty | boolean | Specifies whether the card is in an empty state. | false |
New isLoading | boolean | Specifies whether the card is in a loading state. | false |
New loadingSize | {
width?: string;
height?: string;
} | Specifies the size of the loading state. | - |
New mode | 'elevated' | 'outlined' | Specifies the visual style of the card. It can be set to 'elevated' or 'outlined'. | 'elevated' |
New newWindow | boolean | Specifies whether the link will open in a new window. href must be provided for this to work. | false |
| onClick | (event: React.MouseEvent) => void | Callback function that is called when the card is clicked. | - |
New onSelectionChange | (selected: boolean) => void | Callback function that is called when the card is clicked. It receives a boolean value with the new selected state of the card. The selectable prop must be truthy for this to work. | - |
New selectable | boolean | If true, the card can be selected. When the card is clicked, the onChange callback will be called with the new selected state of the card. If href is defined, the card won't be selectable, even if this prop is set to true. | false |
New selected | boolean | If true, the card is selected and if defined it will behave as a controlled component. | - |
New size | {
width?: "fillParent" | "fitContent";
height?: "fillParent" | "fitContent";
} | Defines the size of the card. | {
width: "fitContent",
height: "fitContent"
} |
| tabIndex | number | Specifies the tab index of the card. | 0 |
() => { const image = { alt: "Example image", width: "445px", height: "100%", objectFit: "cover", src: "https://picsum.photos/id/11/1920/1080", }; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcCard image={image}> <DxcContainer maxWidth="445px"> <DxcParagraph> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at pretium mi. Sed ac mi purus. Donec mattis luctus nisi, vitae scelerisque metus. Praesent in justo vitae quam mollis sollicitudin. Cras at consequat libero. </DxcParagraph> </DxcContainer> </DxcCard> </DxcInset> ); }
() => { const image = { alt: "Example image", width: "300px", height: "100%", objectFit: "cover", src: "https://picsum.photos/id/11/1920/1080", }; const content = ( <DxcContainer maxWidth="300px"> <DxcParagraph> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at pretium mi. Sed ac mi purus. Donec mattis luctus nisi, vitae scelerisque metus. Praesent in justo vitae quam mollis sollicitudin. Cras at consequat libero. </DxcParagraph> </DxcContainer> ); return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcFlex wrap="wrap" gap="2rem"> <DxcCard image={image}> {content} </DxcCard> <DxcCard image={image} mode="outlined"> {content} </DxcCard> </DxcFlex> </DxcInset> ); }
() => { const image = { alt: "Example image", width: "445px", height: "100%", objectFit: "cover", src: "https://picsum.photos/id/11/1920/1080", }; const [selected, setSelected] = useState(false); const onSelectionChange = (newValue) => { setSelected(newValue); }; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcCard image={image} selectable selected={selected} onSelectionChange={(newValue) => onSelectionChange(newValue)}> <DxcContainer maxWidth="445px"> <DxcParagraph> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at pretium mi. Sed ac mi purus. Donec mattis luctus nisi, vitae scelerisque metus. Praesent in justo vitae quam mollis sollicitudin. Cras at consequat libero. </DxcParagraph> </DxcContainer> </DxcCard> </DxcInset> ); }
() => { const image = { alt: "Example image", width: "100%", height: "250px", objectFit: "cover", src: "https://picsum.photos/id/11/1920/1080", }; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcCard image={image} direction="row"> <DxcContainer maxWidth="250px"> <DxcParagraph> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at pretium mi. Sed ac mi purus. Donec mattis luctus nisi, vitae scelerisque metus. Praesent in justo vitae quam mollis sollicitudin. Cras at consequat libero. </DxcParagraph> </DxcContainer> </DxcCard> </DxcInset> ); }
() => { const image = { alt: "Example image", width: "445px", height: "100%", objectFit: "cover", src: "https://picsum.photos/id/11/1920/1080", }; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcCard image={image} isEmpty emptySize={{ width: "460px", height: "350px" }}> </DxcCard> </DxcInset> ); }
() => { const image = { alt: "Example image", width: "445px", height: "100%", objectFit: "cover", src: "https://picsum.photos/id/11/1920/1080", }; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcCard image={image} isLoading loadingSize={{ width: "460px", height: "350px" }}> </DxcCard> </DxcInset> ); }