DesignDojo
1.2-components · 11-avatar

Estimated time: 5 min

JK
Avatar anatomy

When to Use

  • Comments and activity feeds to identify who did what.
  • User menus and profile areas where identity confirms account context.
  • Team lists when quick face-or-name recognition improves scanning.

When NOT to Use

Use consistent avatar sizing per context and always provide initials fallback.

If identity is irrelevant, show simple text labels and reduce visual noise.

Variants

Image avatar
Initials fallback
Stacked group

Confused?

Use Avatar for people, and use Badge when you only need metadata labels.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Build an avatar component with image, fallback initials, and optional online status indicator for user lists and comments.

Pencil Prompt

Create avatar examples for single profile, stacked team group, and fallback initials when image is missing.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Accordion