Customizing Tilelayout

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-tile-layout-border-widthNumber0px0px
Description
The width of the border around the TileLayout.
$kendo-tile-layout-bgColorif($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light))#f5f5f5
Description
The background color of the TileLayout.
$kendo-tile-layout-padding-xNumberk-map-get( $kendo-spacing, 4 )16px
Description
The horizontal padding of the TileLayout.
$kendo-tile-layout-padding-yNumber$kendo-tile-layout-padding-x16px
Description
The vertical padding of the TileLayout
$kendo-tile-layout-card-border-widthNumber1px1px
Description
The width of the border around the TileLayout card.
$kendo-tile-layout-card-focus-shadowString$kendo-card-focus-shadowvar(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))
Description
The focus box shadow of the TileLayout card.
$kendo-tile-layout-hint-border-widthNumber1px1px
Description
The width of the border around the TileLayout hint.
$kendo-tile-layout-hint-border-radiusNumber$kendo-border-radius-md4px
Description
The radius of the border around the TileLayout hint.
$kendo-tile-layout-hint-borderColor$kendo-component-borderrgba(0, 0, 0, 0.12)
Description
The color of the border around the TileLayout hint.
$kendo-tile-layout-hint-bgColorrgba( white, .2 )rgba(255, 255, 255, 0.2)
Description
The background color of the TileLayout hint.

In this article

Not finding the help you need?