---
metaTitle: Userpic component | AwesCode UI
meta:
  - name: description
    content: The <AwUserpic /> component is used to render Userpic - UI Vue component for AwesCode UI.
title: Userpic
---

# Userpic

**Category:** Molecule | **Import:** Global

The `AwUserpic` component displays a user avatar with name and optional description.

## Overview

`AwUserpic` combines `AwAvatar` with user name and description text. It's designed for displaying user information in lists, cards, or user menus.

## Usage

### Basic Example

```markup
<AwUserpic 
    src="/user.jpg" 
    name="John Doe" 
    description="Software Developer"
/>
```

### Without Image

```markup
<AwUserpic 
    name="Jane Smith" 
    description="Product Manager"
/>
```

### Big Image

```markup
<AwUserpic 
    src="/user.jpg" 
    name="John Doe"
    :big-image="true"
/>
```

### Hide Name

```markup
<AwUserpic 
    src="/user.jpg" 
    name="John Doe"
    :hide-name="true"
/>
```

### Custom Content

```markup
<AwUserpic src="/user.jpg" name="John Doe">
    <template #name="{ name }">
        <strong>{{ name }}</strong>
    </template>
    <template #description="{ description }">
        <span class="text-sm">{{ description }}</span>
    </template>
</AwUserpic>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| src | Full URL to the picture | `String` | `false` | `''` |
| name | User name | `String` | `false` | `''` |
| hideName | Hide name (increases image size) | `Boolean` | `false` | `false` |
| description | Text under name | `String` | `false` | `''` |
| bigImage | Use larger image size | `Boolean` | `false` | `false` |
| crop | Crop max width | `Boolean` | `false` | `true` |
| truncate | Truncate title and description | `Boolean` | `false` | `true` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| name | Custom name content | `{ name, description }` | Name text |
| description | Custom description content | `{ name, description }` | Description text |
| after-name | Content after name | `{ name }` | - |
| after-description | Content after description | - | - |

### Events

No events are emitted by this component.

## Related Components

- `AwAvatar` - Avatar component (used internally)
- `AwDescription` - Description component
- `AwIslandAvatar` - Avatar in island layout

## Notes

- **Import Method:** Global - Available as molecule component
- Uses `AwAvatar` internally for avatar display
- Image size: 22px (default) or 36px (bigImage or hideName)
- Automatically shows colored background with initials when no image
- Name and description are truncated by default
- Crop prop controls max-width cropping
- Use for user lists, user cards, or user information displays