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: 1pxComputed: 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 | k-color(surface-alt) | var(--kendo-color-surface-alt, #ffffff) | Default: k-color(surface-alt)Computed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the Card. | |||
kendo-card-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface, #3d3d3d) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the Card. | |||
kendo-card-border | k-color(border) | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: k-color(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: nullComputed: null |
| Description: The shadow of the Card. | |||
kendo-card-focus-bg | null | null | Default: nullComputed: null |
| Description: The background color of the focused Card. | |||
kendo-card-focus-text | null | null | Default: nullComputed: 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: nullComputed: 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-xComputed: 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-yComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The vertical padding of the Card header. | |||
kendo-card-header-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The bottom border width of the Card header. | |||
kendo-card-header-bg | null | null | Default: nullComputed: null |
| Description: The background color of the Card header. | |||
kendo-card-header-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface, #3d3d3d) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the Card header. | |||
kendo-card-header-border | k-color(border) | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: k-color(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-xComputed: 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-yComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The vertical padding of the Card footer. | |||
kendo-card-footer-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The top border width of the Card footer. | |||
kendo-card-footer-bg | null | null | Default: nullComputed: null |
| Description: The background color of the Card footer. | |||
kendo-card-footer-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface, #3d3d3d) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the Card footer. | |||
kendo-card-footer-border | k-color(border) | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: k-color(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: nullComputed: 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: nullComputed: 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: nullComputed: 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: nullComputed: null |
| Description: The letter spacing of the Card subtitle. | |||
kendo-card-subtitle-text | k-color(subtle) | var(--kendo-color-subtle, #666666) | Default: k-color(subtle)Computed: var(--kendo-color-subtle, #666666) |
| Description: The text color of the Card subtitle. | |||
kendo-card-img-max-width | 100px | 100px | Default: 100pxComputed: 100px |
| Description: The maximum width of the Card image. | |||
kendo-card-avatar-size | 45px | 45px | Default: 45pxComputed: 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-xComputed: 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 | 0 | 0 | Default: 0Computed: 0 |
| 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: 0pxComputed: 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-widthComputed: -1px |
| Description: The border radius of the scroll button in the Card deck. | |||
kendo-card-callout-width | 20px | 20px | Default: 20pxComputed: 20px |
| Description: The width of the Card callout. | |||
kendo-card-callout-height | 20px | 20px | Default: 20pxComputed: 20px |
| Description: The height of the Card callout. | |||
