primitives avatar

Avatar

User avatar with image, initials fallback, size scale, and optional status dot.

$ ndui add avatar

Size scale (initials fallback)

GR GR GR GR GR

Source

<partial name="_Avatar" model='@(new { Name = "George Rios", Size = "xs" })' />
<partial name="_Avatar" model='@(new { Name = "George Rios", Size = "sm" })' />
<partial name="_Avatar" model='@(new { Name = "George Rios", Size = "md" })' />
<partial name="_Avatar" model='@(new { Name = "George Rios", Size = "lg" })' />
<partial name="_Avatar" model='@(new { Name = "George Rios", Size = "xl" })' />

Image with status dot

Source

<partial name="_Avatar" model='@(new { Name = "Alex Chen",
        ImageUrl = "/avatars/alex.png", Size = "md", Status = "online" })' />
<partial name="_Avatar" model='@(new { Name = "Morgan Davis",
        ImageUrl = "/avatars/morgan.png", Size = "md", Status = "away" })' />
<partial name="_Avatar" model='@(new { Name = "Sam Patel",
        ImageUrl = "/avatars/sam.png", Size = "md", Status = "offline" })' />