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:

import { Kanban } from "@svar-ui/react-kanban";
import "./App.css";

const cardCss = (card) => {
  if (card.priority === 3) return "high-priority";
  if (card.blocked) return "card-blocked";
  return "";
};

export default function App() {
  return <Kanban cards={cards} columns={columns} cardCss={cardCss} />;
}
/* App.css */
.high-priority {
  border-left: 3px solid red;
}
.card-blocked {
  opacity: 0.5;
}

Use the column parameter to style cards differently per column:

import { Kanban } from "@svar-ui/react-kanban";

const cardCss = (card, column) => {
  if (column.id === "done") return "card-completed";
  return "";
};

export default function App() {
  return <Kanban cards={cards} columns={columns} cardCss={cardCss} />;
}
  • Themes guide - CSS variables, per-card and per-column styling
  • columnCss - per-column dynamic CSS classes
  • card - CardShape controlling section visibility