Skip to main content

DHTMLX Kanban. Styling cards example

Beyond the built-in color stripe, cards can have fully custom CSS: gradient backgrounds, icons, badges, or any visual indicator. Card styling works at two levels: per-card CSS classes in the data, and a global css function in cardShape that applies to all cards.

Live example​

const { Kanban, Toolbar, defaultEditorShape } = kanban;
const { cards, columns, cardShape } = getData();

cards[0].css = "gradient";

const board = new Kanban("#root", {
    columns,
    cards,
    cardShape: {
        ...cardShape,
        cover: false,
        users: false,
        subtasks: {
            show: true,
        },
        css: obj => "star",
    },
    editorShape: defaultEditorShape.filter(e => e.key !== "users"),
});

const toolbar = new Toolbar("#toolbar", { api: board.api });
<!-- custom styles -->

<style>
.gradient {
        background: linear-gradient(to right, #ffff70, orange);
	}
  	.star:before {
        content: "\2605";
        position: absolute;
        left: 3px;
        top: 2px;
        font-size: 15px;
        color: #00000030;
	}
</style>

The code demonstrates both approaches. A specific card gets css: "gradient" in its data, applying a yellow-to-orange gradient background. The cardShape.css function returns "star" for all cards, adding a star icon via CSS ::before pseudo-element. Both classes stack. The first card gets both the gradient and the star.

Solution overview​

  1. Add css: "className" to individual card objects for per-card styling
  2. Set cardShape.css to a function returning a class name for global card styling
  3. Define CSS classes with the desired visual effects (gradients, pseudo-elements, etc.)

Key points​

  • Two CSS levels stack: Per-card css and cardShape.css both apply. They don't override each other
  • cardShape.css is a function: It receives the card object, so you can return different classes based on card data (similar to highlighting outdated tasks)
  • Pseudo-elements work: CSS ::before and ::after on the card class are a clean way to add icons or badges without modifying the card template

API reference​

  • cardShape: Card appearance including css function
  • cards: Card data including per-card css property

Additional resources​