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

Customizing List

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-list-font-sizeNull

null

null

Description
Font size of the list component, if no size is set.
$kendo-list-line-heightNull

null

null

Description
Line height of the list component, if no size is set.
$kendo-list-header-padding-xNull

null

null

Description
Horizontal padding of list header, if no size is set.
$kendo-list-header-padding-yNull

null

null

Description
Vertical padding of list header, if no size is set.
$kendo-list-header-border-widthList

0 0 1px

0 0 1px

Description
Border width of list header.
$kendo-list-header-font-sizeNull

null

null

Description
Font size of list header, if no size is set.
$kendo-list-header-line-heightNull

null

null

Description
Line height of list header, if no size is set.
$kendo-list-header-font-weightNull

null

null

Description
Font weight of list header.
$kendo-list-item-padding-xNull

null

null

Description
Horizontal padding of list items, when no size is set.
$kendo-list-item-padding-yNull

null

null

Description
Vertical padding of list items, when no size is set.
$kendo-list-item-font-sizeNull

null

null

Description
Font size of list items, if no size is set.
$kendo-list-item-line-heightNull

null

null

Description
Line height of list items, if no size is set.
$kendo-list-group-item-padding-xNull

null

null

Description
Horizontal padding of list group items, when no size is set.
$kendo-list-group-item-padding-yNull

null

null

Description
Vertical padding of list group items, when no size is set.
$kendo-list-group-item-border-widthList

1px 0 0

1px 0 0

Description
Border width of list group items.
$kendo-list-group-item-font-sizeNull

null

null

Description
Font size of list group items, if no size is set.
$kendo-list-group-item-line-heightNull

null

null

Description
Line height of list group items, if no size is set.
$kendo-list-group-item-font-weightNull

null

null

Description
Font weight of list group item.
$kendo-list-bgColor

$component-bg

#ffffff

Description
Background color of the list component.
$kendo-list-textColor

$component-text

#424242

Description
Text color of the list component.
$kendo-list-borderColor

$component-border

rgba(0, 0, 0, 0.08)

Description
Border color of the list component.
$kendo-list-header-bgNull

null

null

Description
Background color of list header.
$kendo-list-header-textNull

null

null

Description
Text color of list header.
$kendo-list-header-borderString

inherit

inherit

Description
Border color of list header.
$kendo-list-header-shadowList

0 5px 10px 0 rgba(0, 0, 0, .06)

0 5px 10px 0 rgba(0, 0, 0, 0.06)

Description
Box shadow of list header.
$kendo-list-item-bgNull

null

null

Description
Background color of list items.
$kendo-list-item-textNull

null

null

Description
Text color of list items.
$kendo-list-item-hover-bgColor

$hovered-bg

#f0f0f0

Description
Background color of hovered list items.
$kendo-list-item-hover-textColor

$hovered-text

#424242

Description
Text color of hovered list items.
$kendo-list-item-focus-bgNull

null

null

Description
Background color of focused list items.
$kendo-list-item-focus-textNull

null

null

Description
Text color of focused list items.
$kendo-list-item-focus-shadowList

inset 0 0 0 2px rgba(0, 0, 0, .12)

inset 0 0 0 2px rgba(0, 0, 0, 0.12)

Description
Box shadow of focused list items.
$kendo-list-item-selected-bgColor

$selected-bg

#ff6358

Description
Background color of selected list items.
$kendo-list-item-selected-textColor

$selected-text

white

Description
Text color of selected list items.
$kendo-list-group-item-bgNull

null

null

Description
Background color of list group items.
$kendo-list-group-item-textNull

null

null

Description
Text color of list group items.
$kendo-list-group-item-borderString

inherit

inherit

Description
The border color of list group items.
$kendo-list-group-item-shadowNull

null

null

Description
The base shadow of list group items.
$kendo-list-no-data-textColor

$subtle-text

#666666

Description
Text color of the 'No Data' text.

In this article

Not finding the help you need?