card

Controls which built-in sections appear on each card - cover image, priority badge, progress bar, deadline, tags, user avatars, attachment/comment counts, description, and the card menu button. Each section can be toggled with a boolean or configured with an options object.

Usage

card?: CardShape;

Default: getCardShape() (enables priority, progress, description, deadline, tags).

Field	Type	Description
cover	boolean	Show the cover image strip
priority	boolean | { data?: CardShapeItem[] }	Show priority badge; data maps priority ids to labels and CSS classes
progress	boolean | { showLabel?: boolean }	Show progress bar; showLabel adds a percentage label
deadline	boolean | { format?: string }	Show deadline; format accepts tokens YYYY, MM, DD, HH, mm
users	boolean | { max?: number; data?: CardShapeUserItem[] }	Show user avatars; max limits visible count, data maps user ids to labels and images
tags	boolean | { max?: number; data?: CardShapeItem[] }	Show tag chips; max limits visible count, data maps tag ids to labels and CSS classes
attachments	boolean	Show attachment count
comments	boolean	Show comment count
description	boolean	Show description text
menu	boolean | CardMenuShape	Show the per-card menu button; object form accepts options, filter, and onclick

CardShapeItem:

Field	Type	Description
id	string | number	Unique identifier
label	string	Display text
css	string	Optional CSS class

CardShapeUserItem extends CardShapeItem with:

Field	Type	Description
img	string	Avatar image URL (optional)

CardMenuShape:

Field	Type	Description
options	any[]	Menu items shown on click
filter	(item: any, card: KanbanCard) => boolean	Per-item visibility filter
onclick	(e: any) => void	Handler for menu item clicks

A section renders only when its flag is truthy and the card has data for that field. Missing or false entries hide the section.

Example

Enable priority with custom options, tags with lookup data, and the card menu:

<script setup>
    import { Kanban } from "@svar-ui/vue-kanban";

    const card = {
        priority: {
            data: [
                { id: 1, label: "Low", css: "wx-card-priority-low" },
                { id: 2, label: "Medium", css: "wx-card-priority-medium" },
                { id: 3, label: "High", css: "wx-card-priority-high" },
            ],
        },
        tags: {
            data: [
                { id: "bug", label: "Bug" },
                { id: "feature", label: "Feature" },
            ],
        },
        users: {
            max: 3,
            data: [
                { id: 1, label: "Alice", img: "/avatars/alice.png" },
                { id: 2, label: "Bob" },
            ],
        },
        description: true,
        progress: true,
        deadline: { format: "YYYY-MM-DD" },
        menu: true,
    };
</script>

<template>
    <Kanban :cards="cards" :columns="columns" :card="card" />
</template>

Start from the defaults and extend:

<script setup>
    import { Kanban, getCardShape } from "@svar-ui/vue-kanban";

    const card = {
        ...getCardShape(),
        users: { data: users },
        menu: true,
    };
</script>

<template>
    <Kanban :cards="cards" :columns="columns" :card="card" />
</template>

Related

• Cards guide - section visibility, per-section options, and custom card body
• getCardShape - returns the default CardShape
• cardContent - custom card body replacing the default sections
• cardCss - per-card dynamic CSS classes