Sass Variables
The Telerik and Kendo UI Card enables you to configure and customize its appearance through the available Sass variables. Additionally, to configure and customize the appearance of its buttons, use the Sass variables provided by the Button component.
Variable | Default Value | Computed Value | Value |
---|---|---|---|
kendo-card-padding-x | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4) Computed: var(--kendo-spacing-4, 1rem) |
Description: The horizontal padding of the Card. | |||
kendo-card-padding-y | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) | Default: k-spacing(3) Computed: var(--kendo-spacing-3, 0.75rem) |
Description: The vertical padding of the Card. | |||
kendo-card-border-width | 1px | 1px | Default: 1px Computed: 1px |
Description: The width of the border around the Card. | |||
kendo-card-border-radius | k-border-radius(lg) | var(--kendo-border-radius-lg, 0.375rem) | Default: k-border-radius(lg) Computed: var(--kendo-border-radius-lg, 0.375rem) |
Description: The border radius of the Card. | |||
kendo-card-inner-border-radius | calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} ) | calc(var(--kendo-border-radius-lg, 0.375rem) - 1px) | Default: calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} ) Computed: calc(var(--kendo-border-radius-lg, 0.375rem) - 1px) |
Description: The inner border radius of the Card. | |||
kendo-card-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit ) Computed: var(--kendo-font-family, inherit) |
Description: The font family of the Card. | |||
kendo-card-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit ) Computed: var(--kendo-font-size, inherit) |
Description: The font size of the Card. | |||
kendo-card-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal ) Computed: var(--kendo-line-height, normal) |
Description: The line height of the Card. | |||
kendo-card-deck-gap | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4) Computed: var(--kendo-spacing-4, 1rem) |
Description: The spacing between the Cards in the Card deck. | |||
kendo-card-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bg Computed: var(--kendo-color-surface-alt, #ffffff) |
Description: The background color of the Card. | |||
kendo-card-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-text Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: The text color of the Card. | |||
kendo-card-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The border color of the Card. | |||
kendo-card-shadow | null | null | Default: null Computed: null |
Description: The shadow of the Card. | |||
kendo-card-focus-bg | null | null | Default: null Computed: null |
Description: The background color of the focused Card. | |||
kendo-card-focus-text | null | null | Default: null Computed: null |
Description: The text color of the focused Card. | |||
kendo-card-focus-border | rgba( 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-shadow | null | null | Default: null Computed: null |
Description: The shadow of the focused Card. | |||
kendo-card-header-padding-x | $kendo-card-padding-x | var(--kendo-spacing-4, 1rem) | Default: $kendo-card-padding-x Computed: var(--kendo-spacing-4, 1rem) |
Description: The horizontal padding of the Card header. | |||
kendo-card-header-padding-y | $kendo-card-padding-y | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-card-padding-y Computed: var(--kendo-spacing-3, 0.75rem) |
Description: The vertical padding of the Card header. | |||
kendo-card-header-border-width | 1px | 1px | Default: 1px Computed: 1px |
Description: The bottom border width of the Card header. | |||
kendo-card-header-bg | null | null | Default: null Computed: null |
Description: The background color of the Card header. | |||
kendo-card-header-text | $kendo-component-header-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-header-text Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: The text color of the Card header. | |||
kendo-card-header-border | $kendo-component-header-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-header-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The border color of the Card header. | |||
kendo-card-body-padding-x | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4) Computed: var(--kendo-spacing-4, 1rem) |
Description: The horizontal padding of the Card body. | |||
kendo-card-body-padding-y | k-spacing(4) | var(--kendo-spacing-4, 1rem) | Default: k-spacing(4) Computed: var(--kendo-spacing-4, 1rem) |
Description: The vertical padding of the Card body. | |||
kendo-card-footer-padding-x | $kendo-card-padding-x | var(--kendo-spacing-4, 1rem) | Default: $kendo-card-padding-x Computed: var(--kendo-spacing-4, 1rem) |
Description: The horizontal padding of the Card footer. | |||
kendo-card-footer-padding-y | $kendo-card-padding-y | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-card-padding-y Computed: var(--kendo-spacing-3, 0.75rem) |
Description: The vertical padding of the Card footer. | |||
kendo-card-footer-border-width | 1px | 1px | Default: 1px Computed: 1px |
Description: The top border width of the Card footer. | |||
kendo-card-footer-bg | null | null | Default: null Computed: null |
Description: The background color of the Card footer. | |||
kendo-card-footer-text | $kendo-component-header-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-header-text Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: The text color of the Card footer. | |||
kendo-card-footer-border | $kendo-component-header-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-header-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The border color of the Card footer. | |||
kendo-card-title-margin-bottom | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2) Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The bottom margin of the Card title. | |||
kendo-card-title-font-size | var( --kendo-font-size-lg, inherit ) | var(--kendo-font-size-lg, inherit) | Default: var( --kendo-font-size-lg, inherit ) Computed: var(--kendo-font-size-lg, inherit) |
Description: The font size of the Card title. | |||
kendo-card-title-font-family | null | null | Default: null Computed: null |
Description: The font family of the Card title. | |||
kendo-card-title-line-height | var( --kendo-line-height-sm, normal ) | var(--kendo-line-height-sm, normal) | Default: var( --kendo-line-height-sm, normal ) Computed: var(--kendo-line-height-sm, normal) |
Description: The line height of the Card title. | |||
kendo-card-title-font-weight | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) | Default: var( --kendo-font-weight-normal, normal ) Computed: var(--kendo-font-weight-normal, normal) |
Description: The font weight of the Card title. | |||
kendo-card-title-letter-spacing | null | null | Default: null Computed: null |
Description: The letter spacing of the Card title. | |||
kendo-card-subtitle-margin-bottom | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2) Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The bottom margin of the Card subtitle. | |||
kendo-card-subtitle-font-size | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) | Default: var( --kendo-font-size-sm, inherit ) Computed: var(--kendo-font-size-sm, inherit) |
Description: The font size of the Card subtitle. | |||
kendo-card-subtitle-font-family | null | null | Default: null Computed: null |
Description: The font family of the Card subtitle. | |||
kendo-card-subtitle-line-height | var( --kendo-line-height-lg, normal ) | var(--kendo-line-height-lg, normal) | Default: var( --kendo-line-height-lg, normal ) Computed: var(--kendo-line-height-lg, normal) |
Description: The line height of the Card subtitle. | |||
kendo-card-subtitle-font-weight | var( --kendo-font-weight-normal, normal ) | var(--kendo-font-weight-normal, normal) | Default: var( --kendo-font-weight-normal, normal ) Computed: var(--kendo-font-weight-normal, normal) |
Description: The font weight of the Card subtitle. | |||
kendo-card-subtitle-letter-spacing | null | null | Default: null Computed: null |
Description: The letter spacing of the Card subtitle. | |||
kendo-card-subtitle-text | $kendo-subtle-text | var(--kendo-color-subtle, #666666) | Default: $kendo-subtle-text Computed: var(--kendo-color-subtle, #666666) |
Description: The text color of the Card subtitle. | |||
kendo-card-img-max-width | 100px | 100px | Default: 100px Computed: 100px |
Description: The maximum width of the Card image. | |||
kendo-card-avatar-size | 45px | 45px | Default: 45px Computed: 45px |
Description: The size of the Avatar in the Card. | |||
kendo-card-avatar-spacing | $kendo-card-header-padding-x | var(--kendo-spacing-4, 1rem) | Default: $kendo-card-header-padding-x Computed: var(--kendo-spacing-4, 1rem) |
Description: The spacing between the Avatar and the text in the Card. | |||
kendo-card-actions-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2) Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The horizontal padding of the Card actions. | |||
kendo-card-actions-padding-y | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2) Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The vertical padding of the Card actions. | |||
kendo-card-actions-border-width | 1px | 1px | Default: 1px Computed: 1px |
Description: The top border width of the Card actions. | |||
kendo-card-actions-gap | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2) Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The spacing between the Card actions. | |||
kendo-card-deck-scroll-button-radius | 0px | 0px | Default: 0px Computed: 0px |
Description: The border radius of the scroll button in the Card deck. | |||
kendo-card-deck-scroll-button-offset | -$kendo-button-border-width | -1px | Default: -$kendo-button-border-width Computed: -1px |
Description: The border radius of the scroll button in the Card deck. | |||
kendo-card-callout-width | 20px | 20px | Default: 20px Computed: 20px |
Description: The width of the Card callout. | |||
kendo-card-callout-height | 20px | 20px | Default: 20px Computed: 20px |
Description: The height of the Card callout. |