New to Kendo UI for AngularStart a free 30-day trial

Customizing Orgchart

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-orgchart-spacerStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The spacing index of the OrgChart.
$kendo-orgchart-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The vertical padding of the OrgChart.
$kendo-orgchart-padding-xString$kendo-orgchart-padding-yvar(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the OrgChart.
$kendo-orgchart-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the OrgChart.
$kendo-orgchart-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the OrgChart.
$kendo-orgchart-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the OrgChart.
$kendo-orgchart-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the OrgChart.
$kendo-orgchart-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the OrgChart.
$kendo-orgchart-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the OrgChart.
$kendo-orgchart-node-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The spacing of the OrgChart node.
$kendo-orgchart-group-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The spacing of the OrgChart group.
$kendo-orgchart-node-container-gapString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The spacing of the OrgChart node container.
$kendo-orgchart-node-group-padding-yString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The vertical padding of the OrgChart node group.
$kendo-orgchart-node-group-padding-xString$kendo-orgchart-node-group-padding-yvar(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the OrgChart node group.
$kendo-orgchart-node-group-border-widthNumber1px1px
Description
The border width of the OrgChart node group.
$kendo-orgchart-node-group-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the OrgChart node group.
$kendo-orgchart-node-group-bgStringif($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light))var(--kendo-color-surface, #f5f5f5)
Description
The background color of the OrgChart node group.
$kendo-orgchart-node-group-textString$kendo-base-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the OrgChart node group.
$kendo-orgchart-node-group-borderString$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the OrgChart node group.
$kendo-orgchart-node-group-focus-borderNull$kendo-card-focus-bordernull
Description
The border color of the focused OrgChart node group.
$kendo-orgchart-node-group-focus-shadowList0 2px 4px -1px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), rgba( $elevation, .2 )), 0 4px 5px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 14%, transparent), rgba( $elevation, .14 )), 0 1px 10px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 12%, transparent), rgba( $elevation, .12 ))0 2px 4px -1px color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 20%, transparent), 0 4px 5px 0 color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 14%, transparent), 0 1px 10px 0 color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 12%, transparent)
Description
The shadow of the focused OrgChart node group.
$kendo-orgchart-node-group-title-font-sizeStringvar( --kendo-font-size-xl, inherit )var(--kendo-font-size-xl, inherit)
Description
The font size of the OrgChart node group title.
$kendo-orgchart-node-group-title-margin-bottomCalculationcalc( #{$kendo-orgchart-spacer} / 4 )calc(var(--kendo-spacing-6, 1.5rem) / 4)
Description
The bottom margin of the OrgChart node group title.
$kendo-orgchart-node-group-title-line-heightStringvar( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)
Description
The line height of the OrgChart node group title.
$kendo-orgchart-node-group-subtitle-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the OrgChart node group subtitle.
$kendo-orgchart-node-group-subtitle-margin-bottomString$kendo-orgchart-spacervar(--kendo-spacing-6, 1.5rem)
Description
The bottom margin of the OrgChart node group subtitle.
$kendo-orgchart-node-group-subtitle-textColorrgba( black, .54 )rgba(0, 0, 0, 0.54)
Description
The line height of the OrgChart node group subtitle.
$kendo-orgchart-card-widthNumber300px300px
Description
The width of the OrgChart Card.
$kendo-orgchart-card-padding-yString$kendo-card-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the OrgChart Card.
$kendo-orgchart-card-padding-xString$kendo-orgchart-card-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The horizontal padding of the OrgChart Card.
$kendo-orgchart-card-border-widthNumber1px1px
Description
The border width of the OrgChart Card.
$kendo-orgchart-card-shadowStringnonenone
Description
The shadow of the OrgChart Card.
$kendo-orgchart-card-focus-shadowList$kendo-orgchart-node-group-focus-shadow0 2px 4px -1px color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 20%, transparent), 0 4px 5px 0 color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 14%, transparent), 0 1px 10px 0 color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 12%, transparent)
Description
The shadow of the focused OrgChart Card.
$kendo-orgchart-card-title-margin-bottomStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The bottom margin of the OrgChart Card title.
$kendo-orgchart-card-title-font-sizeNullnullnull
Description
The font size of the OrgChart Card title.
$kendo-orgchart-card-subtitle-margin-bottomStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The bottom margin of the OrgChart Card subtitle.
$kendo-orgchart-card-subtitle-font-sizeNullnullnull
Description
The font size of the OrgChart Card subtitle.
$kendo-orgchart-card-body-border-widthList2px 0 02px 0 0
Description
The border width of the OrgChart Card body.
$kendo-orgchart-card-body-border-colorColortransparenttransparent
Description
The border color of the OrgChart Card body.
$kendo-orgchart-card-body-vbox-margin-rightStringk-math-div( $kendo-orgchart-spacer, 2 )var(--kendo-spacing-6, 1.5rem)/2
Description
The right margin of the OrgChart Card body title wrap.
$kendo-orgchart-card-body-vbox-min-heightNumber$kendo-card-avatar-size45px
Description
The min height of the OrgChart Card body title wrap.
$kendo-orgchart-line-sizeNumber1px1px
Description
The size of the OrgChart connecting line.
$kendo-orgchart-line-fillString$kendo-base-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The fill color of the OrgChart connecting line.
$kendo-orgchart-line-v-heightNumber25px25px
Description
The height of the OrgChart connecting line.
In this article
VariablesSuggested Links
Not finding the help you need?
Contact Support