CSS Classes

The Kanban component marks columns, cards, swim lanes, and grid elements with CSS classes. These classes can be used for targeted styling beyond the common values exposed as built-in theme variables.

In the lists below, * is the value of the theme property. With the default theme, *_card_inner becomes kanban_default_card_inner. Feature-specific and state classes are added only when the corresponding feature or state is active.

This inventory applies to DayPilot Pro for JavaScript and its Angular, React, and Vue wrappers. Other DayPilot product editions may render a different class surface.

You can generate a complete custom theme using the Theme Designer. For a targeted override of the embedded default theme, use a sufficiently specific selector:

body .kanban_default_card_inner {
  border-radius: 6px;
}

Layout and Status

• *_main: Top-level Kanban element.

• *_block: Overlay that temporarily blocks interaction.

• *_message: Message bar.

• *_message_close: Close control in a message bar.

• *_loading: Loading indicator.

• *_corner: Upper-left corner element.

• *_corner_inner: Content element inside the upper-left corner.

• *_divider: Divider between swim-lane headers and Kanban cells.

• *_splitter: Splitter next to the swim-lane header area.

• *_divider_horizontal: Horizontal divider below column headers.

• *_divider_horizontal_frozen_top: Divider next to top frozen swim lanes.

• *_divider_horizontal_frozen_bottom: Divider next to bottom frozen swim lanes.

• *_divider_horizontal_sticky: Divider used by sticky swim-lane rendering.

• *_scrollable: Main scrollable board viewport.

• *_matrix: Kanban cell-grid container.

• *_grid_top: Grid layer for top frozen swim lanes.

• *_grid_sticky: Grid layer for sticky swim lanes.

• *_grid_bottom: Grid layer for bottom frozen swim lanes.

Columns

• *_columnheader: Column-header container.

• *_columnheader_inner: Inner column-header container.

• *_columnheader_cell: Structural column-header cell.

• *_columnheader_cell_inner: Inner structural column-header cell.

• *_columnheader_splitter: Splitter between adjacent column-header cells.

• *_colheadercell: Visible Kanban column header cell.

• *_colheadercell_inner: Content element inside a visible Kanban column header.

• *_columnmove_handle: Column-moving drag handle.

• *_columnmove_position: Drop-position indicator shown during column moving.

• *_timeheader_scroll: Scrollable column-header container used by the shared board renderer.

• *_timeheader_cell: Shared structural class on column-header cells.

• *_timeheader_cell_inner: Inner element paired with *_timeheader_cell.

• *_timeheader_cell_last: Added to the last visible column header.

Cards

• *_card: Main card element.

• *_card_inner: Inner card element that carries the card background and border.

• *_card_header: Card header area.

• *_card_body: Card body area.

• *_card_bar: Card accent bar.

• *_card_delete: Built-in card delete control.

• *_card_moving_source: Added to the source card while it is being moved.

• *_selected: Added to a selected card.

Swim Lanes

• *_rowheader: Swim-lane header cell.

• *_rowheader_inner: Inner swim-lane header element.

• *_rowheader_inner_text: Text container inside a swim-lane header.

• *_rowheader_selected: Added to a selected swim-lane header.

• *_rowheadercol: Additional swim-lane header column.

• *_rowheadercolX: Generated additional-column class, such as *_rowheadercol1.

• *_rowheaderdivider: Horizontal divider between swim-lane headers.

• *_rowheader_scroll: Scrollable swim-lane header container.

• *_row_new: New swim-lane entry element.

• *_rowmove_handle: Swim-lane moving drag handle.

• *_rowmove_source: Source swim-lane marker during moving.

• *_rowmove_position_before: Drop-position marker before a swim lane.

• *_rowmove_position_after: Drop-position marker after a swim lane.

• *_rowmove_position_child: Drop-position marker for a child swim lane.

• *_rowmove_position_forbidden: Forbidden swim-lane drop-position marker.

• *_header_icon: Swim-lane header show/hide control.

• *_header_icon_hide: Added while swim-lane headers are visible.

• *_header_icon_show: Added while swim-lane headers are hidden.

• *_swimlane_collapse: Control for collapsing a swim lane.

• *_swimlane_expand: Control for expanding a swim lane.

Cells and Grid

• *_cell: Kanban grid cell.

• *_cell_business: Added to cells marked as business cells.

• *_cell_selected: Added to selected cells.

• *_cell_focus: Cell keyboard-focus marker.

• *_cell_focus_top: Top edge of the cell focus marker.

• *_cell_focus_bottom: Bottom edge of the cell focus marker.

• *_collapsed: Added to cells in a collapsed swim lane.

• *_matrix_horizontal_line: Horizontal grid line.

• *_matrix_vertical_line: Vertical grid line.

• *_matrix_vertical_break: Grid line at a structural break.

Card-Moving Shadow

• *_shadow: Card moving position indicator.

• *_shadow_inner: Inner element of the card-moving shadow.

• *_shadow_overlap: Added when the shadow overlaps an occupied position.

• *_shadow_forbidden: Added when the current card position is not allowed.