New to Kendo UI for Angular? Start a free 30-day trial
Customizing Card
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-card-padding-x | Null | null | null |
Description
Horizontal padding of the card. | |||
| $kendo-card-padding-y | Null | null | null |
Description
Vertical padding of the card. | |||
| $kendo-card-border-width | Number | 1px | 1px |
Description
Width of the border around the card. | |||
| $kendo-card-border-radius | Number | k-map-get( $kendo-border-radii, md ) | 0.25rem |
Description
Border radius of the card. | |||
| $kendo-card-font-family | Null | null | null |
Description
Font family of the card. | |||
| $kendo-card-font-size | Null | null | null |
Description
Font size of the card. | |||
| $kendo-card-line-height | Null | null | null |
Description
Line height of the card. | |||
| $kendo-card-deck-gap | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Spacing between the cards in the card deck. | |||
| $kendo-card-bg | Color | $kendo-component-bg | #ffffff |
Description
Background color of the card. | |||
| $kendo-card-text | Color | $kendo-component-text | #494949 |
Description
Text color of the card. | |||
| $kendo-card-border | Color | $kendo-component-border | #ededed |
Description
Border color of the card. | |||
| $kendo-card-shadow | Null | null | null |
Description
Shadow of the card. | |||
| $kendo-card-focus-bg | Color | $kendo-card-bg | #ffffff |
Description
Background color of the card when focused. | |||
| $kendo-card-focus-text | Null | null | null |
Description
Text color of the card when focused. | |||
| $kendo-card-focus-border | Null | null | null |
Description
Border color of the card when focused. | |||
| $kendo-card-focus-shadow | Null | null | null |
Description
Shadow of the card when focused. | |||
| $kendo-card-header-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Horizontal padding of the card header. | |||
| $kendo-card-header-padding-y | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Vertical padding of the card header. | |||
| $kendo-card-header-border-width | Null | null | null |
Description
Bottom border width of the card header. | |||
| $kendo-card-header-font-weight | Null | null | null |
Description
Text weight of the card header. | |||
| $kendo-card-header-bg | Color | k-get-theme-color( neutral, 50 ) | #f8f8f8 |
Description
Background color of the card header. | |||
| $kendo-card-header-text | Color | $kendo-card-text | #494949 |
Description
Text color of the card header. | |||
| $kendo-card-header-border | Color | $kendo-card-border | #ededed |
Description
Border color of the card header. | |||
| $kendo-card-body-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Horizontal padding of the card body. | |||
| $kendo-card-body-padding-y | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Vertical padding of the card body. | |||
| $kendo-card-footer-padding-x | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Horizontal padding of the card footer. | |||
| $kendo-card-footer-padding-y | Number | k-map-get( $kendo-spacing, 4 ) | 1rem |
Description
Vertical padding of the card footer. | |||
| $kendo-card-footer-border-width | Null | null | null |
Description
Top border width of the card footer. | |||
| $kendo-card-footer-bg | Null | null | null |
Description
Background color of the card footer. | |||
| $kendo-card-footer-text | Null | null | null |
Description
Text color of the card footer. | |||
| $kendo-card-footer-border | Color | $kendo-card-border | #ededed |
Description
Border color of the card footer. | |||
| $kendo-card-title-margin-bottom | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Bottom margin of the card title. | |||
| $kendo-card-title-font-weight | Null | null | null |
Description
Font weight of the card title. | |||
| $kendo-card-title-text | Null | null | null |
Description
Text color of the card subtitle. | |||
| $kendo-card-subtitle-margin-bottom | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Bottom margin of the card subtitle. | |||
| $kendo-card-subtitle-font-weight | Null | null | null |
Description
Font weight of the card title. | |||
| $kendo-card-subtitle-text | Color | $kendo-subtle-text | #5f5f5f |
Description
Text color of the card subtitle. | |||
| $kendo-card-img-max-width | Number | 100px | 100px |
Description
Maximum width of the card image. | |||
| $kendo-card-avatar-size | Number | 3rem | 3rem |
Description
Size of the avatar in the card. | |||
| $kendo-card-actions-padding-x | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Horizontal padding of the card actions. | |||
| $kendo-card-actions-padding-y | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Vertical padding of the card actions. | |||
| $kendo-card-actions-border-width | Null | null | null |
Description
Top border of the card actions. | |||
| $kendo-card-actions-gap | Number | k-map-get( $kendo-spacing, 2 ) | 0.5rem |
Description
Spacing between the card actions. | |||
| $kendo-card-deck-scroll-button-radius | Null | null | null |
Description
Border radius of the scroll button in the card deck. | |||
| $kendo-card-callout-size | Number | 20px | 20px |
Description
Size of the card callout. | |||
