UserCell

Avatar with a name and a secondary line for table cells and lists. The size prop (xs, sm, md, lg, xl) sets the avatar and text size (a number in px still works).

Jump to API reference

Import

Vue

import { UiUserCell } from '@ziyarago/ui/vue'

Users

AKAhmed Khanahmed@ziyarago.com

Fatima NoorGroup leader

Vue

<UiUserCell name="Ahmed Khan" sub="ahmed@ziyarago.com" />

<UiUserCell
  name="Fatima Noor"
  sub="Group leader"
  src="/3d/guide.png"
  :size="44"
 />

Sizes

AKAhmed Khanahmed@ziyarago.comAKAhmed Khanahmed@ziyarago.comAKAhmed Khanahmed@ziyarago.comAKAhmed Khanahmed@ziyarago.comAKAhmed Khanahmed@ziyarago.com

Vue

<UiUserCell name="Ahmed Khan" sub="ahmed@ziyarago.com" size="xs" />

<UiUserCell name="Ahmed Khan" sub="ahmed@ziyarago.com" size="sm" />

<UiUserCell name="Ahmed Khan" sub="ahmed@ziyarago.com" size="md" />

<UiUserCell name="Ahmed Khan" sub="ahmed@ziyarago.com" size="lg" />

<UiUserCell name="Ahmed Khan" sub="ahmed@ziyarago.com" size="xl" />

API reference

Avatar with a name and optional subtitle, for table cells and lists of people.

Props

PropType and valuesDefaultDescription

namerequiredstring—Display name, also used for avatar initials.

substring—Muted line under the name, such as an email or role.

srcstring—Avatar image URL. Initials are shown without it.

sizexssmmdlgxl'md'Avatar diameter: xs 24, sm 30, md 36, lg 44, xl 56 px; a number is used as px.