Avatar

User avatar component (image, initials) used in lists, nav, and profiles

What is it?

An avatar represents a user or entity visually—either via an image or initials. Avatars are used in lists, comments, nav bars, and profile headers, often with size variants and status indicators.

Mockdown

```
[◯ AB]  Alice Baker
[◯ JS]  John Smith
```

Characteristics:
- Size variants (xs, sm, md, lg)
- Fallback initials if image missing
- Optional presence/status badges

Layouts Using This Pattern

┌──────────┬────────────────────────────────────┐
│ ☰ Menu   │  ◉ Dashboard        🔔  👤        │
│          ├────────────────────────────────────┤
│ ● Home   │  ┌────────┐ ┌────────┐ ┌────────┐ │
│ ○ Stats  │  │ ▲ 1,234│ │ ● 87%  │ │ $9.4K  │ │
│ ○ Users  │  │ KPI ···│ │ KPI ···│ │ KPI ···│ │
│ ○ Config │  └────────┘ └────────┘ └────────┘ │
│          │  ┌──────────────────────────────┐  │
│          │  │  📈 Chart                    │  │
│          │  │  ╱╲    ╱╲  ╱╲               │  │
│          │  │ ╱  ╲╱╱  ╲╱  ╲╱───          │  │
│          │  └──────────────────────────────┘  │
│          │  ┌──────────────────────────────┐  │
│          │  │  Name    Role     Status     │  │
│          │  │  ─────   ─────   ────────   │  │
│          │  │  Alice   Admin    ● Active   │  │
│          │  │  Bob     User     ○ Idle     │  │
│          │  └──────────────────────────────┘  │
└──────────┴────────────────────────────────────┘

Dashboard

SaaS Analytics Dashboard

A full-featured analytics dashboard with KPI cards, revenue charts, user activity tables, and a collapsible sidebar nav — ideal for SaaS admin panels.

--analytics--kpi--charts

Complex

Use these prompts to generate layouts built with this pattern.

--avatar --profile --image --initials

Ready to build?

Use this pattern as inspiration when creating UI layouts with AI tools.

Try the Editor Browse Layout Prompts