Progress LogoProgressDesign System
FoundationThemesCSS UtilitiesComponentsResources

Foundation

Themes

CSS Utilities

Components

Resources

Components

TileLayout

TileLayouts are UI elements for organizing information into dashboard-like views.

On this page

Sass Variables

The Telerik and Kendo UI TileLayout is a composite UI component. To configure and customize its appearance, use not only its dedicated Sass variables but also the variables provided by the Card component.

VariableDefault ValueComputed ValueValue
kendo-tile-layout-border-width0px0pxDefault: 0pxComputed: 0px
Description: The width of the border around the TileLayout.
kendo-tile-layout-bg$kendo-base-bg #fafafaDefault: $kendo-base-bgComputed: #fafafa
Description: The background color of the TileLayout.
kendo-tile-layout-padding-xk-map-get( $kendo-spacing, 4 )16pxDefault: k-map-get( $kendo-spacing, 4 )Computed: 16px
Description: The horizontal padding of the TileLayout.
kendo-tile-layout-padding-y$kendo-tile-layout-padding-x16pxDefault: $kendo-tile-layout-padding-xComputed: 16px
Description: The vertical padding of the TileLayout
kendo-tile-layout-card-border-width$kendo-card-border-width1pxDefault: $kendo-card-border-widthComputed: 1px
Description: The width of the border around the TileLayout card.
kendo-tile-layout-card-focus-shadow$kendo-card-focus-shadownullDefault: $kendo-card-focus-shadowComputed: null
Description: The focus box shadow of the TileLayout card.
kendo-tile-layout-hint-border-width1px1pxDefault: 1pxComputed: 1px
Description: The width of the border around the TileLayout hint.
kendo-tile-layout-hint-border-radius$kendo-border-radius-lg6pxDefault: $kendo-border-radius-lgComputed: 6px
Description: The radius of the border around the TileLayout hint.
kendo-tile-layout-hint-border$kendo-component-border rgba(0, 0, 0, 0.08)Default: $kendo-component-borderComputed: rgba(0, 0, 0, 0.08)
Description: The color of the border around the TileLayout hint.
kendo-tile-layout-hint-bg rgba(255, 255, 255, .2) rgba(255, 255, 255, 0.2)Default: rgba(255, 255, 255, .2)Computed: rgba(255, 255, 255, 0.2)
Description: The background color of the TileLayout hint.

Card Variables

