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

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-bgString$kendo-base-bgvar(--kendo-color-surface, #fafafa)
Description
The background color of the TileLayout.
$kendo-tile-layout-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the TileLayout.
$kendo-tile-layout-padding-yString$kendo-tile-layout-padding-xvar(--kendo-spacing-4, 1rem)
Description
The vertical padding of the TileLayout
$kendo-tile-layout-card-border-widthNumber$kendo-card-border-width1px
Description
The width of the border around the TileLayout card.
$kendo-tile-layout-card-focus-shadowNull$kendo-card-focus-shadownull
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-radiusStringk-border-radius(lg)var(--kendo-border-radius-lg, 0.375rem)
Description
The radius of the border around the TileLayout hint.
$kendo-tile-layout-hint-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The color of the border around the TileLayout hint.
$kendo-tile-layout-hint-bgColorrgba(255, 255, 255, .2)rgba(255, 255, 255, 0.2)
Description
The background color of the TileLayout hint.
In this article
VariablesSuggested Links
Not finding the help you need?
Contact Support