DevExpress · pomahtri · Apr 16, 2025 · Apr 10, 2025 · Apr 14, 2025 · Apr 14, 2025
diff --git a/apps/react-storybook/stories/card_view/Card.stories.tsx b/apps/react-storybook/stories/card_view/Card.stories.tsx
@@ -1,20 +1,29 @@
 import React, { useState, useRef, useEffect } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+import {generatedData} from './generatedData';
 
 import { Card as InfernoCard } from "devextreme/esm/__internal/grids/new/card_view/content_view/content/card/card";
 import { wrapInfernoWithReact } from "../utils";
+import { Footer } from "./templates";
 
 interface Props {
-  row: {
-    key: unknown;
-    cells: {
-      value: unknown;
-      column: {
-        alignment: "left" | "right" | "center";
-        caption: string;
-      };
-    }[];
-  };
+  allowSelectOnClick: boolean;
+  showSelectCheckBox: boolean;
+  showImage: boolean;
+  showFooter: boolean;
+}
+
+const data = generatedData[0];
+const columns = Object.keys(data);
+
+const row = {
+  key: 1,
+  cells: columns.map((column) => ({
+    column: {
+      caption: column,
+    },
+    text: data[column]
+  }))
 }
 
 const Card = wrapInfernoWithReact<Props>(InfernoCard);
@@ -30,45 +39,25 @@ type Story = StoryObj<Props>;
 
 export const DefaultMode: Story = {
   args: {
-    row: {
-      cells: [
-        {
-          value: 1,
-          column: {
-            alignment: 'left',
-            caption: 'asd',
-          },
-        },
-        {
-          value: 1,
-          column: {
-            alignment: 'left',
-            caption: 'asd',
-          },
-        },
-        {
-          value: 1,
-          column: {
-            alignment: 'left',
-            caption: 'asd',
-          },
-        },
-        {
-          value: 1,
-          column: {
-            alignment: 'left',
-            caption: 'asd',
-          },
-        },
-        {
-          value: 1,
-          column: {
-            alignment: 'left',
-            caption: 'asd',
-          },
-        },
-      ],
-      key: 1,
-    },
+    allowSelectOnClick: true,
+    showSelectCheckBox: true,
+    showImage: true,
+    showFooter: true,
   },
+
+  render(props) {
+    const cover = props.showImage ? {
+      imageExpr: function(data) {console.log(arguments)},
+      altExpr: function(data) {console.log(arguments)},
+    } : {};
+
+    const footer = props.showFooter && Footer;
+
+    return <Card
+      allowSelectOnClick={props.allowSelectOnClick}
+      isCheckBoxesRendered={props.showSelectCheckBox}
+      row={row}
+      cover={cover}
+    />
+  }
 };
diff --git a/apps/react-storybook/stories/card_view/CardView.stories.tsx b/apps/react-storybook/stories/card_view/CardView.stories.tsx
@@ -4,6 +4,7 @@ import dxCardView from "devextreme/ui/card_view";
 import { wrapDxWithReact } from "../utils";
 import { store } from "./data";
 import { generatedData } from "./generatedData";
+import { renderFooter } from "./templates";
 
 const CardView = wrapDxWithReact(dxCardView);
 
@@ -164,6 +165,14 @@ const meta: Meta<typeof CardView> = {
     searchPanel: {
       control: 'object',
     },
+    cardFooterTemplate: {
+      control: 'radio',
+      options: ['show (custom template)', 'undefined'],
+      mapping: {
+        'show (custom template)': renderFooter,
+        'undefined': undefined,
+      }
+    }
   }
 };
 
@@ -186,6 +195,7 @@ export const DefaultMode: Story = {
     cardMaxWidth: 350,
     columns: 'local',
     filterPanel: { visible: true },
+    cardFooterTemplate: undefined,
   },
 };
 

diff --git a/apps/react-storybook/stories/card_view/data.ts b/apps/react-storybook/stories/card_view/data.ts
@@ -4,7 +4,6 @@ export const items = new Array(1000).fill(null).map(() => (
   {column1: 1, column2: 2}
 ));
 
-
 function isNotEmpty(value: string | undefined | null) {
   return value !== undefined && value !== null && value !== '';
 }

