---
url: "https://vueda.dev/v3/reference/theming/keys/ItemMedia.md"
title: "ItemMedia"
---

# ItemMedia

Source: `client/lib/theme/vueda-tailwind/shell/index.js`

> The leading media region for an item. The `icon` variant creates a 32px bordered tile, the `image` variant creates a 40px cropped image frame, and the default stays transparent.

Vue component: [ItemMedia](/v3/reference/api/vue/ItemMedia.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ItemMedia.md#theme-key-ItemMedia-root) | callback | The leading media region for an item. The `icon` variant creates a 32px bordered tile, the `image` variant creates a 40px cropped image frame, and the default stays transparent. |

<a id="theme-key-ItemMedia-root"></a>

## root

> The leading media region for an item. The `icon` variant creates a 32px bordered tile, the `image` variant creates a 40px cropped image frame, and the default stays transparent.

Callback:

```javascript
({ variant }) => {
            const variantClass =
                variant === "icon"
                    ? "size-8 hairline hairline-border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4"
                    : variant === "image"
                      ? "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover"
                      : "bg-transparent";
            return {
                class: [
                    // Layout and description alignment.
                    "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start",

                    // Icons and description offset.
                    "[&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",

                    variantClass,
                ],
            };
        }
```

Source: `client/lib/theme/vueda-tailwind/shell/ItemMedia.theme.js:18`