LeadCard

CRM lead tile with avatar, code, phone, expected amount and an optional colored tag. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

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

Tones

IY
Ibrahim Yusuf
L-1042
Hot
+966 55 123 456712 400 SAR
MS
Maryam Said
L-1043
New
+998 90 555 11226 900 SAR
Vue
<UiLeadCard
  name="Ibrahim Yusuf"
  code="L-1042"
  phone="+966 55 123 4567"
  amount="12 400 SAR"
  tag="Hot"
  tone="danger"
 />

<UiLeadCard
  name="Maryam Said"
  code="L-1043"
  phone="+998 90 555 1122"
  amount="6 900 SAR"
  tag="New"
  tone="info"
 />

Sizes

IY
Ibrahim Yusuf
L-1042
Hot
+966 55 123 456712 400 SAR
IY
Ibrahim Yusuf
L-1042
Hot
+966 55 123 456712 400 SAR
IY
Ibrahim Yusuf
L-1042
Hot
+966 55 123 456712 400 SAR
IY
Ibrahim Yusuf
L-1042
Hot
+966 55 123 456712 400 SAR
IY
Ibrahim Yusuf
L-1042
Hot
+966 55 123 456712 400 SAR
Vue
<UiLeadCard
  name="Ibrahim Yusuf"
  code="L-1042"
  phone="+966 55 123 4567"
  amount="12 400 SAR"
  tag="Hot"
  tone="danger"
  size="xs"
 />

<UiLeadCard
  name="Ibrahim Yusuf"
  code="L-1042"
  phone="+966 55 123 4567"
  amount="12 400 SAR"
  tag="Hot"
  tone="danger"
  size="sm"
 />

<UiLeadCard
  name="Ibrahim Yusuf"
  code="L-1042"
  phone="+966 55 123 4567"
  amount="12 400 SAR"
  tag="Hot"
  tone="danger"
  size="md"
 />

<UiLeadCard
  name="Ibrahim Yusuf"
  code="L-1042"
  phone="+966 55 123 4567"
  amount="12 400 SAR"
  tag="Hot"
  tone="danger"
  size="lg"
 />

<UiLeadCard
  name="Ibrahim Yusuf"
  code="L-1042"
  phone="+966 55 123 4567"
  amount="12 400 SAR"
  tag="Hot"
  tone="danger"
  size="xl"
 />

API reference

CRM lead card with avatar, code, phone and amount.

Props

PropType and valuesDefaultDescription
namerequiredstring—Lead name.
codestring—Lead or deal code under the name, monospaced.
tagstring—Optional badge text, e.g. a source or status.
tonedefaultbrandsuccesswarningdangerinfo—Badge tone for tag; neutral when omitted.
phonestring—Phone number with a phone icon.
amountstring | number—Amount shown on the right, rendered as given (format it yourself).
sizexssmmdlgxl'md'Scales padding, text and avatars.