Customizing Listview

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-listview-padding-x	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The horizontal padding of the ListView.
$kendo-listview-padding-y	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The vertical padding of the ListView.
$kendo-listview-border-width	Number	1px	1px
Description The width of the border around bordered ListView.
$kendo-listview-font-family	String	var( --kendo-font-family, inherit )	var(--kendo-font-family, inherit)
Description The font family of the ListView.
$kendo-listview-font-size	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
Description The font size of the ListView.
$kendo-listview-line-height	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
Description The line height of the ListView.
$kendo-listview-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the ListView.
$kendo-listview-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the ListView.
$kendo-listview-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the ListView.
$kendo-listview-item-padding-x	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The horizontal padding of the ListView items.
$kendo-listview-item-padding-y	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The vertical padding of the ListView items.
$kendo-listview-item-selected-text	Null	null	null
Description The text color of the selected ListView items.
$kendo-listview-item-selected-bg	String	if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25))	color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent)
Description The background color of the selected ListView items.
$kendo-listview-item-selected-border	Null	null	null
Description The border color of the selected ListView items.
$kendo-listview-item-focus-text	Null	null	null
Description The text color of the focused ListView items.
$kendo-listview-item-focus-bg	Null	null	null
Description The background color of the focused ListView items.
$kendo-listview-item-focus-border	Null	null	null
Description The border color of the focused ListView items.
$kendo-listview-item-focus-shadow	List	inset 0 0 0 2px rgba(0, 0, 0, .13)	inset 0 0 0 2px rgba(0, 0, 0, 0.13)
Description The box shadow of the focused ListView items.

Suggested Links

• Styling Overview
• Web Font Icons
• Preview of the Themed Components