VariableDefault ValueComputed ValueValue
kendo-card-padding-xk-map-get( $kendo-spacing, 4 )16pxDefault: k-map-get( $kendo-spacing, 4 )Computed: 16px
Description: The horizontal padding of the Card.
kendo-card-padding-yk-map-get( $kendo-spacing, 3 )12pxDefault: k-map-get( $kendo-spacing, 3 )Computed: 12px
Description: The vertical padding of the Card.
kendo-card-border-width1px1pxDefault: 1pxComputed: 1px
Description: The width of the border around the Card.
kendo-card-border-radius$kendo-border-radius-lg6pxDefault: $kendo-border-radius-lgComputed: 6px
Description: The border radius of the Card.
kendo-card-inner-border-radiuscalc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} )calc(6px - 1px)Default: calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} )Computed: calc(6px - 1px)
Description: The inner border radius of the Card.
kendo-card-font-family$kendo-font-familyinheritDefault: $kendo-font-familyComputed: inherit
Description: The font family of the Card.
kendo-card-font-size$kendo-font-size-md14pxDefault: $kendo-font-size-mdComputed: 14px
Description: The font size of the Card.
kendo-card-line-height$kendo-line-height-md1.4285714286Default: $kendo-line-height-mdComputed: 1.4285714286
Description: The line height of the Card.
kendo-card-deck-gapk-map-get( $kendo-spacing, 4 )16pxDefault: k-map-get( $kendo-spacing, 4 )Computed: 16px
Description: The spacing between the Cards in the Card deck.
kendo-card-bg$kendo-component-bg #ffffffDefault: $kendo-component-bgComputed: #ffffff
Description: The background color of the Card.
kendo-card-text$kendo-component-text #424242Default: $kendo-component-textComputed: #424242
Description: The text color of the Card.
kendo-card-border$kendo-component-border rgba(0, 0, 0, 0.08)Default: $kendo-component-borderComputed: rgba(0, 0, 0, 0.08)
Description: The border color of the Card.
kendo-card-shadownullnullDefault: nullComputed: null
Description: The shadow of the Card.
kendo-card-focus-bgnullnullDefault: nullComputed: null
Description: The background color of the focused Card.
kendo-card-focus-textnullnullDefault: nullComputed: null
Description: The text color of the focused Card.
kendo-card-focus-borderrgba( black, .15 ) rgba(0, 0, 0, 0.15)Default: rgba( black, .15 )Computed: rgba(0, 0, 0, 0.15)
Description: The border color of the focused Card.
kendo-card-focus-shadownullnullDefault: nullComputed: null
Description: The shadow of the focused Card.
kendo-card-header-padding-x$kendo-card-padding-x16pxDefault: $kendo-card-padding-xComputed: 16px
Description: The horizontal padding of the Card header.
kendo-card-header-padding-y$kendo-card-padding-y12pxDefault: $kendo-card-padding-yComputed: 12px
Description: The vertical padding of the Card header.
kendo-card-header-border-width1px1pxDefault: 1pxComputed: 1px
Description: The bottom border width of the Card header.
kendo-card-header-bgnullnullDefault: nullComputed: null
Description: The background color of the Card header.
kendo-card-header-text$kendo-component-header-text #424242Default: $kendo-component-header-textComputed: #424242
Description: The text color of the Card header.
kendo-card-header-border$kendo-component-header-border rgba(0, 0, 0, 0.08)Default: $kendo-component-header-borderComputed: rgba(0, 0, 0, 0.08)
Description: The border color of the Card header.
kendo-card-body-padding-xk-map-get( $kendo-spacing, 4 )16pxDefault: k-map-get( $kendo-spacing, 4 )Computed: 16px
Description: The horizontal padding of the Card body.
kendo-card-body-padding-yk-map-get( $kendo-spacing, 4 )16pxDefault: k-map-get( $kendo-spacing, 4 )Computed: 16px
Description: The vertical padding of the Card body.
kendo-card-footer-padding-x$kendo-card-padding-x16pxDefault: $kendo-card-padding-xComputed: 16px
Description: The horizontal padding of the Card footer.
kendo-card-footer-padding-y$kendo-card-padding-y12pxDefault: $kendo-card-padding-yComputed: 12px
Description: The vertical padding of the Card footer.
kendo-card-footer-border-width1px1pxDefault: 1pxComputed: 1px
Description: The top border width of the Card footer.
kendo-card-footer-bgnullnullDefault: nullComputed: null
Description: The background color of the Card footer.
kendo-card-footer-text$kendo-component-header-text #424242Default: $kendo-component-header-textComputed: #424242
Description: The text color of the Card footer.
kendo-card-footer-border$kendo-component-header-border rgba(0, 0, 0, 0.08)Default: $kendo-component-header-borderComputed: rgba(0, 0, 0, 0.08)
Description: The border color of the Card footer.
kendo-card-title-margin-bottomk-map-get( $kendo-spacing, 2 )8pxDefault: k-map-get( $kendo-spacing, 2 )Computed: 8px
Description: The bottom margin of the Card title.
kendo-card-title-font-size$kendo-h5-font-size16pxDefault: $kendo-h5-font-sizeComputed: 16px
Description: The font size of the Card title.
kendo-card-title-font-familynullnullDefault: nullComputed: null
Description: The font family of the Card title.
kendo-card-title-line-height1.251.25Default: 1.25Computed: 1.25
Description: The line height of the Card title.
kendo-card-title-font-weight$kendo-font-weight-normal400Default: $kendo-font-weight-normalComputed: 400
Description: The font weight of the Card title.
kendo-card-title-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the Card title.
kendo-card-subtitle-margin-bottomk-map-get( $kendo-spacing, 2 )8pxDefault: k-map-get( $kendo-spacing, 2 )Computed: 8px
Description: The bottom margin of the Card subtitle.
kendo-card-subtitle-font-size$kendo-font-size-sm12pxDefault: $kendo-font-size-smComputed: 12px
Description: The font size of the Card subtitle.
kendo-card-subtitle-font-familynullnullDefault: nullComputed: null
Description: The font family of the Card subtitle.
kendo-card-subtitle-line-heightnormalnormalDefault: normalComputed: normal
Description: The line height of the Card subtitle.
kendo-card-subtitle-font-weight$kendo-font-weight-normal400Default: $kendo-font-weight-normalComputed: 400
Description: The font weight of the Card subtitle.
kendo-card-subtitle-letter-spacingnullnullDefault: nullComputed: null
Description: The letter spacing of the Card subtitle.
kendo-card-subtitle-text$kendo-subtle-text #666666Default: $kendo-subtle-textComputed: #666666
Description: The text color of the Card subtitle.
kendo-card-img-max-width100px100pxDefault: 100pxComputed: 100px
Description: The maximum width of the Card image.
kendo-card-avatar-size45px45pxDefault: 45pxComputed: 45px
Description: The size of the Avatar in the Card.
kendo-card-avatar-spacing$kendo-card-header-padding-x16pxDefault: $kendo-card-header-padding-xComputed: 16px
Description: The spacing between the Avatar and the text in the Card.
kendo-card-actions-padding-xk-map-get( $kendo-spacing, 2 )8pxDefault: k-map-get( $kendo-spacing, 2 )Computed: 8px
Description: The horizontal padding of the Card actions.
kendo-card-actions-padding-yk-map-get( $kendo-spacing, 2 )8pxDefault: k-map-get( $kendo-spacing, 2 )Computed: 8px
Description: The vertical padding of the Card actions.
kendo-card-actions-border-width1px1pxDefault: 1pxComputed: 1px
Description: The top border width of the Card actions.
kendo-card-actions-gapk-map-get( $kendo-spacing, 2 )8pxDefault: k-map-get( $kendo-spacing, 2 )Computed: 8px
Description: The spacing between the Card actions.
kendo-card-deck-scroll-button-radius0px0pxDefault: 0pxComputed: 0px
Description: The border radius of the scroll button in the Card deck.
kendo-card-deck-scroll-button-offset-$kendo-button-border-width-1pxDefault: -$kendo-button-border-widthComputed: -1px
Description: The border radius of the scroll button in the Card deck.
kendo-card-callout-width20px20pxDefault: 20pxComputed: 20px
Description: The width of the Card callout.
kendo-card-callout-height20px20pxDefault: 20pxComputed: 20px
Description: The height of the Card callout.

On this page

Progress Logo

Copyright © 2023, Progress Software Corporation and/or its subsidiaries or affiliates.
All Rights Reserved.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.

Terms of UsePrivacy CenterSecurity
Center TrademarksLicense Agreements
Code of ConductDoc Copyright