KanbanCard

Card for a kanban lane with title, optional subtitle and a colored tag. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

Vue

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

Tones

Visa documentsGroup of 12Urgent

Hotel voucherDar Al ImanDone

Transfer bookingJeddah airport

Vue

<UiKanbanCard
  title="Visa documents"
  sub="Group of 12"
  tag="Urgent"
  tone="danger"
 />

<UiKanbanCard
  title="Hotel voucher"
  sub="Dar Al Iman"
  tag="Done"
  tone="success"
 />

<UiKanbanCard title="Transfer booking" sub="Jeddah airport" />

Sizes

Visa documentsGroup of 12Urgent

Vue

<UiKanbanCard
  title="Visa documents"
  sub="Group of 12"
  tag="Urgent"
  tone="danger"
  size="xs"
 />

<UiKanbanCard
  title="Visa documents"
  sub="Group of 12"
  tag="Urgent"
  tone="danger"
  size="sm"
 />

<UiKanbanCard
  title="Visa documents"
  sub="Group of 12"
  tag="Urgent"
  tone="danger"
  size="md"
 />

<UiKanbanCard
  title="Visa documents"
  sub="Group of 12"
  tag="Urgent"
  tone="danger"
  size="lg"
 />

<UiKanbanCard
  title="Visa documents"
  sub="Group of 12"
  tag="Urgent"
  tone="danger"
  size="xl"
 />

API reference

Simple kanban card with title, subtitle, free content and an optional tag.

Props

PropType and valuesDefaultDescription

titlerequiredstring—Card title.

substring—Subtitle under the title.

tagstring—Badge at the bottom.

tonedefaultbrandsuccesswarningdangerinfo—Badge tone for tag.

sizexssmmdlgxl'md'Scales padding, text and avatars.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultExtra content between the subtitle and the tag. React passes it as children.