DealCard

Deal tile with title, amount, stage badge, win probability, owner and due date. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

Vue

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

Stages

Group of 24, RamadanNegotiation

86 000 SAR

Probability60%

TTimurMar 15

Family Umrah x5Won

21 500 SAR

Probability100%

LLayloMar 02

Vue

<UiDealCard
  title="Group of 24, Ramadan"
  amount="86 000 SAR"
  stage="Negotiation"
  tone="warning"
  :probability="60"
  owner="Timur"
  due="Mar 15"
 />

<UiDealCard
  title="Family Umrah x5"
  amount="21 500 SAR"
  stage="Won"
  tone="success"
  :probability="100"
  owner="Laylo"
  due="Mar 02"
 />

Sizes

Group of 24, RamadanNegotiation

86 000 SAR

Probability60%

TTimurMar 15

Group of 24, RamadanNegotiation

86 000 SAR

Probability60%

TTimurMar 15

Group of 24, RamadanNegotiation

86 000 SAR

Probability60%

TTimurMar 15

Group of 24, RamadanNegotiation

86 000 SAR

Probability60%

TTimurMar 15

Group of 24, RamadanNegotiation

86 000 SAR

Probability60%

TTimurMar 15

Vue

<UiDealCard
  title="Group of 24, Ramadan"
  amount="86 000 SAR"
  stage="Negotiation"
  tone="warning"
  :probability="60"
  owner="Timur"
  due="Mar 15"
  size="xs"
 />

<UiDealCard
  title="Group of 24, Ramadan"
  amount="86 000 SAR"
  stage="Negotiation"
  tone="warning"
  :probability="60"
  owner="Timur"
  due="Mar 15"
  size="sm"
 />

<UiDealCard
  title="Group of 24, Ramadan"
  amount="86 000 SAR"
  stage="Negotiation"
  tone="warning"
  :probability="60"
  owner="Timur"
  due="Mar 15"
  size="md"
 />

<UiDealCard
  title="Group of 24, Ramadan"
  amount="86 000 SAR"
  stage="Negotiation"
  tone="warning"
  :probability="60"
  owner="Timur"
  due="Mar 15"
  size="lg"
 />

<UiDealCard
  title="Group of 24, Ramadan"
  amount="86 000 SAR"
  stage="Negotiation"
  tone="warning"
  :probability="60"
  owner="Timur"
  due="Mar 15"
  size="xl"
 />

API reference

CRM deal card with stage badge, amount, win probability and owner; the card type inside PipelineBoard.

Props

PropType and valuesDefaultDescription

titlerequiredstring—Deal title.

stagestring—Stage badge text; no badge when omitted.

tonedefaultbrandsuccesswarningdangerinfo'info'Badge tone for the stage.

amountstring | number—Large amount, rendered as given.

probabilitynumber0Win probability 0-100, shown as a progress bar and percent.

ownerstring—Owner name with avatar.

duestring—Due date caption, right aligned.

sizexssmmdlgxl'md'Scales padding, text and avatars.