# ItemCardGroup

> Rows grouped inside a single card (settings, clients, services), with an optional heading.

Source: https://ui.jcsoftdev.com/docs/components/item-card-group

Rows grouped inside a single card (settings, clients, services), with an optional heading.

## Import

```ts
import { ItemCardGroup } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/item-card-group`.

## Usage

```tsx
<ItemCardGroup
  title="Servicios y ajustes"
  description="Lo que ven tus clientes al reservar"
  items={items}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `ReactNode` |  |  |
| `description` | `ReactNode` |  |  |
| `items` * | `ItemCardGroupItem[]` |  |  |
| `selectedId` | `string` |  | Id of the highlighted row. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-itemcardgroup--default)
- [Selectable](/storybook/?path=/story/containers-itemcardgroup--selectable)
- [Narrow](/storybook/?path=/story/containers-itemcardgroup--narrow)
- [Bordered Preset](/storybook/?path=/story/containers-itemcardgroup--bordered-preset)
- [Brutal Compact](/storybook/?path=/story/containers-itemcardgroup--brutal-compact)

## Source

`packages/ui/src/containers/item-card-group/item-card-group.tsx`