# Item

> A single-line content row composing a leading media slot, a title and description content slot, and a trailing action slot along one horizontally centered line — the shape a settings row, a notification list entry, or a file row all share.

```ts
import { Item } from "@sdxc/ui";
```

Renders the row's host: a `<div>` laying Item.Media,
Item.Content, and Item.Actions on one flex line, dropping
Item.Actions to a second line once the row narrows past threshold.

## Examples

```tsx
<Item>
	<Item.Media><FileTextIcon aria-hidden /></Item.Media>
	<Item.Content>
		<Item.Title>quarterly-report.pdf</Item.Title>
		<Item.Description>2.4 MB</Item.Description>
	</Item.Content>
	<Item.Actions>
		<Button aria-label={t("files.download")}><DownloadIcon /></Button>
	</Item.Actions>
</Item>
```

```tsx
<Item>
	<Item.Content>
		<Item.Title>{t("settings.emailNotifications.title")}</Item.Title>
		<Item.Description>{t("settings.emailNotifications.description")}</Item.Description>
	</Item.Content>
	<Item.Actions>
		<Switch name="emailNotifications" />
	</Item.Actions>
</Item>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The row's compound parts: Item.Media, Item.Content, and Item.Actions. |

Also accepts everything in `TagProps<"div">`.


### Item.Media

Renders Item.MediaProps.children as the row's leading slot: a shrink-proof, centered `<div>` colored from the neutral foreground so a nested icon inherits it through `currentcolor`.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The leading graphic — an icon, an image thumbnail, an Avatar instance, or a checkbox. |

Also accepts everything in `TagProps<"div">`.


### Item.Content

Renders Item.ContentProps.children as the row's text column: a `<div>` stacking Item.Title and Item.Description with its minimum inline size collapsed to `0` so their truncation takes effect.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | Item.Title and, optionally, Item.Description. |

Also accepts everything in `TagProps<"div">`.


### Item.Title

Renders Item.TitleProps.children as the row's label in a plain `<div>`, since a document outline gains nothing from a heading entry per repeated row, truncated to one line in the foreground's emphasized tone.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The row's label text. |

Also accepts everything in `TagProps<"div">`.


### Item.Description

Renders Item.DescriptionProps.children as the row's supporting detail in a native `<p>`, truncated to one line to match Item.Title so the pair reads as one compact two-line block.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | Supporting detail below the title — a file size, an email address, a timestamp. |

Also accepts everything in `TagProps<"p">`.


### Item.Actions

Renders Item.ActionsProps.children as the row's trailing slot, pinned to the inline-end edge; once Item wraps narrow, it drops to its own line, indented past Item.Media to read as trailing.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | A run of buttons, links, or a switch — whatever control the row offers. |

Also accepts everything in `TagProps<"div">`.