# Item

A row with media, a title, a description and actions, alone or in a list.

```ehtml Example
import {
  Item, ItemGroup, ItemSeparator, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions,
  ItemHeader, ItemFooter,
} from "@elements/ui/item";
import { Icon } from "@elements/ui/icon";
import { Button } from "@elements/ui/button";

<Item variant="outline">
  <ItemMedia variant="icon"><Icon name="shield" /></ItemMedia>
  <ItemContent>
    <ItemTitle>Security alert</ItemTitle>
    <ItemDescription>New sign-in from an unknown device.</ItemDescription>
  </ItemContent>
  <ItemActions><Button size="sm">Review</Button></ItemActions>
</Item>

<Item href="/settings/profile" title="Your profile" description="Name, photo and email." />
```

## Parts

| Part | What it is |
|---|---|
| `ItemGroup` | .item-group, role=list. |
| `ItemSeparator` | .item-separator, a decorative rule. |
| `ItemMedia` | .item-media: an icon tile, a thumbnail, an avatar. |
| `ItemContent` | .item-content: title and description, takes the free width. |
| `ItemTitle` | .item-title. |
| `ItemDescription` | .item-description, two lines at most. |
| `ItemActions` | .item-actions: trailing controls. |
| `ItemHeader` | .item-header: a full line above. |
| `ItemFooter` | .item-footer: a full line below. |

## Attributes

### Item

| Attribute | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `""` | Renders a title in ItemContent. |
| `description` | `string` | `""` | Renders a description in ItemContent. |
| `variant` | `"default" \| "outline" \| "muted"` | `"default"` | Transparent, bordered, or filled. |
| `size` | `"md" \| "sm" \| "xs"` | `"md"` | Padding and gap. |
| `href` | `string` | `""` | Makes the whole row a link. |
| `class` | `string` | `""` | Extra classes. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | Other attributes for the row or link: target, rel, aria-\*. |

### ItemGroup

| Attribute | Type | Default | Description |
|---|---|---|---|
| `label` | `string` | `""` | Names the list. |
| `gap` | `boolean` | `false` | Space between items. |

### ItemMedia

| Attribute | Type | Default | Description |
|---|---|---|---|
| `variant` | `"default" \| "icon" \| "image" \| "avatar"` | `"default"` | icon is a bordered tile; image a square thumbnail. |

### every part

| Attribute | Type | Default | Description |
|---|---|---|---|
| `class` | `string` | `""` | Extra classes. |

## Slots

| Slot | Part | Content |
|---|---|---|
| `media` | `Item` | Media for the title shortcut. |
| `default` | `Item` | Parts in any order. |
| `default` | `each part` | The part's content. |

## Keyboard

| Keys | Action |
|---|---|
| `Tab` | Focuses a link item, then the controls inside items. |
| `Enter` | Follows a link item. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-variant` | `"default" \| "outline" \| "muted"` | Item |
| `data-size` | `"md" \| "sm" \| "xs"` | Item |
| `data-variant` | `"default" \| "icon" \| "image" \| "avatar"` | ItemMedia |

## Accessibility

- ItemGroup is a list and each Item in it a listitem; a link item keeps its link role inside a listitem wrapper.
- Link items show the theme focus ring and follow on Enter.
- Icon media is hidden from screen readers; the title says what the row is.

## See also

- [Icon](icon): An inline stroke icon from the set the templates draw their own controls with, sized in pixels and colored by the text around it.
- [Button](button): A button or a link that looks like one, in six variants and four sizes.
- [Badge](badge): A small label for a status, a count or a category, built on the pill.
- [Card](card): A surface with a header, body and footer, built on the base card styles.
- [Alert](alert): A callout that draws attention to a message, with an icon, a title and an action.
- [Kbd](kbd): A keyboard key or shortcut, as text.