A multi-content card component allows to display multiple card components in a single layout. To further customize this layout, you can also utilize all properties of the card component, with the exception of children and title.
Examples
Basic multi-content card
To display a basic multi-content an array of content cards has to be passed using the cards property. It is recommended to use regular card components in the content.
Expandable multi-content card
To make the multi-content card expandable, pass isExpandable flag together with toggleText or toggleContent property. Default expansion state can be adjusted using defaultExpanded property.
Expandable multi-content card with actions and labels
Actions can be displayed in the multi-content card heading using actions property. Also, you can make use of label components for your card content.
Expandable multi content card with dividers
Dividers between all cards in the content can be shown using withDividers flag.
Expandable multi-content card with single dividers
To enable a divider just for a single card, use dividerVariant property passed to the cards array.
Props
MultiContentCard
| Name | Type | Default | Description |
|---|---|---|---|
| actions | React.ReactElement | Actions to be displayed in the expandable section | |
| cards | (React.ReactElement | MutliContentCardProps)[] | [] | Cards to be displayed as a content |
| defaultExpanded | boolean | true | Indicates whether the card is expanded by default |
| isExpandable | boolean | false | Indicates whether the card is expandable |
| isToggleRightAligned | boolean | false | Indicates whether the actions toggle is right aligned |
| ouiaId | string | number | 'MultiContentCard' | Custom OUIA ID |
| toggleContent | React.ReactElement | Toggle content for the expandable section | |
| toggleText | string | Toggle text for the expandable section | |
| withDividers | boolean | false | When set to true, all content cards will be separated with dividers |
