Multi-content card

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.

Getting Started

Configure application
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Configure access
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Next Steps

Configure notifications
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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 card toggle text

Getting Started

Configure application
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Configure access
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Next Steps

Configure notifications
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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.

Card with actions toggle text

Getting Started

Configure application
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Configure access
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Next Steps

Configure notifications
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Expandable multi content card with dividers

Dividers between all cards in the content can be shown using withDividers flag.

Card with dividers toggle text

Getting Started

Configure application
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Configure access
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Next Steps

Configure notifications
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Expandable multi-content card with single dividers

To enable a divider just for a single card, use dividerVariant property passed to the cards array.

Card with dividers toggle text

Getting Started

Configure application
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Configure access
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Next Steps

Configure notifications
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Props

MultiContentCard

extends CardProps
*required
NameTypeDefaultDescription
actionsReact.ReactElementActions to be displayed in the expandable section
cards(React.ReactElement | MutliContentCardProps)[][]Cards to be displayed as a content
defaultExpandedbooleantrueIndicates whether the card is expanded by default
isExpandablebooleanfalseIndicates whether the card is expandable
isToggleRightAlignedbooleanfalseIndicates whether the actions toggle is right aligned
ouiaIdstring | number'MultiContentCard'Custom OUIA ID
toggleContentReact.ReactElementToggle content for the expandable section
toggleTextstringToggle text for the expandable section
withDividersbooleanfalseWhen set to true, all content cards will be separated with dividers