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

Customizing Card

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-card-padding-xNumber$card-spacer-x1rem
Description
The horizontal padding of the Card.
$kendo-card-padding-yNumber$card-spacer-y1rem
Description
The vertical padding of the Card.
$kendo-card-border-widthNumber1px1px
Description
The width of the border around the Card.
$kendo-card-border-radiusNumber$card-border-radius0.375rem
Description
The border radius of the Card.
$kendo-card-inner-border-radiusCalculationcalc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} )calc(0.375rem - 1px)
Description
The inner border radius of the Card.
$kendo-card-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Card.
$kendo-card-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Card.
$kendo-card-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Card.
$kendo-card-deck-gapStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacing between the Cards in the Card deck.
$kendo-card-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Card.
$kendo-card-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the Card.
$kendo-card-borderString$kendo-component-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the Card.
$kendo-card-shadowNullnullnull
Description
The shadow of the Card.
$kendo-card-focus-bgNullnullnull
Description
The background color of the focused Card.
$kendo-card-focus-textNullnullnull
Description
The text color of the focused Card.
$kendo-card-focus-borderNullnullnull
Description
The border color of the focused Card.
$kendo-card-focus-shadowStringk-elevation(3)var(--kendo-elevation-3, 0px 4px 10px rgba(0, 0, 0, 0.1))
Description
The shadow of the focused Card.
$kendo-card-header-padding-xNumber$kendo-card-padding-x1rem
Description
The horizontal padding of the Card header.
$kendo-card-header-padding-yNumber$kendo-card-padding-y1rem
Description
The vertical padding of the Card header.
$kendo-card-header-border-widthNumber$kendo-card-border-width1px
Description
The bottom border width of the Card header.
$kendo-card-header-bgString$kendo-component-header-bgvar(--kendo-color-surface, #f8f9fa)
Description
The background color of the Card header.
$kendo-card-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the Card header.
$kendo-card-header-borderString$kendo-card-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the Card header.
$kendo-card-body-padding-xNumber$kendo-card-padding-x1rem
Description
The horizontal padding of the Card body.
$kendo-card-body-padding-yNumber$kendo-card-padding-x1rem
Description
The vertical padding of the Card body.
$kendo-card-footer-padding-xNumber$kendo-card-padding-x1rem
Description
The horizontal padding of the Card footer.
$kendo-card-footer-padding-yNumber$kendo-card-padding-y1rem
Description
The vertical padding of the Card footer.
$kendo-card-footer-border-widthNumber$kendo-card-border-width1px
Description
The top border width of the Card footer.
$kendo-card-footer-bgString$kendo-card-header-bgvar(--kendo-color-surface, #f8f9fa)
Description
The background color of the Card footer.
$kendo-card-footer-textString$kendo-card-header-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the Card footer.
$kendo-card-footer-borderString$kendo-card-header-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the Card footer.
$kendo-card-title-margin-bottomStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The bottom margin of the Card title.
$kendo-card-title-font-sizeStringvar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)
Description
The font size of the Card title.
$kendo-card-title-font-familyNull$headings-font-familynull
Description
The font family of the Card title.
$kendo-card-title-line-heightNumber$headings-line-height1.2
Description
The line height of the Card title.
$kendo-card-title-font-weightNumber$headings-font-weight500
Description
The font weight of the Card title.
$kendo-card-title-letter-spacingNullnullnull
Description
The letter spacing of the Card title.
$kendo-card-subtitle-margin-bottomStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The bottom margin of the Card subtitle.
$kendo-card-subtitle-font-sizeNumber$kendo-h6-font-size1rem
Description
The font size of the Card subtitle.
$kendo-card-subtitle-font-familyNull$headings-font-familynull
Description
The font family of the Card subtitle.
$kendo-card-subtitle-line-heightNumber$headings-line-height1.2
Description
The line height of the Card subtitle.
$kendo-card-subtitle-font-weightNumber$headings-font-weight500
Description
The font weight of the Card subtitle.
$kendo-card-subtitle-letter-spacingNullnullnull
Description
The letter spacing of the Card subtitle.
$kendo-card-subtitle-textString$kendo-subtle-textvar(--kendo-color-subtle, #596169)
Description
The text color of the Card subtitle.
$kendo-card-img-max-widthNumber100px100px
Description
The maximum width of the Card image.
$kendo-card-avatar-sizeNumber45px45px
Description
The size of the Avatar in the Card.
$kendo-card-avatar-spacingNumber$kendo-card-header-padding-x1rem
Description
The spacing between the Avatar and the text in the Card.
$kendo-card-actions-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Card actions.
$kendo-card-actions-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Card actions.
$kendo-card-actions-border-widthNumber1px1px
Description
The top border width of the Card actions.
$kendo-card-actions-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing between the Card actions.
$kendo-card-deck-scroll-button-radiusNumber0px0px
Description
The border radius of the scroll button in the Card deck.
$kendo-card-deck-scroll-button-offsetNumber-$kendo-button-border-width-1px
Description
The border radius of the scroll button in the Card deck.
$kendo-card-callout-widthNumber1.3em1.3em
Description
The width of the Card callout.
$kendo-card-callout-heightNumber1.3em1.3em
Description
The height of the Card callout.
In this article
VariablesSuggested Links
Not finding the help you need?
Contact Support