Customizing Card

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-card-padding-x	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The horizontal padding of the Card.
$kendo-card-padding-y	String	k-spacing(3)	var(--kendo-spacing-3, 0.75rem)
Description The vertical padding of the Card.
$kendo-card-border-width	Number	1px	1px
Description The width of the border around the Card.
$kendo-card-border-radius	String	k-border-radius(lg)	var(--kendo-border-radius-lg, 0.375rem)
Description The border radius of the Card.
$kendo-card-inner-border-radius	Calculation	calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} )	calc(var(--kendo-border-radius-lg, 0.375rem) - 1px)
Description The inner border radius of the Card.
$kendo-card-font-family	String	var( --kendo-font-family, inherit )	var(--kendo-font-family, inherit)
Description The font family of the Card.
$kendo-card-font-size	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
Description The font size of the Card.
$kendo-card-line-height	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
Description The line height of the Card.
$kendo-card-deck-gap	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The spacing between the Cards in the Card deck.
$kendo-card-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the Card.
$kendo-card-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Card.
$kendo-card-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the Card.
$kendo-card-shadow	Null	null	null
Description The shadow of the Card.
$kendo-card-focus-bg	Null	null	null
Description The background color of the focused Card.
$kendo-card-focus-text	Null	null	null
Description The text color of the focused Card.
$kendo-card-focus-border	Color	rgba( black, .15 )	rgba(0, 0, 0, 0.15)
Description The border color of the focused Card.
$kendo-card-focus-shadow	Null	null	null
Description The shadow of the focused Card.
$kendo-card-header-padding-x	String	$kendo-card-padding-x	var(--kendo-spacing-4, 1rem)
Description The horizontal padding of the Card header.
$kendo-card-header-padding-y	String	$kendo-card-padding-y	var(--kendo-spacing-3, 0.75rem)
Description The vertical padding of the Card header.
$kendo-card-header-border-width	Number	1px	1px
Description The bottom border width of the Card header.
$kendo-card-header-bg	Null	null	null
Description The background color of the Card header.
$kendo-card-header-text	String	$kendo-component-header-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Card header.
$kendo-card-header-border	String	$kendo-component-header-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the Card header.
$kendo-card-body-padding-x	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The horizontal padding of the Card body.
$kendo-card-body-padding-y	String	k-spacing(4)	var(--kendo-spacing-4, 1rem)
Description The vertical padding of the Card body.
$kendo-card-footer-padding-x	String	$kendo-card-padding-x	var(--kendo-spacing-4, 1rem)
Description The horizontal padding of the Card footer.
$kendo-card-footer-padding-y	String	$kendo-card-padding-y	var(--kendo-spacing-3, 0.75rem)
Description The vertical padding of the Card footer.
$kendo-card-footer-border-width	Number	1px	1px
Description The top border width of the Card footer.
$kendo-card-footer-bg	Null	null	null
Description The background color of the Card footer.
$kendo-card-footer-text	String	$kendo-component-header-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Card footer.
$kendo-card-footer-border	String	$kendo-component-header-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the Card footer.
$kendo-card-title-margin-bottom	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The bottom margin of the Card title.
$kendo-card-title-font-size	String	var( --kendo-font-size-lg, inherit )	var(--kendo-font-size-lg, inherit)
Description The font size of the Card title.
$kendo-card-title-font-family	Null	null	null
Description The font family of the Card title.
$kendo-card-title-line-height	String	var( --kendo-line-height-sm, normal )	var(--kendo-line-height-sm, normal)
Description The line height of the Card title.
$kendo-card-title-font-weight	String	var( --kendo-font-weight-normal, normal )	var(--kendo-font-weight-normal, normal)
Description The font weight of the Card title.
$kendo-card-title-letter-spacing	Null	null	null
Description The letter spacing of the Card title.
$kendo-card-subtitle-margin-bottom	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The bottom margin of the Card subtitle.
$kendo-card-subtitle-font-size	String	var( --kendo-font-size-sm, inherit )	var(--kendo-font-size-sm, inherit)
Description The font size of the Card subtitle.
$kendo-card-subtitle-font-family	Null	null	null
Description The font family of the Card subtitle.
$kendo-card-subtitle-line-height	String	var( --kendo-line-height-lg, normal )	var(--kendo-line-height-lg, normal)
Description The line height of the Card subtitle.
$kendo-card-subtitle-font-weight	String	var( --kendo-font-weight-normal, normal )	var(--kendo-font-weight-normal, normal)
Description The font weight of the Card subtitle.
$kendo-card-subtitle-letter-spacing	Null	null	null
Description The letter spacing of the Card subtitle.
$kendo-card-subtitle-text	String	$kendo-subtle-text	var(--kendo-color-subtle, #666666)
Description The text color of the Card subtitle.
$kendo-card-img-max-width	Number	100px	100px
Description The maximum width of the Card image.
$kendo-card-avatar-size	Number	45px	45px
Description The size of the Avatar in the Card.
$kendo-card-avatar-spacing	String	$kendo-card-header-padding-x	var(--kendo-spacing-4, 1rem)
Description The spacing between the Avatar and the text in the Card.
$kendo-card-actions-padding-x	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The horizontal padding of the Card actions.
$kendo-card-actions-padding-y	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The vertical padding of the Card actions.
$kendo-card-actions-border-width	Number	1px	1px
Description The top border width of the Card actions.
$kendo-card-actions-gap	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The spacing between the Card actions.
$kendo-card-deck-scroll-button-radius	Number	0px	0px
Description The border radius of the scroll button in the Card deck.
$kendo-card-deck-scroll-button-offset	Number	-$kendo-button-border-width	-1px
Description The border radius of the scroll button in the Card deck.
$kendo-card-callout-width	Number	20px	20px
Description The width of the Card callout.
$kendo-card-callout-height	Number	20px	20px
Description The height of the Card callout.

Suggested Links

• Styling Overview
• Web Font Icons
• Preview of the Themed Components