New to Kendo UI for Vue? 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-weightString

bold

bold

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-weightString

bold

bold

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

#212529

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

$component-border

#dee2e6

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-shadowNull

null

null

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

#e9ecef

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

$hovered-text

#212529

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 3px rgba( $kendo-list-text, .15 )

inset 0 0 0 3px rgba(33, 37, 41, 0.15)

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

$selected-bg

#0d6efd

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

#6c757d

Description
Text color of the 'No Data' text.

In this article

Not finding the help you need?