| section | Extensions | |
|---|---|---|
| subsection | Component groups | |
| id | Multi-content card | |
| source | react | |
| propComponents |
|
|
| sourceLink | https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md |
import MultiContentCard, { MultiContentCardDividerVariant } from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard"; import { ArrowRightIcon, BellIcon, CogIcon, EllipsisVIcon, LockIcon } from '@patternfly/react-icons'; import { createUseStyles } from 'react-jss'; import { css } from '@patternfly/react-styles'; import { FunctionComponent, useState } from 'react';
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.
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.
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.
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.
Dividers between all cards in the content can be shown using withDividers flag.
To enable a divider just for a single card, use dividerVariant property passed to the cards array.