Customizing Taskboard

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-taskboard-spacerStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacing index of the TaskBoard.
$kendo-taskboard-padding-yNullnullnull
Description
The vertical padding of the TaskBoard.
$kendo-taskboard-padding-xNullnullnull
Description
The horizontal of the TaskBoard.
$kendo-taskboard-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the TaskBoard.
$kendo-taskboard-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the TaskBoard.
$kendo-taskboard-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the TaskBoard.
$kendo-taskboard-bgNullnullnull
Description
The background color of the TaskBoard.
$kendo-taskboard-textNullnullnull
Description
The text color of the TaskBoard.
$kendo-taskboard-borderNullnullnull
Description
The border color of the TaskBoard.
$kendo-taskboard-toolbar-padding-yString$kendo-taskboard-spacervar(--kendo-spacing-4, 1rem)
Description
The vertical padding of the TaskBoard Toolbar.
$kendo-taskboard-toolbar-padding-xString$kendo-taskboard-toolbar-padding-yvar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the TaskBoard Toolbar.
$kendo-taskboard-toolbar-bgNullnullnull
Description
The background color of the TaskBoard Toolbar.
$kendo-taskboard-toolbar-textNullnullnull
Description
The text color of the TaskBoard Toolbar.
$kendo-taskboard-toolbar-borderNullnullnull
Description
The border color of the TaskBoard Toolbar.
$kendo-taskboard-toolbar-gradientNullnullnull
Description
The gradient of the TaskBoard Toolbar.
$kendo-taskboard-content-padding-yString$kendo-taskboard-spacervar(--kendo-spacing-4, 1rem)
Description
The vertical padding of the TaskBoard content.
$kendo-taskboard-content-padding-xString$kendo-taskboard-content-padding-yvar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the TaskBoard content.
$kendo-taskboard-column-container-spacing-yCalculationcalc( #{$kendo-taskboard-spacer} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The vertical spacing of the TaskBoard column container.
$kendo-taskboard-column-container-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the TaskBoard column container.
$kendo-taskboard-column-container-padding-xCalculationcalc( #{$kendo-taskboard-spacer} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The horizontal padding of the TaskBoard column container.
$kendo-taskboard-columns-container-gapString$kendo-taskboard-spacervar(--kendo-spacing-4, 1rem)
Description
The spacing of the TaskBoard columns container.
$kendo-taskboard-column-widthNumber320px320px
Description
The default width of the TaskBoard column.
$kendo-taskboard-column-border-widthNumber1px1px
Description
The border width of the TaskBoard column.
$kendo-taskboard-column-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the TaskBoard column.
$kendo-taskboard-column-bgString$kendo-base-bgvar(--kendo-color-surface, #fafafa)
Description
The background color of the TaskBoard column.
$kendo-taskboard-column-textNullnullnull
Description
The text color of the TaskBoard column.
$kendo-taskboard-column-borderColortransparenttransparent
Description
The border color of the TaskBoard column.
$kendo-taskboard-column-focus-bgNullnullnull
Description
The background color of the focused TaskBoard column.
$kendo-taskboard-column-focus-textNullnullnull
Description
The text color of the focused TaskBoard column.
$kendo-taskboard-column-focus-borderStringif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 ))var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16))
Description
The border color of the focused TaskBoard column.
$kendo-taskboard-column-header-padding-yCalculationcalc( #{$kendo-taskboard-spacer} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The vertical padding of the TaskBoard column header.
$kendo-taskboard-column-header-padding-xCalculation$kendo-taskboard-column-header-padding-ycalc(var(--kendo-spacing-4, 1rem) / 2)
Description
The horizontal padding of the TaskBoard column header.
$kendo-taskboard-column-header-gapCalculationcalc( #{$kendo-taskboard-spacer} / 4 )calc(var(--kendo-spacing-4, 1rem) / 4)
Description
The spacing of the TaskBoard column header.
$kendo-taskboard-column-header-actions-gapCalculationcalc( #{$kendo-taskboard-spacer} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The spacing of the TaskBoard column header actions.
$kendo-taskboard-column-header-font-weightNumber500500
Description
The font weight of the TaskBoard column header.
$kendo-taskboard-column-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the TaskBoard column header.
$kendo-taskboard-column-cards-padding-yNullnullnull
Description
The vertical padding of the TaskBoard column Card wrapper.
$kendo-taskboard-column-cards-padding-xNullnullnull
Description
The horizontal padding of the TaskBoard column Card wrapper.
$kendo-taskboard-column-cards-gapCalculationcalc( #{$kendo-taskboard-spacer} / 2 )calc(var(--kendo-spacing-4, 1rem) / 2)
Description
The spacing of the TaskBoard column Card wrapper.
$kendo-taskboard-pane-widthNumber$kendo-taskboard-column-width320px
Description
The default width of the TaskBoard pane.
$kendo-taskboard-pane-padding-yNullnullnull
Description
The vertical padding of the TaskBoard pane.
$kendo-taskboard-pane-padding-xNullnullnull
Description
The horizontal padding of the TaskBoard pane.
$kendo-taskboard-pane-border-widthNumber1px1px
Description
The border width of the TaskBoard pane.
$kendo-taskboard-pane-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the TaskBoard pane.
$kendo-taskboard-pane-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the TaskBoard pane.
$kendo-taskboard-pane-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the TaskBoard pane.
$kendo-taskboard-pane-header-padding-yCalculationcalc( #{$kendo-taskboard-spacer} * .75 )calc(var(--kendo-spacing-4, 1rem) * 0.75)
Description
The vertical padding of the TaskBoard pane header.
$kendo-taskboard-pane-header-padding-xString$kendo-taskboard-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the TaskBoard pane header.
$kendo-taskboard-pane-header-font-weightNumber500500
Description
The font weight of the TaskBoard pane header.
$kendo-taskboard-pane-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the TaskBoard pane header.
$kendo-taskboard-pane-content-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the TaskBoard pane content.
$kendo-taskboard-pane-content-padding-xString$kendo-taskboard-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the TaskBoard pane content.
$kendo-taskboard-pane-actions-padding-yCalculationcalc( #{$kendo-taskboard-spacer} * .75 )calc(var(--kendo-spacing-4, 1rem) * 0.75)
Description
The vertical padding of the TaskBoard pane actions.
$kendo-taskboard-pane-actions-padding-xString$kendo-taskboard-spacervar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the TaskBoard pane actions.
$kendo-taskboard-card-padding-yString$kendo-taskboard-spacervar(--kendo-spacing-4, 1rem)
Description
The vertical padding of the TaskBoard Card.
$kendo-taskboard-card-padding-xString$kendo-taskboard-card-padding-yvar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the TaskBoard Card.
$kendo-taskboard-card-border-widthNumber$kendo-card-border-width1px
Description
The border width of the TaskBoard Card.
$kendo-taskboard-card-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the TaskBoard Card.
$kendo-taskboard-card-shadowNull$kendo-card-shadownull
Description
The shadow of the TaskBoard Card.
$kendo-taskboard-card-bgString$kendo-card-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the TaskBoard Card.
$kendo-taskboard-card-textString$kendo-card-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the TaskBoard Card.
$kendo-taskboard-card-borderString$kendo-card-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the TaskBoard Card.
$kendo-taskboard-card-category-border-widthNumber4px4px
Description
The border width of the TaskBoard Card category.
$kendo-taskboard-card-hover-borderStringif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% ))var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16))
Description
The border color of the hovered TaskBoard Card.
$kendo-taskboard-card-focus-borderStringif($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% ))var(--kendo-color-border-alt, rgba(0, 0, 0, 0.16))
Description
The border color of the focused TaskBoard Card.
$kendo-taskboard-card-focus-shadowStringnonenone
Description
The shadow of the focused TaskBoard Card.
$kendo-taskboard-card-selected-borderStringif($kendo-enable-color-system, k-color( primary-emphasis ), k-color-tint( $kendo-color-primary-lighter, 5 ))var(--kendo-color-primary-emphasis, #ff9d97)
Description
The border of the selected TaskBoard Card.
$kendo-taskboard-card-selected-shadowStringnonenone
Description
The shadow of the selected TaskBoard Card.
$kendo-taskboard-card-header-textString$kendo-color-primaryvar(--kendo-color-primary, #ff6358)
Description
The text color of the TaskBoard Card header text.
$kendo-taskboard-card-header-hover-textStringif($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)var(--kendo-color-primary-hover, #ea5a51)
Description
The text color of the hovered TaskBoard Card header text.
$kendo-taskboard-card-header-focus-textStringif($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker)var(--kendo-color-primary-hover, #ea5a51)
Description
The text color of the focused TaskBoard Card header text.
$kendo-taskboard-drag-placeholder-border-widthNumber1px1px
Description
The border width of the TaskBoard Card placeholder.
$kendo-taskboard-drag-placeholder-border-radiusString$kendo-taskboard-card-border-radiusvar(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the TaskBoard Card placeholder.
$kendo-taskboard-drag-placeholder-bgColorrgba(255, 255, 255, .2)rgba(255, 255, 255, 0.2)
Description
The background color of the TaskBoard Card placeholder.
$kendo-taskboard-drag-placeholder-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the TaskBoard Card placeholder.

In this article

Not finding the help you need?