New to Kendo UI for Vue? Start a free 30-day trial

Customizing Card

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-card-padding-xNullnullnull
Description
Horizontal padding of the card.
$kendo-card-padding-yNullnullnull
Description
Vertical padding of the card.
$kendo-card-border-widthNumber1px1px
Description
Width of the border around the card.
$kendo-card-border-radiusNumberk-map-get( $kendo-border-radii, md )0.25rem
Description
Border radius of the card.
$kendo-card-font-familyNullnullnull
Description
Font family of the card.
$kendo-card-font-sizeNullnullnull
Description
Font size of the card.
$kendo-card-line-heightNullnullnull
Description
Line height of the card.
$kendo-card-deck-gapStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Spacing between the cards in the card deck.
$kendo-card-bgColor$kendo-component-bg#ffffff
Description
Background color of the card.
$kendo-card-textColor$kendo-component-text#494949
Description
Text color of the card.
$kendo-card-borderColor$kendo-component-border#ededed
Description
Border color of the card.
$kendo-card-shadowNullnullnull
Description
Shadow of the card.
$kendo-card-focus-bgColor$kendo-card-bg#ffffff
Description
Background color of the card when focused.
$kendo-card-focus-textNullnullnull
Description
Text color of the card when focused.
$kendo-card-focus-borderNullnullnull
Description
Border color of the card when focused.
$kendo-card-focus-shadowNullnullnull
Description
Shadow of the card when focused.
$kendo-card-header-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Horizontal padding of the card header.
$kendo-card-header-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Vertical padding of the card header.
$kendo-card-header-border-widthNullnullnull
Description
Bottom border width of the card header.
$kendo-card-header-font-weightNullnullnull
Description
Text weight of the card header.
$kendo-card-header-bgColork-get-theme-color( neutral, 50 )#f8f8f8
Description
Background color of the card header.
$kendo-card-header-textColor$kendo-card-text#494949
Description
Text color of the card header.
$kendo-card-header-borderColor$kendo-card-border#ededed
Description
Border color of the card header.
$kendo-card-body-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Horizontal padding of the card body.
$kendo-card-body-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Vertical padding of the card body.
$kendo-card-footer-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Horizontal padding of the card footer.
$kendo-card-footer-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
Vertical padding of the card footer.
$kendo-card-footer-border-widthNullnullnull
Description
Top border width of the card footer.
$kendo-card-footer-bgNullnullnull
Description
Background color of the card footer.
$kendo-card-footer-textNullnullnull
Description
Text color of the card footer.
$kendo-card-footer-borderColor$kendo-card-border#ededed
Description
Border color of the card footer.
$kendo-card-title-margin-bottomStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Bottom margin of the card title.
$kendo-card-title-font-weightNullnullnull
Description
Font weight of the card title.
$kendo-card-title-textNullnullnull
Description
Text color of the card subtitle.
$kendo-card-subtitle-margin-bottomStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Bottom margin of the card subtitle.
$kendo-card-subtitle-font-weightNullnullnull
Description
Font weight of the card title.
$kendo-card-subtitle-textColor$kendo-subtle-text#5f5f5f
Description
Text color of the card subtitle.
$kendo-card-img-max-widthNumber100px100px
Description
Maximum width of the card image.
$kendo-card-avatar-sizeNumber3rem3rem
Description
Size of the avatar in the card.
$kendo-card-actions-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Horizontal padding of the card actions.
$kendo-card-actions-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Vertical padding of the card actions.
$kendo-card-actions-border-widthNullnullnull
Description
Top border of the card actions.
$kendo-card-actions-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
Spacing between the card actions.
$kendo-card-deck-scroll-button-radiusNullnullnull
Description
Border radius of the scroll button in the card deck.
$kendo-card-callout-sizeNumber20px20px
Description
Size of the card callout.

In this article

Not finding the help you need?