diff --git a/apps/react-storybook/stories/card_view/templates.tsx b/apps/react-storybook/stories/card_view/templates.tsx
@@ -0,0 +1,14 @@
+import Button from "devextreme/ui/button"
+
+export function renderFooter() {
+  const container = document.createElement('div');
+  const button1 = document.createElement('div');
+  const button2 = document.createElement('div');
+
+  container.append(button1, button2);
+
+  new Button(button1, {text: 'button 1'});
+  new Button(button2, {text: 'button 2'});
+
+  return container;
+}
diff --git a/...stcafe-devextreme/tests/cardView/cover.ts → ...devextreme/tests/cardView/cover.visual.ts b/...stcafe-devextreme/tests/cardView/cover.ts → ...devextreme/tests/cardView/cover.visual.ts
diff --git a/...tcafe-devextreme/tests/cardView/etalons/content-no-data (fluent-blue-light).png b/...tcafe-devextreme/tests/cardView/etalons/content-no-data (fluent-blue-light).png
diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/content-no-data (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/content-no-data (generic-light).png
diff --git a/...afe-devextreme/tests/cardView/etalons/content-no-data (material-blue-light).png b/...afe-devextreme/tests/cardView/etalons/content-no-data (material-blue-light).png
diff --git a/...-devextreme/tests/cardView/etalons/cover-default-render (fluent-blue-light).png b/...-devextreme/tests/cardView/etalons/cover-default-render (fluent-blue-light).png
diff --git a/...cafe-devextreme/tests/cardView/etalons/cover-default-render (generic-light).png b/...cafe-devextreme/tests/cardView/etalons/cover-default-render (generic-light).png
diff --git a/...evextreme/tests/cardView/etalons/cover-default-render (material-blue-light).png b/...evextreme/tests/cardView/etalons/cover-default-render (material-blue-light).png
diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (generic-light).png
diff --git a/...stcafe-devextreme/tests/cardView/etalons/header-panel (material-blue-light).png b/...stcafe-devextreme/tests/cardView/etalons/header-panel (material-blue-light).png
diff --git a/...ardView/filterPanel/etalons/cardView_FilterBuilderPopup (fluent-blue-light).png b/...ardView/filterPanel/etalons/cardView_FilterBuilderPopup (fluent-blue-light).png
diff --git a/...ts/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (generic-light).png b/...ts/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (generic-light).png
diff --git a/...dView/filterPanel/etalons/cardView_FilterBuilderPopup (material-blue-light).png b/...dView/filterPanel/etalons/cardView_FilterBuilderPopup (material-blue-light).png
diff --git a/e2e/testcafe-devextreme/tests/cardView/noData.visual.ts b/e2e/testcafe-devextreme/tests/cardView/noData.visual.ts
@@ -0,0 +1,24 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import CardView from 'devextreme-testcafe-models/cardView';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+import { testScreenshot } from '../../helpers/themeUtils';
+
+fixture.disablePageReloads`CardView - HeaderPanel`
+  .page(url(__dirname, '../container.html'));
+
+test('default render', async (t) => {
+  const cardView = new CardView('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await testScreenshot(t, takeScreenshot, 'content-no-data.png', { element: cardView.element });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxCardView', {
+  width: 1000,
+  height: 600,
+  columns: ['Customer', 'Order Date'],
+  dataSource: [],
+}));
diff --git a/...dView/search/etalons/card-view_search_text-highlighting (fluent-blue-light).png b/...dView/search/etalons/card-view_search_text-highlighting (fluent-blue-light).png
diff --git a/.../cardView/search/etalons/card-view_search_text-highlighting (generic-light).png b/.../cardView/search/etalons/card-view_search_text-highlighting (generic-light).png
diff --git a/...iew/search/etalons/card-view_search_text-highlighting (material-blue-light).png b/...iew/search/etalons/card-view_search_text-highlighting (material-blue-light).png
diff --git a/...w_checkbox_visibility_with_showCheckBoxesMode_=_onClick (fluent-blue-light).png b/...w_checkbox_visibility_with_showCheckBoxesMode_=_onClick (fluent-blue-light).png
diff --git a/...-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (generic-light).png b/...-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (generic-light).png
diff --git a/...checkbox_visibility_with_showCheckBoxesMode_=_onClick (material-blue-light).png b/...checkbox_visibility_with_showCheckBoxesMode_=_onClick (material-blue-light).png
diff --git a/...checkboxes_visibility_with_showCheckBoxesMode_=_onClick (fluent-blue-light).png b/...checkboxes_visibility_with_showCheckBoxesMode_=_onClick (fluent-blue-light).png
diff --git a/...iew_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (generic-light).png b/...iew_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (generic-light).png
diff --git a/...eckboxes_visibility_with_showCheckBoxesMode_=_onClick (material-blue-light).png b/...eckboxes_visibility_with_showCheckBoxesMode_=_onClick (material-blue-light).png
diff --git a/...iew_miltiple_selection_with_showCheckBoxesMode_=_always (fluent-blue-light).png b/...iew_miltiple_selection_with_showCheckBoxesMode_=_always (fluent-blue-light).png
diff --git a/...rd-view_miltiple_selection_with_showCheckBoxesMode_=_always (generic-light).png b/...rd-view_miltiple_selection_with_showCheckBoxesMode_=_always (generic-light).png
diff --git a/...w_miltiple_selection_with_showCheckBoxesMode_=_always (material-blue-light).png b/...w_miltiple_selection_with_showCheckBoxesMode_=_always (material-blue-light).png
diff --git a/...-view_miltiple_selection_with_showCheckBoxesMode_=_none (fluent-blue-light).png b/...-view_miltiple_selection_with_showCheckBoxesMode_=_none (fluent-blue-light).png
diff --git a/...card-view_miltiple_selection_with_showCheckBoxesMode_=_none (generic-light).png b/...card-view_miltiple_selection_with_showCheckBoxesMode_=_none (generic-light).png
diff --git a/...iew_miltiple_selection_with_showCheckBoxesMode_=_none (material-blue-light).png b/...iew_miltiple_selection_with_showCheckBoxesMode_=_none (material-blue-light).png
diff --git a/..._miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (fluent-blue-light).png b/..._miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (fluent-blue-light).png
diff --git a/...view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (generic-light).png b/...view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (generic-light).png
diff --git a/...iltiple_selection_with_showCheckBoxesMode_=_onClick_1 (material-blue-light).png b/...iltiple_selection_with_showCheckBoxesMode_=_onClick_1 (material-blue-light).png
diff --git a/..._miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (fluent-blue-light).png b/..._miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (fluent-blue-light).png
diff --git a/...view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (generic-light).png b/...view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (generic-light).png
diff --git a/...iltiple_selection_with_showCheckBoxesMode_=_onClick_2 (material-blue-light).png b/...iltiple_selection_with_showCheckBoxesMode_=_onClick_2 (material-blue-light).png
diff --git a/..._miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (fluent-blue-light).png b/..._miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (fluent-blue-light).png
diff --git a/...view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (generic-light).png b/...view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (generic-light).png
diff --git a/...iltiple_selection_with_showCheckBoxesMode_=_onClick_3 (material-blue-light).png b/...iltiple_selection_with_showCheckBoxesMode_=_onClick_3 (material-blue-light).png
diff --git a/...iltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (fluent-blue-light).png b/...iltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (fluent-blue-light).png
diff --git a/...ew_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (generic-light).png b/...ew_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (generic-light).png
diff --git a/...tiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (material-blue-light).png b/...tiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (material-blue-light).png
diff --git a/...iltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (fluent-blue-light).png b/...iltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (fluent-blue-light).png
diff --git a/...ew_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (generic-light).png b/...ew_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (generic-light).png
diff --git a/...tiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (material-blue-light).png b/...tiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (material-blue-light).png
diff --git a/...iltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (fluent-blue-light).png b/...iltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (fluent-blue-light).png
diff --git a/...ew_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (generic-light).png b/...ew_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (generic-light).png
diff --git a/...tiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (material-blue-light).png b/...tiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (material-blue-light).png
diff --git a/...etalons/card-view_miltiple_selection_without_select-all (fluent-blue-light).png b/...etalons/card-view_miltiple_selection_without_select-all (fluent-blue-light).png
diff --git a/...ion/etalons/card-view_miltiple_selection_without_select-all (generic-light).png b/...ion/etalons/card-view_miltiple_selection_without_select-all (generic-light).png
diff --git a/...alons/card-view_miltiple_selection_without_select-all (material-blue-light).png b/...alons/card-view_miltiple_selection_without_select-all (material-blue-light).png
diff --git a/...s/cardView/selection/etalons/card-view_single_selection (fluent-blue-light).png b/...s/cardView/selection/etalons/card-view_single_selection (fluent-blue-light).png
diff --git a/...tests/cardView/selection/etalons/card-view_single_selection (generic-light).png b/...tests/cardView/selection/etalons/card-view_single_selection (generic-light).png
diff --git a/...cardView/selection/etalons/card-view_single_selection (material-blue-light).png b/...cardView/selection/etalons/card-view_single_selection (material-blue-light).png
diff --git a/...sts/cardView/sorting/etalons/cardview_allow_sorting_api (fluent-blue-light).png b/...sts/cardView/sorting/etalons/cardview_allow_sorting_api (fluent-blue-light).png
diff --git a/...e/tests/cardView/sorting/etalons/cardview_allow_sorting_api (generic-light).png b/...e/tests/cardView/sorting/etalons/cardview_allow_sorting_api (generic-light).png
diff --git a/...s/cardView/sorting/etalons/cardview_allow_sorting_api (material-blue-light).png b/...s/cardView/sorting/etalons/cardview_allow_sorting_api (material-blue-light).png
diff --git a/...ting/etalons/cardview_calculate_sort_value_is_filed_api (fluent-blue-light).png b/...ting/etalons/cardview_calculate_sort_value_is_filed_api (fluent-blue-light).png
diff --git a/.../sorting/etalons/cardview_calculate_sort_value_is_filed_api (generic-light).png b/.../sorting/etalons/cardview_calculate_sort_value_is_filed_api (generic-light).png
diff --git a/...ng/etalons/cardview_calculate_sort_value_is_filed_api (material-blue-light).png b/...ng/etalons/cardview_calculate_sort_value_is_filed_api (material-blue-light).png
diff --git a/...g/etalons/cardview_calculate_sort_value_is_function_api (fluent-blue-light).png b/...g/etalons/cardview_calculate_sort_value_is_function_api (fluent-blue-light).png
diff --git a/...rting/etalons/cardview_calculate_sort_value_is_function_api (generic-light).png b/...rting/etalons/cardview_calculate_sort_value_is_function_api (generic-light).png
diff --git a/...etalons/cardview_calculate_sort_value_is_function_api (material-blue-light).png b/...etalons/cardview_calculate_sort_value_is_function_api (material-blue-light).png
diff --git a/...ardView/sorting/etalons/cardview_headers_default_render (fluent-blue-light).png b/...ardView/sorting/etalons/cardview_headers_default_render (fluent-blue-light).png
diff --git a/...ts/cardView/sorting/etalons/cardview_headers_default_render (generic-light).png b/...ts/cardView/sorting/etalons/cardview_headers_default_render (generic-light).png
diff --git a/...dView/sorting/etalons/cardview_headers_default_render (material-blue-light).png b/...dView/sorting/etalons/cardview_headers_default_render (material-blue-light).png
diff --git a/...g/etalons/cardview_headers_with_multiple_sorting_render (fluent-blue-light).png b/...g/etalons/cardview_headers_with_multiple_sorting_render (fluent-blue-light).png
diff --git a/...rting/etalons/cardview_headers_with_multiple_sorting_render (generic-light).png b/...rting/etalons/cardview_headers_with_multiple_sorting_render (generic-light).png
diff --git a/...etalons/cardview_headers_with_multiple_sorting_render (material-blue-light).png b/...etalons/cardview_headers_with_multiple_sorting_render (material-blue-light).png
diff --git a/...cardView/sorting/etalons/cardview_show_sort_indexes_api (fluent-blue-light).png b/...cardView/sorting/etalons/cardview_show_sort_indexes_api (fluent-blue-light).png
diff --git a/...sts/cardView/sorting/etalons/cardview_show_sort_indexes_api (generic-light).png b/...sts/cardView/sorting/etalons/cardview_show_sort_indexes_api (generic-light).png
diff --git a/...rdView/sorting/etalons/cardview_show_sort_indexes_api (material-blue-light).png b/...rdView/sorting/etalons/cardview_show_sort_indexes_api (material-blue-light).png
diff --git a/.../tests/cardView/sorting/etalons/cardview_sort_index_api (fluent-blue-light).png b/.../tests/cardView/sorting/etalons/cardview_sort_index_api (fluent-blue-light).png
diff --git a/...reme/tests/cardView/sorting/etalons/cardview_sort_index_api (generic-light).png b/...reme/tests/cardView/sorting/etalons/cardview_sort_index_api (generic-light).png
diff --git a/...ests/cardView/sorting/etalons/cardview_sort_index_api (material-blue-light).png b/...ests/cardView/sorting/etalons/cardview_sort_index_api (material-blue-light).png
diff --git a/...ts/cardView/sorting/etalons/cardview_sorting_method_api (fluent-blue-light).png b/...ts/cardView/sorting/etalons/cardview_sorting_method_api (fluent-blue-light).png
diff --git a/.../tests/cardView/sorting/etalons/cardview_sorting_method_api (generic-light).png b/.../tests/cardView/sorting/etalons/cardview_sorting_method_api (generic-light).png
diff --git a/.../cardView/sorting/etalons/cardview_sorting_method_api (material-blue-light).png b/.../cardView/sorting/etalons/cardview_sorting_method_api (material-blue-light).png
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/_index.scss
@@ -1,5 +1,6 @@
 @use './content_view';
 @use './header_panel';
+@use './filter_panel';
 @use './variables' as *;
 
 // adduse

diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/_index.scss
@@ -1,7 +1,8 @@
 @use '../variables' as *;
 @use './content';
+@use './no_data';
 
-.dx-cardview-contentview {
+.dx-gridcore-contentview {
   overflow: hidden;
   flex-grow: 1;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss
@@ -11,8 +11,13 @@
   border-radius: $cardview-card-border-radius;
   background-color: $cardview-card-background-color;
   overflow: hidden;
+
+  & > :nth-child(1) {
+    border-top: none;
+  }
 }
 
+
 .dx-cardview-card-selection {
   background-color: $cardview-card-selection-background-color;
 }
diff --git a/.../devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_index.scss b/.../devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_index.scss
@@ -3,25 +3,31 @@
 
 .dx-cardview-card-content {
   padding: ($cardview-card-content-padding-vertical - $cardview-card-content-field-gap) $cardview-card-content-padding-horizontal;
-  display: table;
+  display: grid;
+  grid-template-columns: auto 1fr;
   border-spacing: $cardview-card-content-field-gap;
   width: 100%;
+  border-top: $cardview-card-border-size solid $cardview-card-border-color;
 }
 
-.dx-cardview-field {
-  display: table-row;
+.dx-cardview-field-template {
+  grid-column: span 2;
 }
 
-.dx-cardview-field-name,
-.dx-cardview-field-value {
-  display: table-cell;
+.dx-cardview-field-caption,
+.dx-cardview-field-value,
+.dx-cardview-field-template {
+  padding: $cardview-card-content-cell-padding-vertical $cardview-card-content-cell-padding-horizontal;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: $cardview-card-content-cell-padding-vertical $cardview-card-content-cell-padding-horizontal;
+
+  .dx-cardview-word-wrap-enabled & {
+    white-space: normal;
+  }
 }
 
-.dx-cardview-field-name {
+.dx-cardview-field-caption {
   font-weight: 600;
 }
 
@@ -38,14 +44,6 @@
     text-align: center;
   }
 
-  &--white-space-normal {
-    white-space: normal;
-  }
-
-  &--white-space-nowrap {
-    white-space: nowrap;
-  }
-
   &__text-part {
     &--highlighted {
       color: $cardview-card-content-field-value-highlight-color;

diff --git a/...es/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss b/...es/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss
@@ -6,9 +6,10 @@
   display: flex;
   justify-content: center;
   border-top: $cardview-card-border-size solid $cardview-card-border-color;
-  border-bottom: $cardview-card-border-size solid $cardview-card-border-color;
   max-height: var(--dx-cardview-card-cover-max-height);
   aspect-ratio: var(--dx-cardview-card-cover-ratio);
+  width: 100%;
+  background-color: $cardview-card-cover-background-color;
 
   &-noimage {
     background-color: $cardview-card-cover-noimage-background-color;
@@ -23,6 +24,5 @@
 
 .dx-card-cover-image {
   object-fit: contain;
-  width: 100%;
 }
 
diff --git a/...evextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_variables.scss b/...evextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_variables.scss
@@ -1,3 +1,4 @@
 $cardview-card-cover-noimage-background-color: null !default;
 $cardview-card-cover-noimage-icon-color: null !default;
 $cardview-card-cover-noimage-icon-size: null !default;
+$cardview-card-cover-background-color: null !default;
diff --git a/...s/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss b/...s/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss
@@ -1,17 +1,23 @@
 @use './variables' as *;
+@use '../variables' as *;
 
 .dx-cardview-card-header {
   .dx-toolbar {
     padding: 0 12px;
     border-radius: $cardview-card-header-border-radius;
 
-
     .dx-toolbar-label {
       font-size: $cardview-card-header-text-size;
     }
   }
 }
 
+.dx-cardview-card-selection {
+  .dx-toolbar {
+    background-color: $cardview-card-selection-background-color;
+  }
+}
+
 .dx-cardview-select-checkboxes-hidden .dx-cardview-card:not(.dx-cardview-card-selection) .dx-cardview-select-checkbox {
   .dx-checkbox {
     display: none;

diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_index.scss
@@ -0,0 +1,28 @@
+@use './variables' as *;
+
+.dx-gridcore-nodata-icon-container {
+  height: $cardview-nodata-icon-container-size;
+  width: $cardview-nodata-icon-container-size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $cardview-nodata-icon-container-background-color;
+  border-radius: 999px;
+  margin: $cardview-nodata-icon-container-margin;
+
+  .dx-icon {
+    font-size: $cardview-nodata-icon-size;
+  }
+}
+
+.dx-gridcore-nodata-element {
+  color: $cardview-nodata-text-color;
+  text-align: center;
+}
+
+.dx-gridcore-nodata-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_variables.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_variables.scss
@@ -0,0 +1,7 @@
+$cardview-nodata-text-color: null !default;
+
+$cardview-nodata-icon-container-size: null !default;
+$cardview-nodata-icon-container-background-color: null !default;
+$cardview-nodata-icon-container-margin: null !default;
+
+$cardview-nodata-icon-size: null !default;
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/filter_panel/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/filter_panel/_index.scss
@@ -0,0 +1,7 @@
+@use '../variables' as *;
+
+.dx-cardview {
+  .dx-datagrid-filter-panel {
+    background-color: $cardview-background-color;
+  }
+}
diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss
@@ -11,20 +11,26 @@
   border: solid $cardview-header-item-border-width $cardview-header-item-border-color;
   border-radius: $cardview-header-item-border-radius;
   background-color: $cardview-header-item-background-color;
+  line-height: $cardview-header-item-line-height;
   cursor: pointer;
 
   &:hover {
     background-color: $cardview-header-item-hovered-background-color;
     border: solid $cardview-header-item-border-width $cardview-header-item-hovered-border-color;
   }
+
+  .dx-icon-cursorprohibition {
+    color: $cardview-header-item-prohibition-icon-color;
+  }
+
+  .dx-icon {
+    font-size: $cardview-header-item-icon-size;
+  }
 }
 
 .dx-cardview {
   .dx-header-filter-icon {
-    @include dx-icon(filter);
-
     color: $cardview-header-filter-icon-empty-color;
-    font-size: $cardview-header-filter-icon-size;
 
     &--selected {
       color: $cardview-header-filter-icon-selected-color;
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,6 @@ export const items = new Array(1000).fill(null).map(() => ( @@
       {column1: 1, column2: 2}
     ));
     function isNotEmpty(value: string | undefined | null) {
       return value !== undefined && value !== null && value !== '';
     }
@@ Expand Down @@