# Profile Grid

Agents: start with [Workspace for Agents](https://workspace.socra.com/solutions/agents.md), the verified steps for getting an identity on a team, with commands, cost and limits.

Socra: Build your workforce with AI teammates that learn your business, take initiative and work alongside your team.

Canonical: https://socra.design/composed-components/profile-grid

## Governing rules

[Building with Socra components](https://socra.design/agents.md) explains setup, consumption rules and verification.

Semantic owner: Flash Module `ui-component-family-media` in Socra Cortex when available. It supplies current intent and prerequisite rules; the public API below supplies exact code names and values.

Use published property names, not inspector labels. Composition and preview settings are not component props. Public styling escape hatches do not permit product-local presentation overrides.

Recognize teammates by their portraits and open their profiles.

A compact portrait-led overview for people and CoAgents. The host supplies authorized destinations and factual descriptions.

Status: partial. Published-artifact responsive and interaction evidence is tracked on issue_01m6mhwjk6sw3g6652mj4zqf76.

Library: @socra/web-ui

## Anatomy

- ProfileGrid is a named list with responsive equal-width tracks.
- ProfileGridItem presents a shared rounded Avatar, complete name and optional description in one native link.
- Photos fall back to host-supplied initials. Names wrap within two visible lines; their complete text remains the native tooltip and accessible link name. Descriptions wrap in full.

## Properties

[Complete public API, including inherited properties and event signatures](https://socra.design/composed-components/profile-grid/api.md)

### Setup

- Use the compatible Socra theme provider and published component styles.

### ProfileGrid

Import: `import { ProfileGrid } from '@socra/web-ui/profile-grid';`

| Property | Type or permitted values | Default / omission | Required | Meaning and behavior | Inspector |
| --- | --- | --- | --- | --- | --- |
| `children` | `ReactNode` | Required input | yes |  | Direct API |
| `label` | `string` | Required input | yes | Accessible collection name. The host owns filtering and pagination. | Direct API |

### ProfileGridItem

Import: `import { ProfileGridItem } from '@socra/web-ui/profile-grid';`

| Property | Type or permitted values | Default / omission | Required | Meaning and behavior | Inspector |
| --- | --- | --- | --- | --- | --- |
| `accessory` | `ReactNode` | Omitted; no declared default | no | Optional status or control, rendered outside the profile link. | Direct API |
| `description` | `string \| undefined` | Omitted; no declared default | no | Short factual supporting text; never inferred presence. | Direct API |
| `fallback` | `string` | Required input | yes | Initials or another short, non-interactive fallback. | Direct API |
| `href` | `string` | Required input | yes | Host-authorized profile destination; native links retain browser navigation. | Direct API |
| `name` | `string` | Required input | yes |  | Direct API |
| `src` | `string \| undefined` | Omitted; no declared default | no |  | Direct API |

### Behavior and constraints

- Hosts supply authorized native links and own pagination, profile data and factual status.

### Inspector mappings

| Setting | Initial preview value | Consumed code |
| --- | --- | --- |
| Name | `Atlas` | derived: Set name on the first fixture profile. |
| Profiles shown | `6` | composition: Choose the number of fixture ProfileGridItem children. |
| Show description | `true` | composition: Include or omit factual descriptions on the fixture profiles. |
| Status action | `true` | composition: Include a separate status action outside each profile link; clicking it toggles the local example status. |

## Example

```tsx
import { profileGrid } from '@socra/web-ui';
<profileGrid.ProfileGrid label="Your teammates">
  <profileGrid.ProfileGridItem name="Atlas" fallback="AT" href="/profiles/atlas" description="Computer: Sleeping" />
  <profileGrid.ProfileGridItem name="Research partner" fallback="RP" href="/profiles/research" />
</profileGrid.ProfileGrid>
```