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>
  import { Kanban } from "@svar-uisvelte-kanban";

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

<Kanban {cards} {columns} {cardCss} />

<style>
  :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>
  import { Kanban } from "@svar-uisvelte-kanban";

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

<Kanban {cards} {columns} {cardCss} />
  • Themes guide — CSS variables, per-card and per-column styling
  • columnCss — per-column dynamic CSS classes
  • card — CardShape controlling section visibility