ContactPanel

Contact details card with avatar, role, descriptions list and Call / Message actions. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

Vue
import { UiContactPanel } from '@ziyarago/ui/vue'

Default

FZ
Fatima Zahra
Group leader
Phone
+966 50 987 6543
Telegram
@fatima_z
Email
fatima@example.com
City
Jeddah
Vue
<UiContactPanel
  name="Fatima Zahra"
  role="Group leader"
  phone="+966 50 987 6543"
  telegram="@fatima_z"
  email="fatima@example.com"
  city="Jeddah"
 />

Sizes

FZ
Fatima Zahra
Group leader
Phone
+966 50 987 6543
Telegram
@fatima_z
Email
fatima@example.com
City
Jeddah
FZ
Fatima Zahra
Group leader
Phone
+966 50 987 6543
Telegram
@fatima_z
Email
fatima@example.com
City
Jeddah
FZ
Fatima Zahra
Group leader
Phone
+966 50 987 6543
Telegram
@fatima_z
Email
fatima@example.com
City
Jeddah
FZ
Fatima Zahra
Group leader
Phone
+966 50 987 6543
Telegram
@fatima_z
Email
fatima@example.com
City
Jeddah
FZ
Fatima Zahra
Group leader
Phone
+966 50 987 6543
Telegram
@fatima_z
Email
fatima@example.com
City
Jeddah
Vue
<UiContactPanel
  name="Fatima Zahra"
  role="Group leader"
  phone="+966 50 987 6543"
  telegram="@fatima_z"
  email="fatima@example.com"
  city="Jeddah"
  size="xs"
 />

<UiContactPanel
  name="Fatima Zahra"
  role="Group leader"
  phone="+966 50 987 6543"
  telegram="@fatima_z"
  email="fatima@example.com"
  city="Jeddah"
  size="sm"
 />

<UiContactPanel
  name="Fatima Zahra"
  role="Group leader"
  phone="+966 50 987 6543"
  telegram="@fatima_z"
  email="fatima@example.com"
  city="Jeddah"
  size="md"
 />

<UiContactPanel
  name="Fatima Zahra"
  role="Group leader"
  phone="+966 50 987 6543"
  telegram="@fatima_z"
  email="fatima@example.com"
  city="Jeddah"
  size="lg"
 />

<UiContactPanel
  name="Fatima Zahra"
  role="Group leader"
  phone="+966 50 987 6543"
  telegram="@fatima_z"
  email="fatima@example.com"
  city="Jeddah"
  size="xl"
 />

API reference

Contact detail card with avatar, role, contact fields and Call / Message buttons.

Props

PropType and valuesDefaultDescription
namerequiredstring—Contact name.
rolestring—Role or company under the name.
phonestring—Phone row.
telegramstring—Telegram handle row.
emailstring—Email row.
citystring—City row.
labels{ call?: string; message?: string }—Override built-in English strings.
sizexssmmdlgxl'md'Scales padding, text and avatars.

Events

Vue: @name. React: onName.

callCalled with no arguments when Call is clicked.
messageCalled with no arguments when Message is clicked.