Skip to main content

cardCss

Callback that returns CSS class name(s) appended to a card's wrapper element. Runs for every rendered card. The returned classes are combined with any static css value already set on the card object.

Usage​

cardCss?: (card: KanbanCard, column: ColumnView) => string;
ParameterTypeDescription
cardKanbanCardThe card object being rendered
columnColumnViewThe projected column the card belongs to

Returns a string of space-separated CSS class names, or an empty string.

Example​

Assign a class based on priority:

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

  function cardCss(card) {
    if (card.priority === 3) return "high-priority";
    if (card.blocked) return "card-blocked";
    return "";
  }
</script>

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

<style scoped>
  :global(.high-priority) {
    border-left: 3px solid red;
  }
  :global(.card-blocked) {
    opacity: 0.5;
  }
</style>

Use the column parameter to style cards differently per column:

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

  function cardCss(card, column) {
    if (column.id === "done") return "card-completed";
    return "";
  }
</script>

<template>
  <Kanban :cards="cards" :columns="columns" :cardCss="cardCss" />
</template>
  • Themes guide - CSS variables, per-card and per-column styling
  • columnCss - per-column dynamic CSS classes
  • card - CardShape controlling section visibility