# MediaObject
Package: @nannier/canvas
Version: 4.1.0
Status: source-snapshot (not proof of an npm release)
Source SHA-256: 63292636c7ff2f224185aef7c96ac78124f9170a170b90ee11718addfa280643
Source: `src/molecules/media-objects/media-objects.md`
Human reference: https://canvas.nannier.com/components/media-objects
## Public imports
```tsx
import { MediaObject } from "@nannier/canvas";
```
The following examples are source excerpts. Supply application data and handlers; snippets using `tokens` read `const { tokens } = useTheme()` inside a component. Import React hooks from React. Intentional “Don't” examples illustrate unsupported patterns.
Image or icon paired with text content. The fundamental building block for list items, notifications, and comment layouts.
## Usage
```tsx
```
## Variants
### Compact
```tsx
```
### Bare row with meta
```tsx
```
### Icon
```tsx
} />
```
### Action
The trailing `action` slot takes any control; the button's `onPress` is yours to
wire.
```tsx
Invite} />
```
### Numbered step
`bareIcon` draws the `icon` node as it is, with no tinted box around it, for a lead that is its own mark: a numbered `` numbers a list of steps.
```tsx
1} title="Intrinsic · no JavaScript" description="Fill or hug inside the parent's bounds, a minWidth floor, wrapping." />
```
### Tappable
Passing `onPress` makes the whole row a single tap target; wire it to your own
handler and every tap runs it.
```tsx
{}} bordered avatar="RC" title="Rachel Chen" description="Engineering Lead" />
```
## Do & Don't
### Avatar
**Do** — Top-align with `start` so the avatar anchors to the first line of the title.
```tsx
```
**Don't** — Centering the avatar against a multi-line body leaves it floating beside the middle of the text.
```tsx
```
### Icon
**Do** — Keep the lead icon box compact with an 18px glyph so it reads as a tidy lead affordance.
```tsx
} />
```
**Don't** — An oversized icon box throws off the optical balance with the two-line text.
```tsx
Security firstEnd-to-end encryption with automatic key rotation.
```
### Action
**Do** — Pass `truncate` so long text clips in place and the trailing action stays pinned right.
```tsx
Invite} />
```
**Don't** — Without truncation a long email wraps and pushes the trailing button out of alignment.
```tsx
Invite} />
```
## Supported props
### MediaObjectProps
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| title | string \| undefined | no | | Primary line: the bold heading (e.g. a person's name). |
| description | string \| undefined | no | | Secondary line: muted supporting text under the title (e.g. a role or email). |
| body | ReactNode | no | | Optional longer body paragraph rendered below the description. |
| meta | string \| undefined | no | | Trailing metadata text pinned to the right (e.g. "2h ago", "admin"). |
| avatar | string \| undefined | no | | Initials for the leading avatar (e.g. "RC"); rendered as {avatar}. |
| src | string \| number \| undefined | no | | Photo for the leading avatar (a URI string or a bundled `require(...)` image); takes precedence over initials. |
| icon | ReactNode | no | | A leading icon glyph rendered in a tinted square box (stands in for an SVG icon). |
| bareIcon | boolean \| undefined | no | false | Draw the `icon` node as it is, with no tinted box around it: a lead that is its own mark, such as a numbered `` (the Layout page's "try in this order" list). |
| action | ReactNode | no | | A trailing action node (e.g. a