| Name | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Custom content that will be placed inside the component. | - |
New 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 ref | React.Ref<HTMLDivElement | HTMLAnchorElement> | Ref to the card element. The type is determined by whether the card is rendered as a div or an anchor element based on the props such as href. | - |
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 resultset = { alt: "Resultset Table image", width: "300px", height: "100%", objectFit: "cover", src: resultsetImage.src, }; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcCard image={resultset}> <DxcContainer maxWidth="300px"> <DxcFlex direction="column" gap="var(--spacing-s)"> <DxcHeading text="Resultset Table" level={4} /> <DxcParagraph> A data-rich component designed for displaying large sets of information with built-in features like sorting, pagination, and scroll behavior to support efficient exploration and comparison. </DxcParagraph> </DxcFlex> </DxcContainer> </DxcCard> </DxcInset> ); }
() => { const resultset = { alt: "Resultset Table image", width: "300px", height: "100%", objectFit: "cover", src: resultsetImage.src, }; const accordion = { alt: "Accordion image", width: "300px", height: "100%", objectFit: "cover", src: accordionImage.src, }; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcFlex gap="var(--spacing-gap-m)"> <DxcCard image={resultset}> <DxcContainer maxWidth="300px"> <DxcFlex direction="column" gap="var(--spacing-s)"> <DxcHeading text="Resultset Table" level={4} /> <DxcParagraph> A data-rich component designed for displaying large sets of information with built-in features like sorting, pagination, and scroll behavior to support efficient exploration and comparison. </DxcParagraph> </DxcFlex> </DxcContainer> </DxcCard> <DxcCard image={accordion} mode="outlined"> <DxcContainer maxWidth="300px"> <DxcFlex direction="column" gap="var(--spacing-s)"> <DxcHeading text="Accordion" level={4} /> <DxcParagraph> A component designed to present large amounts of content in a small space by leveraging progressive disclosure. </DxcParagraph> </DxcFlex> </DxcContainer> </DxcCard> </DxcFlex> </DxcInset> ); }
() => { const resultset = { alt: "Resultset Table image", width: "300px", height: "100%", objectFit: "cover", src: resultsetImage.src, }; const accordion = { alt: "Accordion image", width: "300px", height: "100%", objectFit: "cover", src: accordionImage.src, }; const [selectedCard, setSelectedCard] = useState<string>("accordion"); return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcFlex gap="var(--spacing-gap-m)"> <DxcCard image={resultset} selectable selected={selectedCard === "resultset"} onClick={() => setSelectedCard("resultset")}> <DxcContainer maxWidth="300px"> <DxcFlex direction="column" gap="var(--spacing-s)"> <DxcHeading text="Resultset Table" level={4} /> <DxcParagraph> A data-rich component designed for displaying large sets of information with built-in features like sorting, pagination, and scroll behavior to support efficient exploration and comparison. </DxcParagraph> </DxcFlex> </DxcContainer> </DxcCard> <DxcCard image={accordion} selectable selected={selectedCard === "accordion"} onClick={() => setSelectedCard("accordion")}> <DxcContainer maxWidth="300px"> <DxcFlex direction="column" gap="var(--spacing-s)"> <DxcHeading text="Accordion" level={4} /> <DxcParagraph> A component designed to present large amounts of content in a small space by leveraging progressive disclosure. </DxcParagraph> </DxcFlex> </DxcContainer> </DxcCard> </DxcFlex> </DxcInset> ); }
() => { const resultset = { alt: "Resultset Table image", width: "100%", height: "150px", objectFit: "cover", src: resultsetImage.src, }; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcCard image={resultset} direction="horizontal"> <DxcContainer maxWidth="300px"> <DxcFlex direction="column" gap="var(--spacing-s)"> <DxcHeading text="Resultset Table" level={4} /> <DxcParagraph> A data-rich component designed for displaying large sets of information with built-in features like sorting, pagination, and scroll behavior to support efficient exploration and comparison. </DxcParagraph> </DxcFlex> </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> ); }