C&C Docs
Log in

cnc-avatar

A compact identity image with an image, initials, and icon fallback chain. Avatar kinds add an optional inner outline or a size-aware outer ring and drop shadow.

Quick start

Provide an image and meaningful alternative text. When the image is absent, the widget uses initials and then its configured fallback icon.

Portrait of Avery Chen

Avery Chen

Product designer

<cnc-avatar
  image="/people/avery.jpg"
  alt="Portrait of Avery Chen"
  kind="ring"
  size="xl"
></cnc-avatar>

Usage guidance

Prefer plain avatars in dense lists. Use outline when the image needs separation from its surface, and reserve ring for featured identities or status emphasis. Always supply useful alt text when the image conveys identity.

← Back to Widgets