New to Kendo UI for Angular? Start a free 30-day trial

Customizing List

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-list-font-familyStringvar( --kendo-font-family, inherit)var(--kendo-font-family, inherit)
Description
The font family of the List components.
$kendo-list-sm-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the List component.
$kendo-list-sm-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the List component.
$kendo-list-sm-header-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the List header.
$kendo-list-sm-header-padding-yStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the List header.
$kendo-list-header-border-widthNumber00
Description
The border width of the List header.
$kendo-list-sm-header-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the List header.
$kendo-list-sm-header-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the List header.
$kendo-list-header-font-weightStringvar( --kendo-font-weight-bold, normal )var(--kendo-font-weight-bold, normal)
Description
The font weight of the List header.
$kendo-list-sm-item-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the List items.
$kendo-list-sm-item-padding-yStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the List items.
$kendo-list-sm-item-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the List items.
$kendo-list-sm-item-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the List items.
$kendo-list-item-group-label-sm-font-sizeStringvar( --kendo-font-size-xs, inherit )var(--kendo-font-size-xs, inherit)
Description
The font size of the List item group label.
$kendo-list-sm-group-item-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the List group items.
$kendo-list-sm-group-item-padding-yStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the List group items.
$kendo-list-item-group-label-sm-padding-xStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The horizontal padding of the List item group label.
$kendo-list-item-group-label-sm-padding-yStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The vertical padding of the List item group label.
$kendo-list-group-item-border-widthList1px 0 01px 0 0
Description
The border width of the List group items.
$kendo-list-sm-group-item-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the List group items.
$kendo-list-sm-group-item-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the List group items.
$kendo-list-group-item-font-weightStringvar( --kendo-font-weight-bold, normal )var(--kendo-font-weight-bold, normal)
Description
The font weight of the List group item.
$kendo-list-item-icon-textStringif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))var(--kendo-color-primary, #0078d4)
Description
The text color of the List item icon
$kendo-list-sizesMap( sm: ( font-size: $kendo-list-sm-font-size, line-height: $kendo-list-sm-line-height, header-padding-x: $kendo-list-sm-header-padding-x, header-padding-y: $kendo-list-sm-header-padding-y, header-font-size: $kendo-list-sm-header-font-size, header-line-height: $kendo-list-sm-header-line-height, item-padding-x: $kendo-list-sm-item-padding-x, item-padding-y: $kendo-list-sm-item-padding-y, item-font-size: $kendo-list-sm-item-font-size, item-line-height: $kendo-list-sm-item-line-height, item-group-label-padding-x: $kendo-list-item-group-label-sm-padding-x, item-group-label-padding-y: $kendo-list-item-group-label-sm-padding-y, item-group-label-font-size: $kendo-list-item-group-label-sm-font-size, group-item-padding-x: $kendo-list-sm-group-item-padding-x, group-item-padding-y: $kendo-list-sm-group-item-padding-y, group-item-font-size: $kendo-list-sm-group-item-font-size, group-item-line-height: $kendo-list-sm-group-item-line-height ), md: ( font-size: $kendo-list-md-font-size, line-height: $kendo-list-md-line-height, header-padding-x: $kendo-list-md-header-padding-x, header-padding-y: $kendo-list-md-header-padding-y, header-font-size: $kendo-list-md-header-font-size, header-line-height: $kendo-list-md-header-line-height, item-padding-x: $kendo-list-md-item-padding-x, item-padding-y: $kendo-list-md-item-padding-y, item-font-size: $kendo-list-md-item-font-size, item-line-height: $kendo-list-md-item-line-height, item-group-label-padding-x: $kendo-list-item-group-label-md-padding-x, item-group-label-padding-y: $kendo-list-item-group-label-md-padding-y, item-group-label-font-size: $kendo-list-item-group-label-md-font-size, group-item-padding-x: $kendo-list-md-group-item-padding-x, group-item-padding-y: $kendo-list-md-group-item-padding-y, group-item-font-size: $kendo-list-md-group-item-font-size, group-item-line-height: $kendo-list-md-group-item-line-height ), lg: ( font-size: $kendo-list-lg-font-size, line-height: $kendo-list-lg-line-height, header-padding-x: $kendo-list-lg-header-padding-x, header-padding-y: $kendo-list-lg-header-padding-y, header-font-size: $kendo-list-lg-header-font-size, header-line-height: $kendo-list-lg-header-line-height, item-padding-x: $kendo-list-lg-item-padding-x, item-padding-y: $kendo-list-lg-item-padding-y, item-font-size: $kendo-list-lg-item-font-size, item-line-height: $kendo-list-lg-item-line-height, item-group-label-padding-x: $kendo-list-item-group-label-lg-padding-x, item-group-label-padding-y: $kendo-list-item-group-label-lg-padding-y, item-group-label-font-size: $kendo-list-item-group-label-lg-font-size, group-item-padding-x: $kendo-list-lg-group-item-padding-x, group-item-padding-y: $kendo-list-lg-group-item-padding-y, group-item-font-size: $kendo-list-lg-group-item-font-size, group-item-line-height: $kendo-list-lg-group-item-line-height ) )
  • sm: "font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)","header-padding-x":"var(--kendo-spacing-2, 0.5rem)","header-padding-y":"var(--kendo-spacing-1\\.5, 0.375rem)","header-font-size":"var(--kendo-font-size, inherit)","header-line-height":"var(--kendo-line-height, normal)","item-padding-x":"var(--kendo-spacing-2, 0.5rem)","item-padding-y":"var(--kendo-spacing-1\\.5, 0.375rem)","item-font-size":"var(--kendo-font-size, inherit)","item-line-height":"var(--kendo-line-height, normal)","item-group-label-padding-x":"var(--kendo-spacing-0\\.5, 0.125rem)","item-group-label-padding-y":"var(--kendo-spacing-0\\.5, 0.125rem)","item-group-label-font-size":"var(--kendo-font-size-xs, inherit)","group-item-padding-x":"var(--kendo-spacing-2, 0.5rem)","group-item-padding-y":"var(--kendo-spacing-1\\.5, 0.375rem)","group-item-font-size":"var(--kendo-font-size, inherit)","group-item-line-height":"var(--kendo-line-height, normal)"
  • md: "font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)","header-padding-x":"var(--kendo-spacing-2, 0.5rem)","header-padding-y":"var(--kendo-spacing-2, 0.5rem)","header-font-size":"var(--kendo-font-size, inherit)","header-line-height":"var(--kendo-line-height, normal)","item-padding-x":"var(--kendo-spacing-2, 0.5rem)","item-padding-y":"var(--kendo-spacing-2, 0.5rem)","item-font-size":"var(--kendo-font-size, inherit)","item-line-height":"var(--kendo-line-height, normal)","item-group-label-padding-x":"var(--kendo-spacing-1, 0.25rem)","item-group-label-padding-y":"var(--kendo-spacing-1, 0.25rem)","item-group-label-font-size":"var(--kendo-font-size-xs, inherit)","group-item-padding-x":"var(--kendo-spacing-2, 0.5rem)","group-item-padding-y":"var(--kendo-spacing-2, 0.5rem)","group-item-font-size":"var(--kendo-font-size, inherit)","group-item-line-height":"var(--kendo-line-height, normal)"
  • lg: "font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)","header-padding-x":"var(--kendo-spacing-2, 0.5rem)","header-padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)","header-font-size":"var(--kendo-font-size, inherit)","header-line-height":"var(--kendo-line-height, normal)","item-padding-x":"var(--kendo-spacing-2, 0.5rem)","item-padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)","item-font-size":"var(--kendo-font-size, inherit)","item-line-height":"var(--kendo-line-height, normal)","item-group-label-padding-x":"var(--kendo-spacing-1\\.5, 0.375rem)","item-group-label-padding-y":"var(--kendo-spacing-1\\.5, 0.375rem)","item-group-label-font-size":"var(--kendo-font-size-xs, inherit)","group-item-padding-x":"var(--kendo-spacing-2, 0.5rem)","group-item-padding-y":"var(--kendo-spacing-2\\.5, 0.625rem)","group-item-font-size":"var(--kendo-font-size, inherit)","group-item-line-height":"var(--kendo-line-height, normal)"
Description
The map with the sizes of the List.
$kendo-list-bgStringvar( --kendo-component-bg, transparent )var(--kendo-component-bg, transparent)
Description
The background color of the List component.
$kendo-list-textStringvar( --kendo-component-text, inherit )var(--kendo-component-text, inherit)
Description
The text color of the List component.
$kendo-list-borderStringvar( --kendo-component-border, inherit )var(--kendo-component-border, inherit)
Description
The border color of the List component.
$kendo-list-header-bgStringif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)var(--kendo-color-app-surface, #ffffff)
Description
The background color of the List header.
$kendo-list-header-textStringif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))var(--kendo-color-primary, #0078d4)
Description
The text color of the List header.
$kendo-list-header-borderStringinheritinherit
Description
The border color of the List header.
$kendo-list-header-shadowString$kendo-box-shadow-depth-3var(--kendo-elevation-3, none)
Description
The box shadow of the List header.
$kendo-list-item-bgStringif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)var(--kendo-color-app-surface, #ffffff)
Description
The background color of the List items.
$kendo-list-item-textStringif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))var(--kendo-color-on-app-surface, #323130)
Description
The text color of the List items.
$kendo-list-item-hover-bgStringif($kendo-enable-color-system, k-color( base-hover ), k-get-theme-color-var( neutral-20 ))var(--kendo-color-base-hover, #f3f2f1)
Description
The background color of the hovered List items.
$kendo-list-item-hover-textStringif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))var(--kendo-color-on-app-surface, #323130)
Description
The text color of the hovered List items.
$kendo-list-item-focus-bgStringif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)var(--kendo-color-app-surface, #ffffff)
Description
The background color of the focused List items.
$kendo-list-item-focus-textStringif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))var(--kendo-color-on-app-surface, #323130)
Description
The text color of the focused List items.
$kendo-list-item-focus-shadowListinset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c)
Description
The box shadow of the focused List items.
$kendo-list-item-selected-bgStringif($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-40 ))var(--kendo-color-base-active, #edebe9)
Description
The background color of the selected List items.
$kendo-list-item-selected-textStringif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))var(--kendo-color-on-app-surface, #323130)
Description
The text color of the selected List items.
$kendo-list-item-selected-hover-bgStringif($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-50 ))var(--kendo-color-base-active, #edebe9)
Description
The background color of the selected hovered List items.
$kendo-list-item-selected-hover-textStringif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 ))var(--kendo-color-on-app-surface, #323130)
Description
The text color of the selected hovered List items.
$kendo-list-item-disabled-bgStringif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)var(--kendo-color-app-surface, #ffffff)
Description
The background color of the disabled List items.
$kendo-list-item-disabled-textStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)
Description
The text color of the disabled List items.
$kendo-list-group-item-bgStringif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)var(--kendo-color-app-surface, #ffffff)
Description
The background color of the List group items.
$kendo-list-group-item-textStringif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))var(--kendo-color-primary, #0078d4)
Description
The text color of the List group items.
$kendo-list-group-item-borderStringinheritinherit
Description
The border color of the List group items.
$kendo-list-group-item-shadowStringnonenone
Description
The base shadow of the List group items.
$kendo-list-no-data-textStringif($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 ))var(--kendo-color-on-app-surface, #323130)
Description
The text color of the 'No Data' text.
$kendo-list-option-label-textString$kendo-subtle-textvar(--kendo-color-subtle, #605e5c)
Description
The color of the 'Option Label' text.
$kendo-list-option-label-disabled-textString$kendo-disabled-textcolor-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)
Description
The color of the disabled 'Option Label' text.

In this article

Not finding the help you need?