InfoCardGroup

A component that displays a group of profile images stacked horizontally with overlap. Shows a "+N" badge for remaining items when maxVisible limit is reached. Clicking opens a dropdown with full ItemCards, which can be clicked for detailed info.

This is a display-only component. For editable/input mode, use InfoCardGroupInput.

Installation

import { InfoCardGroup } from 'uxp/components';

Signature

const InfoCardGroup: React.FunctionComponent<InfoCardGroupProps>

Examples

Basic usage:

<InfoCardGroup items={[ { avatar: 'https://example.com/1.jpg', name: 'John Doe', email: '[email protected]' }, { avatar: 'https://example.com/2.jpg', name: 'Jane Smith', email: '[email protected]' }, ]} fields={{ image: 'avatar', name: 'name', title: 'name', subtitle: 'email' }} maxVisible={3} />

```tsx
With details:

<InfoCardGroup items={users} fields={{ image: 'avatar', name: 'name', title: 'name', subtitle: 'email' }} details={(item) => ({ fields: [ { label: 'Department', value: item.department }, { label: 'Phone', value: item.phone } ] })} maxVisible={4} size="medium" shape="circle" />

## Properties

|Name|Type|Mandatory|Default Value|Example Value|
|-|-|-|-|-|
|items|any[]|Yes|-|-|
|fields|[InfoCardFields](../types/InfoCardFields.md)|No|-|-|
|details|[InfoCardDetailsContent](../types/InfoCardDetailsContent.md)|No|-|-|
|maxVisible|number|No|-|-|
|size|[Size](../types/Size.md)|No|-|-|
|shape|[Shape](../types/Shape.md)|No|-|-|
|dropdownPosition|[DropdownPosition](../types/DropdownPosition.md)|No|-|-|
|className|string|No|-|-|
|style|React.CSSProperties|No|-|-|

## Related Types

- [InfoCardGroupProps](../types/InfoCardGroupProps.md)
- [InfoCardFields](../types/InfoCardFields.md)
- [InfoCardDetailsContent](../types/InfoCardDetailsContent.md)
- [DetailsContent](../types/DetailsContent.md)
- [RowData](../types/RowData.md)
- [ObjectInfoCardProps](../types/ObjectInfoCardProps.md)
- [ObjectField](../types/ObjectField.md)
- [Size](../types/Size.md)
- [Shape](../types/Shape.md)
- [DropdownPosition](../types/DropdownPosition.md)