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

Customizing Expander

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-expander-spacing-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical spacing of the ExpansionPanel.
$kendo-expander-border-widthNumber1px1px
Description
The width of the border around the ExpansionPanel.
$kendo-expander-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the ExpansionPanel.
$kendo-expander-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the ExpansionPanel.
$kendo-expander-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The hine height of the ExpansionPanel.
$kendo-expander-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the ExpansionPanel.
$kendo-expander-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the ExpansionPanel.
$kendo-expander-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the ExpansionPanel.
$kendo-expander-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent)
Description
The box shadow of the focused ExpansionPanel.
$kendo-expander-header-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the ExpansionPanel header.
$kendo-expander-header-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The vertical padding of the ExpansionPanel header.
$kendo-expander-header-textString$kendo-expander-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the ExpansionPanel header.
$kendo-expander-header-bgColortransparenttransparent
Description
The background color of the ExpansionPanel header.
$kendo-expander-header-borderNullnullnull
Description
The border color of the ExpansionPanel header.
$kendo-expander-header-hover-bgColorrgba( black, .04 )rgba(0, 0, 0, 0.04)
Description
The background color of the hovered ExpansionPanel header.
$kendo-expander-header-focus-bgNullnullnull
Description
The background color of the focused ExpansionPanel header.
$kendo-expander-header-focus-shadowList$kendo-list-item-focus-shadowinset 0 0 0 3px color-mix(in srgb, var(--kendo-color-on-app-surface, #212529) 15%, transparent)
Description
The box shadow of the focused ExpansionPanel header.
$kendo-expander-title-textString$kendo-color-primaryvar(--kendo-color-primary, #0d6efd)
Description
The text color of the ExpansionPanel title.
$kendo-expander-header-sub-title-textString$kendo-subtle-textvar(--kendo-color-subtle, #596169)
Description
The text color of the ExpansionPanel sub-title.
$kendo-expander-indicator-margin-xStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The horizontal margin of the ExpansionPanel indicator.
$kendo-expander-content-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the ExpansionPanel content.
$kendo-expander-content-padding-yStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The vertical padding of the ExpansionPanel content.
In this article
VariablesSuggested Links
Not finding the help you need?
Contact Support