From 9842223179b36d82a217ab42ea3f72aa2c2e3c09 Mon Sep 17 00:00:00 2001
From: splincode <omaxphp@yandex.ru>
Date: Wed, 31 Jan 2024 18:22:05 +0300
Subject: [PATCH] chore: update

---
 projects/demo/src/modules/app/app.routes.ts   |  15 +-
 projects/demo/src/modules/app/pages.ts        |  10 +-
 .../card-large.component.ts}                  |  46 +---
 .../card-large/card-large.module.ts           | 100 +++++++++
 .../card-large/card-large.template.html       | 127 +++++++++++
 .../8 => card-large/examples/1}/index.html    |   0
 .../8 => card-large/examples/1}/index.less    |   0
 .../10 => card-large/examples/1}/index.ts     |   4 +-
 .../17 => card-large/examples/10}/index.html  |   0
 .../17 => card-large/examples/10}/index.less  |   0
 .../card-large/examples/10/index.ts           |  12 ++
 .../18 => card-large/examples/11}/index.html  |   0
 .../18 => card-large/examples/11}/index.less  |   0
 .../card-large/examples/11/index.ts           |  12 ++
 .../19 => card-large/examples/12}/index.html  |   0
 .../9 => card-large/examples/12}/index.ts     |   4 +-
 .../9 => card-large/examples/2}/index.html    |   0
 .../16 => card-large/examples/2}/index.ts     |   4 +-
 .../10 => card-large/examples/3}/index.html   |   0
 .../10 => card-large/examples/3}/index.less   |   0
 .../11 => card-large/examples/3}/index.ts     |   4 +-
 .../11 => card-large/examples/4}/index.html   |   0
 .../11 => card-large/examples/4}/index.less   |   0
 .../13 => card-large/examples/4}/index.ts     |   4 +-
 .../12 => card-large/examples/5}/index.html   |   0
 .../19 => card-large/examples/5}/index.ts     |   4 +-
 .../13 => card-large/examples/6}/index.html   |   0
 .../13 => card-large/examples/6}/index.less   |   0
 .../1 => card-large/examples/6}/index.ts      |   4 +-
 .../14 => card-large/examples/7}/index.html   |   0
 .../14 => card-large/examples/7}/index.less   |   0
 .../card-large/examples/7/index.ts            |  12 ++
 .../15 => card-large/examples/8}/index.html   |   0
 .../15 => card-large/examples/8}/index.less   |   0
 .../card-large/examples/8/index.ts            |  12 ++
 .../16 => card-large/examples/9}/index.html   |   0
 .../12 => card-large/examples/9}/index.ts     |   4 +-
 .../examples/import/import-module.md          |   0
 .../examples/import/insert-template.md        |  10 +
 .../card-medium/card-medium.component.ts      |  60 ++++++
 .../card-medium.module.ts}                    |  50 ++---
 .../card-medium/card-medium.template.html     | 103 +++++++++
 .../examples/1/index.html                     |   0
 .../examples/1/index.less                     |   0
 .../card-medium/examples/1/index.ts           |  12 ++
 .../examples/2/index.html                     |   0
 .../examples/2/index.less                     |   0
 .../card-medium/examples/2/index.ts           |  12 ++
 .../examples/3/index.html                     |   0
 .../examples/3/index.less                     |   0
 .../card-medium/examples/3/index.ts           |  12 ++
 .../examples/4/index.html                     |   0
 .../examples/4/index.less                     |   0
 .../{card => card-medium}/examples/4/index.ts |   2 +-
 .../examples/5/index.html                     |   0
 .../examples/5/index.less                     |   0
 .../card-medium/examples/5/index.ts           |  12 ++
 .../examples/6/index.html                     |   0
 .../examples/6/index.less                     |   0
 .../card-medium/examples/6/index.ts           |  12 ++
 .../examples/7/index.html                     |   0
 .../examples/7/index.less                     |   0
 .../{card => card-medium}/examples/7/index.ts |   4 +-
 .../examples/import/import-module.md          |  13 ++
 .../examples/import/insert-template.md        |  11 -
 .../experimental/card/card.template.html      | 203 ------------------
 .../experimental/card/examples/14/index.ts    |  12 --
 .../experimental/card/examples/15/index.ts    |  12 --
 .../experimental/card/examples/17/index.ts    |  12 --
 .../experimental/card/examples/18/index.ts    |  12 --
 .../experimental/card/examples/2/index.ts     |  12 --
 .../experimental/card/examples/3/index.ts     |  12 --
 .../experimental/card/examples/5/index.ts     |  12 --
 .../experimental/card/examples/6/index.ts     |  12 --
 .../experimental/card/examples/8/index.ts     |  12 --
 75 files changed, 572 insertions(+), 430 deletions(-)
 rename projects/demo/src/modules/experimental/{card/card.component.ts => card-large/card-large.component.ts} (56%)
 create mode 100644 projects/demo/src/modules/experimental/card-large/card-large.module.ts
 create mode 100644 projects/demo/src/modules/experimental/card-large/card-large.template.html
 rename projects/demo/src/modules/experimental/{card/examples/8 => card-large/examples/1}/index.html (100%)
 rename projects/demo/src/modules/experimental/{card/examples/8 => card-large/examples/1}/index.less (100%)
 rename projects/demo/src/modules/experimental/{card/examples/10 => card-large/examples/1}/index.ts (78%)
 rename projects/demo/src/modules/experimental/{card/examples/17 => card-large/examples/10}/index.html (100%)
 rename projects/demo/src/modules/experimental/{card/examples/17 => card-large/examples/10}/index.less (100%)
 create mode 100644 projects/demo/src/modules/experimental/card-large/examples/10/index.ts
 rename projects/demo/src/modules/experimental/{card/examples/18 => card-large/examples/11}/index.html (100%)
 rename projects/demo/src/modules/experimental/{card/examples/18 => card-large/examples/11}/index.less (100%)
 create mode 100644 projects/demo/src/modules/experimental/card-large/examples/11/index.ts
 rename projects/demo/src/modules/experimental/{card/examples/19 => card-large/examples/12}/index.html (100%)
 rename projects/demo/src/modules/experimental/{card/examples/9 => card-large/examples/12}/index.ts (75%)
 rename projects/demo/src/modules/experimental/{card/examples/9 => card-large/examples/2}/index.html (100%)
 rename projects/demo/src/modules/experimental/{card/examples/16 => card-large/examples/2}/index.ts (76%)
 rename projects/demo/src/modules/experimental/{card/examples/10 => card-large/examples/3}/index.html (100%)
 rename projects/demo/src/modules/experimental/{card/examples/10 => card-large/examples/3}/index.less (100%)
 rename projects/demo/src/modules/experimental/{card/examples/11 => card-large/examples/3}/index.ts (78%)
 rename projects/demo/src/modules/experimental/{card/examples/11 => card-large/examples/4}/index.html (100%)
 rename projects/demo/src/modules/experimental/{card/examples/11 => card-large/examples/4}/index.less (100%)
 rename projects/demo/src/modules/experimental/{card/examples/13 => card-large/examples/4}/index.ts (78%)
 rename projects/demo/src/modules/experimental/{card/examples/12 => card-large/examples/5}/index.html (100%)
 rename projects/demo/src/modules/experimental/{card/examples/19 => card-large/examples/5}/index.ts (76%)
 rename projects/demo/src/modules/experimental/{card/examples/13 => card-large/examples/6}/index.html (100%)
 rename projects/demo/src/modules/experimental/{card/examples/13 => card-large/examples/6}/index.less (100%)
 rename projects/demo/src/modules/experimental/{card/examples/1 => card-large/examples/6}/index.ts (78%)
 rename projects/demo/src/modules/experimental/{card/examples/14 => card-large/examples/7}/index.html (100%)
 rename projects/demo/src/modules/experimental/{card/examples/14 => card-large/examples/7}/index.less (100%)
 create mode 100644 projects/demo/src/modules/experimental/card-large/examples/7/index.ts
 rename projects/demo/src/modules/experimental/{card/examples/15 => card-large/examples/8}/index.html (100%)
 rename projects/demo/src/modules/experimental/{card/examples/15 => card-large/examples/8}/index.less (100%)
 create mode 100644 projects/demo/src/modules/experimental/card-large/examples/8/index.ts
 rename projects/demo/src/modules/experimental/{card/examples/16 => card-large/examples/9}/index.html (100%)
 rename projects/demo/src/modules/experimental/{card/examples/12 => card-large/examples/9}/index.ts (76%)
 rename projects/demo/src/modules/experimental/{card => card-large}/examples/import/import-module.md (100%)
 create mode 100644 projects/demo/src/modules/experimental/card-large/examples/import/insert-template.md
 create mode 100644 projects/demo/src/modules/experimental/card-medium/card-medium.component.ts
 rename projects/demo/src/modules/experimental/{card/card.module.ts => card-medium/card-medium.module.ts} (59%)
 create mode 100644 projects/demo/src/modules/experimental/card-medium/card-medium.template.html
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/1/index.html (100%)
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/1/index.less (100%)
 create mode 100644 projects/demo/src/modules/experimental/card-medium/examples/1/index.ts
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/2/index.html (100%)
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/2/index.less (100%)
 create mode 100644 projects/demo/src/modules/experimental/card-medium/examples/2/index.ts
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/3/index.html (100%)
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/3/index.less (100%)
 create mode 100644 projects/demo/src/modules/experimental/card-medium/examples/3/index.ts
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/4/index.html (100%)
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/4/index.less (100%)
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/4/index.ts (92%)
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/5/index.html (100%)
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/5/index.less (100%)
 create mode 100644 projects/demo/src/modules/experimental/card-medium/examples/5/index.ts
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/6/index.html (100%)
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/6/index.less (100%)
 create mode 100644 projects/demo/src/modules/experimental/card-medium/examples/6/index.ts
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/7/index.html (100%)
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/7/index.less (100%)
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/7/index.ts (79%)
 create mode 100644 projects/demo/src/modules/experimental/card-medium/examples/import/import-module.md
 rename projects/demo/src/modules/experimental/{card => card-medium}/examples/import/insert-template.md (57%)
 delete mode 100644 projects/demo/src/modules/experimental/card/card.template.html
 delete mode 100644 projects/demo/src/modules/experimental/card/examples/14/index.ts
 delete mode 100644 projects/demo/src/modules/experimental/card/examples/15/index.ts
 delete mode 100644 projects/demo/src/modules/experimental/card/examples/17/index.ts
 delete mode 100644 projects/demo/src/modules/experimental/card/examples/18/index.ts
 delete mode 100644 projects/demo/src/modules/experimental/card/examples/2/index.ts
 delete mode 100644 projects/demo/src/modules/experimental/card/examples/3/index.ts
 delete mode 100644 projects/demo/src/modules/experimental/card/examples/5/index.ts
 delete mode 100644 projects/demo/src/modules/experimental/card/examples/6/index.ts
 delete mode 100644 projects/demo/src/modules/experimental/card/examples/8/index.ts

diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index 09f0d87f2b9d..e4ec86d4d1db 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -283,11 +283,20 @@ export const ROUTES: Routes = [
         },
     },
     {
-        path: 'experimental/card',
+        path: 'experimental/card-medium',
         loadChildren: async () =>
-            (await import('../experimental/card/card.module')).ExampleTuiCardModule,
+            (await import('../experimental/card-medium/card-medium.module')).ExampleTuiCardModule,
         data: {
-            title: 'Card',
+            title: 'CardMedium',
+        },
+    },
+    {
+        path: 'experimental/card-large',
+        loadChildren: async () =>
+            (await import('../experimental/card-large/card-large.module'))
+                .ExampleTuiCardLargeModule,
+        data: {
+            title: 'CardLarge',
         },
     },
     {
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index 8b5c18af120d..a3f143b6f9e1 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -1037,15 +1037,15 @@ export const pages: TuiDocPages = [
     },
     {
         section: 'Experimental',
-        title: 'Card',
-        keywords: 'card, card-medium, card-large, medium, large, block, карточка, блок',
-        route: '/experimental/card',
+        title: 'CardMedium',
+        keywords: 'card, card-medium, medium, block, карточка, блок',
+        route: '/experimental/card-medium',
     },
     {
         section: 'Experimental',
         title: 'CardLarge',
-        keywords: 'card, card-medium, card-large, medium, large, block, карточка, блок',
-        route: '/experimental/card/Large',
+        keywords: 'card, card-large, large, block, карточка, блок',
+        route: '/experimental/card-large',
     },
     {
         section: 'Experimental',
diff --git a/projects/demo/src/modules/experimental/card/card.component.ts b/projects/demo/src/modules/experimental/card-large/card-large.component.ts
similarity index 56%
rename from projects/demo/src/modules/experimental/card/card.component.ts
rename to projects/demo/src/modules/experimental/card-large/card-large.component.ts
index 3fc67ff87a44..3f5e26530aeb 100644
--- a/projects/demo/src/modules/experimental/card/card.component.ts
+++ b/projects/demo/src/modules/experimental/card-large/card-large.component.ts
@@ -4,10 +4,10 @@ import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-card',
-    templateUrl: './card.template.html',
+    templateUrl: './card-large.template.html',
     changeDetection,
 })
-export class ExampleTuiCardComponent {
+export class ExampleTuiCardLargeComponent {
     readonly exampleModule: TuiRawLoaderContent = import(
         './examples/import/import-module.md?raw'
     );
@@ -17,50 +17,40 @@ export class ExampleTuiCardComponent {
     );
 
     readonly example1: TuiDocExample = {
-        TypeScript: import('./examples/1/index.ts?raw'),
         HTML: import('./examples/1/index.html?raw'),
         LESS: import('./examples/1/index.less?raw'),
     };
 
     readonly example2: TuiDocExample = {
-        TypeScript: import('./examples/2/index.ts?raw'),
         HTML: import('./examples/2/index.html?raw'),
-        LESS: import('./examples/2/index.less?raw'),
     };
 
     readonly example3: TuiDocExample = {
-        TypeScript: import('./examples/3/index.ts?raw'),
         HTML: import('./examples/3/index.html?raw'),
         LESS: import('./examples/3/index.less?raw'),
     };
 
     readonly example4: TuiDocExample = {
-        TypeScript: import('./examples/4/index.ts?raw'),
         HTML: import('./examples/4/index.html?raw'),
         LESS: import('./examples/4/index.less?raw'),
     };
 
     readonly example5: TuiDocExample = {
-        TypeScript: import('./examples/5/index.ts?raw'),
         HTML: import('./examples/5/index.html?raw'),
-        LESS: import('./examples/5/index.less?raw'),
     };
 
     readonly example6: TuiDocExample = {
-        TypeScript: import('./examples/6/index.ts?raw'),
         HTML: import('./examples/6/index.html?raw'),
         LESS: import('./examples/6/index.less?raw'),
     };
 
     readonly example7: TuiDocExample = {
-        TypeScript: import('./examples/7/index.ts?raw'),
         HTML: import('./examples/7/index.html?raw'),
         LESS: import('./examples/7/index.less?raw'),
     };
 
     readonly example8: TuiDocExample = {
         HTML: import('./examples/8/index.html?raw'),
-        LESS: import('./examples/8/index.less?raw'),
     };
 
     readonly example9: TuiDocExample = {
@@ -80,36 +70,4 @@ export class ExampleTuiCardComponent {
     readonly example12: TuiDocExample = {
         HTML: import('./examples/12/index.html?raw'),
     };
-
-    readonly example13: TuiDocExample = {
-        HTML: import('./examples/13/index.html?raw'),
-        LESS: import('./examples/13/index.less?raw'),
-    };
-
-    readonly example14: TuiDocExample = {
-        HTML: import('./examples/14/index.html?raw'),
-        LESS: import('./examples/14/index.less?raw'),
-    };
-
-    readonly example15: TuiDocExample = {
-        HTML: import('./examples/15/index.html?raw'),
-    };
-
-    readonly example16: TuiDocExample = {
-        HTML: import('./examples/16/index.html?raw'),
-    };
-
-    readonly example17: TuiDocExample = {
-        HTML: import('./examples/17/index.html?raw'),
-        LESS: import('./examples/17/index.less?raw'),
-    };
-
-    readonly example18: TuiDocExample = {
-        HTML: import('./examples/18/index.html?raw'),
-        LESS: import('./examples/18/index.less?raw'),
-    };
-
-    readonly example19: TuiDocExample = {
-        HTML: import('./examples/19/index.html?raw'),
-    };
 }
diff --git a/projects/demo/src/modules/experimental/card-large/card-large.module.ts b/projects/demo/src/modules/experimental/card-large/card-large.module.ts
new file mode 100644
index 000000000000..46fba2415423
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/card-large.module.ts
@@ -0,0 +1,100 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {tuiGetDocModules} from '@taiga-ui/addon-doc';
+import {TuiRippleModule} from '@taiga-ui/addon-mobile';
+import {TuiPlatformModule, TuiRepeatTimesModule} from '@taiga-ui/cdk';
+import {
+    TuiDataListModule,
+    TuiHintModule,
+    TuiHostedDropdownModule,
+    TuiLinkModule,
+    TuiNotificationModule,
+    TuiScrollbarModule,
+    TuiSvgModule,
+} from '@taiga-ui/core';
+import {
+    TuiAppearanceModule,
+    TuiAutoColorModule,
+    TuiAvatarModule,
+    TuiAvatarStackModule,
+    TuiBadgeModule,
+    TuiButtonCloseModule,
+    TuiButtonModule,
+    TuiCardModule,
+    TuiCellModule,
+    TuiFadeModule,
+    TuiFallbackSrcModule,
+    TuiHeaderModule,
+    TuiIconModule,
+    TuiInitialsModule,
+    TuiSurfaceModule,
+    TuiThumbnailCardModule,
+    TuiTitleModule,
+} from '@taiga-ui/experimental';
+
+import {ExampleTuiCardLargeComponent} from './card-large.component';
+import {TuiCardLargeExample1} from './examples/1';
+import {TuiCardLargeExample2} from './examples/2';
+import {TuiCardLargeExample3} from './examples/3';
+import {TuiCardLargeExample4} from './examples/4';
+import {TuiCardLargeExample5} from './examples/5';
+import {TuiCardLargeExample6} from './examples/6';
+import {TuiCardLargeExample7} from './examples/7';
+import {TuiCardLargeExample8} from './examples/8';
+import {TuiCardLargeExample9} from './examples/9';
+import {TuiCardLargeExample10} from './examples/10';
+import {TuiCardLargeExample11} from './examples/11';
+import {TuiCardLargeExample12} from './examples/12';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiAvatarStackModule,
+        TuiAutoColorModule,
+        TuiInitialsModule,
+        TuiNotificationModule,
+        TuiFallbackSrcModule,
+        TuiFadeModule,
+        TuiCardModule,
+        TuiSurfaceModule,
+        TuiSvgModule,
+        TuiBadgeModule,
+        TuiTitleModule,
+        TuiAvatarModule,
+        TuiScrollbarModule,
+        TuiHintModule,
+        FormsModule,
+        TuiRippleModule,
+        TuiThumbnailCardModule,
+        TuiIconModule,
+        TuiButtonModule,
+        TuiHeaderModule,
+        TuiCellModule,
+        tuiGetDocModules(ExampleTuiCardLargeComponent),
+        TuiRepeatTimesModule,
+        TuiDataListModule,
+        TuiHostedDropdownModule,
+        TuiButtonCloseModule,
+        TuiPlatformModule,
+        TuiLinkModule,
+        TuiAppearanceModule,
+    ],
+    declarations: [
+        ExampleTuiCardLargeComponent,
+        TuiCardLargeExample1,
+        TuiCardLargeExample2,
+        TuiCardLargeExample3,
+        TuiCardLargeExample4,
+        TuiCardLargeExample5,
+        TuiCardLargeExample6,
+        TuiCardLargeExample7,
+        TuiCardLargeExample8,
+        TuiCardLargeExample9,
+        TuiCardLargeExample10,
+        TuiCardLargeExample11,
+        TuiCardLargeExample12,
+    ],
+    exports: [ExampleTuiCardLargeComponent],
+})
+export class ExampleTuiCardLargeModule {}
diff --git a/projects/demo/src/modules/experimental/card-large/card-large.template.html b/projects/demo/src/modules/experimental/card-large/card-large.template.html
new file mode 100644
index 000000000000..3d32f4ccdf21
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/card-large.template.html
@@ -0,0 +1,127 @@
+<tui-doc-page
+    header="CardLarge"
+    package="EXPERIMENTAL"
+    type="components"
+>
+    <ng-template pageTab>
+        <tui-doc-example
+            id="basic"
+            heading="Basic"
+            [content]="example1"
+        >
+            <tui-card-large-example-1></tui-card-large-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell-avatar"
+            heading="Avatar"
+            [content]="example2"
+        >
+            <tui-card-large-example-2></tui-card-large-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="single"
+            heading="Single item"
+            [content]="example3"
+        >
+            <tui-card-large-example-3></tui-card-large-example-3>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cards-list"
+            heading="Cards List"
+            [content]="example4"
+        >
+            <tui-card-large-example-4></tui-card-large-example-4>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell-list"
+            heading="Cell List"
+            [content]="example5"
+        >
+            <tui-card-large-example-5></tui-card-large-example-5>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell-list-columns"
+            heading="Cell List (2 columns)"
+            [content]="example6"
+            [fullsize]="true"
+        >
+            <tui-card-large-example-6></tui-card-large-example-6>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="cell-list-headless"
+            heading="Cell List (actions)"
+            [content]="example7"
+        >
+            <tui-card-large-example-7></tui-card-large-example-7>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="align"
+            heading="Footer alignment"
+            [content]="example8"
+        >
+            <tui-card-large-example-8></tui-card-large-example-8>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="map"
+            heading="Map"
+            [content]="example9"
+            [fullsize]="true"
+        >
+            <tui-card-large-example-9></tui-card-large-example-9>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="image"
+            heading="Image"
+            [content]="example10"
+        >
+            <tui-card-large-example-10></tui-card-large-example-10>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="image-dark"
+            heading="Image-dark"
+            [content]="example11"
+        >
+            <tui-card-large-example-11></tui-card-large-example-11>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="paddings"
+            heading="Paddings and radiuses"
+            [content]="example12"
+        >
+            <tui-card-large-example-12></tui-card-large-example-12>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p>Import module:</p>
+
+                <tui-doc-code
+                    filename="my.module.ts"
+                    [code]="exampleModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p>Add to the template:</p>
+
+                <tui-doc-code
+                    filename="my.component.html"
+                    [code]="exampleHtml"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>
diff --git a/projects/demo/src/modules/experimental/card/examples/8/index.html b/projects/demo/src/modules/experimental/card-large/examples/1/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/8/index.html
rename to projects/demo/src/modules/experimental/card-large/examples/1/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/8/index.less b/projects/demo/src/modules/experimental/card-large/examples/1/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/8/index.less
rename to projects/demo/src/modules/experimental/card-large/examples/1/index.less
diff --git a/projects/demo/src/modules/experimental/card/examples/10/index.ts b/projects/demo/src/modules/experimental/card-large/examples/1/index.ts
similarity index 78%
rename from projects/demo/src/modules/experimental/card/examples/10/index.ts
rename to projects/demo/src/modules/experimental/card-large/examples/1/index.ts
index 31db7edbad03..485fe5a374c6 100644
--- a/projects/demo/src/modules/experimental/card/examples/10/index.ts
+++ b/projects/demo/src/modules/experimental/card-large/examples/1/index.ts
@@ -3,10 +3,10 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
 @Component({
-    selector: 'tui-card-example-10',
+    selector: 'tui-card-large-example-1',
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiCardExample10 {}
+export class TuiCardLargeExample1 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/17/index.html b/projects/demo/src/modules/experimental/card-large/examples/10/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/17/index.html
rename to projects/demo/src/modules/experimental/card-large/examples/10/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/17/index.less b/projects/demo/src/modules/experimental/card-large/examples/10/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/17/index.less
rename to projects/demo/src/modules/experimental/card-large/examples/10/index.less
diff --git a/projects/demo/src/modules/experimental/card-large/examples/10/index.ts b/projects/demo/src/modules/experimental/card-large/examples/10/index.ts
new file mode 100644
index 000000000000..aa9dcab2bc8c
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/10/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-large-example-10',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiCardLargeExample10 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/18/index.html b/projects/demo/src/modules/experimental/card-large/examples/11/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/18/index.html
rename to projects/demo/src/modules/experimental/card-large/examples/11/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/18/index.less b/projects/demo/src/modules/experimental/card-large/examples/11/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/18/index.less
rename to projects/demo/src/modules/experimental/card-large/examples/11/index.less
diff --git a/projects/demo/src/modules/experimental/card-large/examples/11/index.ts b/projects/demo/src/modules/experimental/card-large/examples/11/index.ts
new file mode 100644
index 000000000000..98920082b357
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/11/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-large-example-11',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiCardLargeExample11 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/19/index.html b/projects/demo/src/modules/experimental/card-large/examples/12/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/19/index.html
rename to projects/demo/src/modules/experimental/card-large/examples/12/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/9/index.ts b/projects/demo/src/modules/experimental/card-large/examples/12/index.ts
similarity index 75%
rename from projects/demo/src/modules/experimental/card/examples/9/index.ts
rename to projects/demo/src/modules/experimental/card-large/examples/12/index.ts
index 57f6742db5a9..3e93031b74fc 100644
--- a/projects/demo/src/modules/experimental/card/examples/9/index.ts
+++ b/projects/demo/src/modules/experimental/card-large/examples/12/index.ts
@@ -3,9 +3,9 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
 @Component({
-    selector: 'tui-card-example-9',
+    selector: 'tui-card-large-example-12',
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiCardExample9 {}
+export class TuiCardLargeExample12 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/9/index.html b/projects/demo/src/modules/experimental/card-large/examples/2/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/9/index.html
rename to projects/demo/src/modules/experimental/card-large/examples/2/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/16/index.ts b/projects/demo/src/modules/experimental/card-large/examples/2/index.ts
similarity index 76%
rename from projects/demo/src/modules/experimental/card/examples/16/index.ts
rename to projects/demo/src/modules/experimental/card-large/examples/2/index.ts
index f6687706db3f..603118469dac 100644
--- a/projects/demo/src/modules/experimental/card/examples/16/index.ts
+++ b/projects/demo/src/modules/experimental/card-large/examples/2/index.ts
@@ -3,9 +3,9 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
 @Component({
-    selector: 'tui-card-example-16',
+    selector: 'tui-card-large-example-2',
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiCardExample16 {}
+export class TuiCardLargeExample2 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/10/index.html b/projects/demo/src/modules/experimental/card-large/examples/3/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/10/index.html
rename to projects/demo/src/modules/experimental/card-large/examples/3/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/10/index.less b/projects/demo/src/modules/experimental/card-large/examples/3/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/10/index.less
rename to projects/demo/src/modules/experimental/card-large/examples/3/index.less
diff --git a/projects/demo/src/modules/experimental/card/examples/11/index.ts b/projects/demo/src/modules/experimental/card-large/examples/3/index.ts
similarity index 78%
rename from projects/demo/src/modules/experimental/card/examples/11/index.ts
rename to projects/demo/src/modules/experimental/card-large/examples/3/index.ts
index 5785c4bfddc0..7aa80ed01374 100644
--- a/projects/demo/src/modules/experimental/card/examples/11/index.ts
+++ b/projects/demo/src/modules/experimental/card-large/examples/3/index.ts
@@ -3,10 +3,10 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
 @Component({
-    selector: 'tui-card-example-11',
+    selector: 'tui-card-large-example-3',
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiCardExample11 {}
+export class TuiCardLargeExample3 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/11/index.html b/projects/demo/src/modules/experimental/card-large/examples/4/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/11/index.html
rename to projects/demo/src/modules/experimental/card-large/examples/4/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/11/index.less b/projects/demo/src/modules/experimental/card-large/examples/4/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/11/index.less
rename to projects/demo/src/modules/experimental/card-large/examples/4/index.less
diff --git a/projects/demo/src/modules/experimental/card/examples/13/index.ts b/projects/demo/src/modules/experimental/card-large/examples/4/index.ts
similarity index 78%
rename from projects/demo/src/modules/experimental/card/examples/13/index.ts
rename to projects/demo/src/modules/experimental/card-large/examples/4/index.ts
index 8abefb88e1d9..0c6d4e9fa574 100644
--- a/projects/demo/src/modules/experimental/card/examples/13/index.ts
+++ b/projects/demo/src/modules/experimental/card-large/examples/4/index.ts
@@ -3,10 +3,10 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
 @Component({
-    selector: 'tui-card-example-13',
+    selector: 'tui-card-large-example-4',
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiCardExample13 {}
+export class TuiCardLargeExample4 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/12/index.html b/projects/demo/src/modules/experimental/card-large/examples/5/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/12/index.html
rename to projects/demo/src/modules/experimental/card-large/examples/5/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/19/index.ts b/projects/demo/src/modules/experimental/card-large/examples/5/index.ts
similarity index 76%
rename from projects/demo/src/modules/experimental/card/examples/19/index.ts
rename to projects/demo/src/modules/experimental/card-large/examples/5/index.ts
index df458873acfd..9577dbad7e4a 100644
--- a/projects/demo/src/modules/experimental/card/examples/19/index.ts
+++ b/projects/demo/src/modules/experimental/card-large/examples/5/index.ts
@@ -3,9 +3,9 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
 @Component({
-    selector: 'tui-card-example-19',
+    selector: 'tui-card-large-example-5',
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiCardExample19 {}
+export class TuiCardLargeExample5 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/13/index.html b/projects/demo/src/modules/experimental/card-large/examples/6/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/13/index.html
rename to projects/demo/src/modules/experimental/card-large/examples/6/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/13/index.less b/projects/demo/src/modules/experimental/card-large/examples/6/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/13/index.less
rename to projects/demo/src/modules/experimental/card-large/examples/6/index.less
diff --git a/projects/demo/src/modules/experimental/card/examples/1/index.ts b/projects/demo/src/modules/experimental/card-large/examples/6/index.ts
similarity index 78%
rename from projects/demo/src/modules/experimental/card/examples/1/index.ts
rename to projects/demo/src/modules/experimental/card-large/examples/6/index.ts
index 490e91a760f3..cfa484cde232 100644
--- a/projects/demo/src/modules/experimental/card/examples/1/index.ts
+++ b/projects/demo/src/modules/experimental/card-large/examples/6/index.ts
@@ -3,10 +3,10 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
 @Component({
-    selector: 'tui-card-example-1',
+    selector: 'tui-card-large-example-6',
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiCardExample1 {}
+export class TuiCardLargeExample6 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/14/index.html b/projects/demo/src/modules/experimental/card-large/examples/7/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/14/index.html
rename to projects/demo/src/modules/experimental/card-large/examples/7/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/14/index.less b/projects/demo/src/modules/experimental/card-large/examples/7/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/14/index.less
rename to projects/demo/src/modules/experimental/card-large/examples/7/index.less
diff --git a/projects/demo/src/modules/experimental/card-large/examples/7/index.ts b/projects/demo/src/modules/experimental/card-large/examples/7/index.ts
new file mode 100644
index 000000000000..84d1ab79a65b
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/7/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-large-example-7',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiCardLargeExample7 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/15/index.html b/projects/demo/src/modules/experimental/card-large/examples/8/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/15/index.html
rename to projects/demo/src/modules/experimental/card-large/examples/8/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/15/index.less b/projects/demo/src/modules/experimental/card-large/examples/8/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/15/index.less
rename to projects/demo/src/modules/experimental/card-large/examples/8/index.less
diff --git a/projects/demo/src/modules/experimental/card-large/examples/8/index.ts b/projects/demo/src/modules/experimental/card-large/examples/8/index.ts
new file mode 100644
index 000000000000..c56d048cb3fb
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/8/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-large-example-8',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiCardLargeExample8 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/16/index.html b/projects/demo/src/modules/experimental/card-large/examples/9/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/16/index.html
rename to projects/demo/src/modules/experimental/card-large/examples/9/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/12/index.ts b/projects/demo/src/modules/experimental/card-large/examples/9/index.ts
similarity index 76%
rename from projects/demo/src/modules/experimental/card/examples/12/index.ts
rename to projects/demo/src/modules/experimental/card-large/examples/9/index.ts
index c1146c6aa342..b1b1fe0847fa 100644
--- a/projects/demo/src/modules/experimental/card/examples/12/index.ts
+++ b/projects/demo/src/modules/experimental/card-large/examples/9/index.ts
@@ -3,9 +3,9 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
 @Component({
-    selector: 'tui-card-example-12',
+    selector: 'tui-card-large-example-9',
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
 })
-export class TuiCardExample12 {}
+export class TuiCardLargeExample9 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/import/import-module.md b/projects/demo/src/modules/experimental/card-large/examples/import/import-module.md
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/import/import-module.md
rename to projects/demo/src/modules/experimental/card-large/examples/import/import-module.md
diff --git a/projects/demo/src/modules/experimental/card-large/examples/import/insert-template.md b/projects/demo/src/modules/experimental/card-large/examples/import/insert-template.md
new file mode 100644
index 000000000000..aefcbe339bba
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/import/insert-template.md
@@ -0,0 +1,10 @@
+```html
+<div
+  tuiCardLarge
+  tuiSurface="elevated"
+>
+  <div tuiHeader>
+    <h2 tuiTitle>Header</h2>
+  </div>
+</div>
+```
diff --git a/projects/demo/src/modules/experimental/card-medium/card-medium.component.ts b/projects/demo/src/modules/experimental/card-medium/card-medium.component.ts
new file mode 100644
index 000000000000..1ce9951eb413
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-medium/card-medium.component.ts
@@ -0,0 +1,60 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+
+@Component({
+    selector: 'example-card',
+    templateUrl: './card-medium.template.html',
+    changeDetection,
+})
+export class ExampleTuiCardComponent {
+    readonly exampleModule: TuiRawLoaderContent = import(
+        './examples/import/import-module.md?raw'
+    );
+
+    readonly exampleHtml: TuiRawLoaderContent = import(
+        './examples/import/insert-template.md?raw'
+    );
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('./examples/1/index.ts?raw'),
+        HTML: import('./examples/1/index.html?raw'),
+        LESS: import('./examples/1/index.less?raw'),
+    };
+
+    readonly example2: TuiDocExample = {
+        TypeScript: import('./examples/2/index.ts?raw'),
+        HTML: import('./examples/2/index.html?raw'),
+        LESS: import('./examples/2/index.less?raw'),
+    };
+
+    readonly example3: TuiDocExample = {
+        TypeScript: import('./examples/3/index.ts?raw'),
+        HTML: import('./examples/3/index.html?raw'),
+        LESS: import('./examples/3/index.less?raw'),
+    };
+
+    readonly example4: TuiDocExample = {
+        TypeScript: import('./examples/4/index.ts?raw'),
+        HTML: import('./examples/4/index.html?raw'),
+        LESS: import('./examples/4/index.less?raw'),
+    };
+
+    readonly example5: TuiDocExample = {
+        TypeScript: import('./examples/5/index.ts?raw'),
+        HTML: import('./examples/5/index.html?raw'),
+        LESS: import('./examples/5/index.less?raw'),
+    };
+
+    readonly example6: TuiDocExample = {
+        TypeScript: import('./examples/6/index.ts?raw'),
+        HTML: import('./examples/6/index.html?raw'),
+        LESS: import('./examples/6/index.less?raw'),
+    };
+
+    readonly example7: TuiDocExample = {
+        TypeScript: import('./examples/7/index.ts?raw'),
+        HTML: import('./examples/7/index.html?raw'),
+        LESS: import('./examples/7/index.less?raw'),
+    };
+}
diff --git a/projects/demo/src/modules/experimental/card/card.module.ts b/projects/demo/src/modules/experimental/card-medium/card-medium.module.ts
similarity index 59%
rename from projects/demo/src/modules/experimental/card/card.module.ts
rename to projects/demo/src/modules/experimental/card-medium/card-medium.module.ts
index a017c3f4a337..152d36057207 100644
--- a/projects/demo/src/modules/experimental/card/card.module.ts
+++ b/projects/demo/src/modules/experimental/card-medium/card-medium.module.ts
@@ -33,26 +33,14 @@ import {
     TuiTitleModule,
 } from '@taiga-ui/experimental';
 
-import {ExampleTuiCardComponent} from './card.component';
-import {TuiCardExample1} from './examples/1';
-import {TuiCardExample2} from './examples/2';
-import {TuiCardExample3} from './examples/3';
+import {ExampleTuiCardComponent} from './card-medium.component';
+import {TuiCardMediumExample1} from './examples/1';
+import {TuiCardMediumExample2} from './examples/2';
+import {TuiCardMediumExample3} from './examples/3';
 import {TuiCardExample4} from './examples/4';
-import {TuiCardExample5} from './examples/5';
-import {TuiCardExample6} from './examples/6';
-import {TuiCardExample7} from './examples/7';
-import {TuiCardExample8} from './examples/8';
-import {TuiCardExample9} from './examples/9';
-import {TuiCardExample10} from './examples/10';
-import {TuiCardExample11} from './examples/11';
-import {TuiCardExample12} from './examples/12';
-import {TuiCardExample13} from './examples/13';
-import {TuiCardExample14} from './examples/14';
-import {TuiCardExample15} from './examples/15';
-import {TuiCardExample16} from './examples/16';
-import {TuiCardExample17} from './examples/17';
-import {TuiCardExample18} from './examples/18';
-import {TuiCardExample19} from './examples/19';
+import {TuiCardMediumExample5} from './examples/5';
+import {TuiCardMediumExample6} from './examples/6';
+import {TuiCardMediumExample7} from './examples/7';
 
 @NgModule({
     imports: [
@@ -89,25 +77,13 @@ import {TuiCardExample19} from './examples/19';
     ],
     declarations: [
         ExampleTuiCardComponent,
-        TuiCardExample1,
-        TuiCardExample2,
-        TuiCardExample3,
+        TuiCardMediumExample1,
+        TuiCardMediumExample2,
+        TuiCardMediumExample3,
         TuiCardExample4,
-        TuiCardExample5,
-        TuiCardExample6,
-        TuiCardExample7,
-        TuiCardExample8,
-        TuiCardExample9,
-        TuiCardExample10,
-        TuiCardExample11,
-        TuiCardExample12,
-        TuiCardExample13,
-        TuiCardExample14,
-        TuiCardExample15,
-        TuiCardExample16,
-        TuiCardExample17,
-        TuiCardExample18,
-        TuiCardExample19,
+        TuiCardMediumExample5,
+        TuiCardMediumExample6,
+        TuiCardMediumExample7,
     ],
     exports: [ExampleTuiCardComponent],
 })
diff --git a/projects/demo/src/modules/experimental/card-medium/card-medium.template.html b/projects/demo/src/modules/experimental/card-medium/card-medium.template.html
new file mode 100644
index 000000000000..894af7caf4b6
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-medium/card-medium.template.html
@@ -0,0 +1,103 @@
+<tui-doc-page
+    header="Card"
+    package="EXPERIMENTAL"
+    type="components"
+>
+    <ng-template pageTab="Medium">
+        <tui-notification status="warning">
+            This code is
+            <strong>experimental</strong>
+            and is a subject to change. Expect final solution to be shipped in the next major version
+        </tui-notification>
+
+        <p>
+            A layout component used to create various cards for the interface. Define visual styles of the cards
+            yourself or combine with
+            <a
+                routerLink="/experimental/surface"
+                tuiLink
+            >
+                Surface
+            </a>
+            for visual presets.
+        </p>
+
+        <tui-doc-example
+            id="avatar"
+            heading="Avatar and text"
+            [content]="example1"
+        >
+            <tui-card-medium-example-1></tui-card-medium-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="icon"
+            heading="Icon"
+            [content]="example2"
+        >
+            <tui-card-medium-example-2></tui-card-medium-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="badge"
+            heading="Badge"
+            [content]="example3"
+        >
+            <tui-card-medium-example-3></tui-card-medium-example-3>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="stacking"
+            heading="Stacking"
+            [content]="example4"
+        >
+            <tui-card-medium-example-4></tui-card-medium-example-4>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="customization"
+            heading="Customization"
+            [content]="example5"
+        >
+            <tui-card-medium-example-5></tui-card-medium-example-5>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="long-text"
+            heading="Long text"
+            [content]="example6"
+        >
+            <tui-card-medium-example-6></tui-card-medium-example-6>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="selectable"
+            heading="Selectable"
+            [content]="example7"
+        >
+            <tui-card-medium-example-7></tui-card-medium-example-7>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p>Import module:</p>
+
+                <tui-doc-code
+                    filename="my.module.ts"
+                    [code]="exampleModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p>Add to the template:</p>
+
+                <tui-doc-code
+                    filename="my.component.html"
+                    [code]="exampleHtml"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>
diff --git a/projects/demo/src/modules/experimental/card/examples/1/index.html b/projects/demo/src/modules/experimental/card-medium/examples/1/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/1/index.html
rename to projects/demo/src/modules/experimental/card-medium/examples/1/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/1/index.less b/projects/demo/src/modules/experimental/card-medium/examples/1/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/1/index.less
rename to projects/demo/src/modules/experimental/card-medium/examples/1/index.less
diff --git a/projects/demo/src/modules/experimental/card-medium/examples/1/index.ts b/projects/demo/src/modules/experimental/card-medium/examples/1/index.ts
new file mode 100644
index 000000000000..5c465a5bb80a
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-medium/examples/1/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-medium-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiCardMediumExample1 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/2/index.html b/projects/demo/src/modules/experimental/card-medium/examples/2/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/2/index.html
rename to projects/demo/src/modules/experimental/card-medium/examples/2/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/2/index.less b/projects/demo/src/modules/experimental/card-medium/examples/2/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/2/index.less
rename to projects/demo/src/modules/experimental/card-medium/examples/2/index.less
diff --git a/projects/demo/src/modules/experimental/card-medium/examples/2/index.ts b/projects/demo/src/modules/experimental/card-medium/examples/2/index.ts
new file mode 100644
index 000000000000..ebde32f56b7f
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-medium/examples/2/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-medium-example-2',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiCardMediumExample2 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/3/index.html b/projects/demo/src/modules/experimental/card-medium/examples/3/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/3/index.html
rename to projects/demo/src/modules/experimental/card-medium/examples/3/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/3/index.less b/projects/demo/src/modules/experimental/card-medium/examples/3/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/3/index.less
rename to projects/demo/src/modules/experimental/card-medium/examples/3/index.less
diff --git a/projects/demo/src/modules/experimental/card-medium/examples/3/index.ts b/projects/demo/src/modules/experimental/card-medium/examples/3/index.ts
new file mode 100644
index 000000000000..6e39bf0e4d32
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-medium/examples/3/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-medium-example-3',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiCardMediumExample3 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/4/index.html b/projects/demo/src/modules/experimental/card-medium/examples/4/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/4/index.html
rename to projects/demo/src/modules/experimental/card-medium/examples/4/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/4/index.less b/projects/demo/src/modules/experimental/card-medium/examples/4/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/4/index.less
rename to projects/demo/src/modules/experimental/card-medium/examples/4/index.less
diff --git a/projects/demo/src/modules/experimental/card/examples/4/index.ts b/projects/demo/src/modules/experimental/card-medium/examples/4/index.ts
similarity index 92%
rename from projects/demo/src/modules/experimental/card/examples/4/index.ts
rename to projects/demo/src/modules/experimental/card-medium/examples/4/index.ts
index a381b72caac0..a3d270241186 100644
--- a/projects/demo/src/modules/experimental/card/examples/4/index.ts
+++ b/projects/demo/src/modules/experimental/card-medium/examples/4/index.ts
@@ -3,7 +3,7 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
 @Component({
-    selector: 'tui-card-example-4',
+    selector: 'tui-card-medium-example-4',
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
diff --git a/projects/demo/src/modules/experimental/card/examples/5/index.html b/projects/demo/src/modules/experimental/card-medium/examples/5/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/5/index.html
rename to projects/demo/src/modules/experimental/card-medium/examples/5/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/5/index.less b/projects/demo/src/modules/experimental/card-medium/examples/5/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/5/index.less
rename to projects/demo/src/modules/experimental/card-medium/examples/5/index.less
diff --git a/projects/demo/src/modules/experimental/card-medium/examples/5/index.ts b/projects/demo/src/modules/experimental/card-medium/examples/5/index.ts
new file mode 100644
index 000000000000..dcff1c01429e
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-medium/examples/5/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-medium-example-5',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiCardMediumExample5 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/6/index.html b/projects/demo/src/modules/experimental/card-medium/examples/6/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/6/index.html
rename to projects/demo/src/modules/experimental/card-medium/examples/6/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/6/index.less b/projects/demo/src/modules/experimental/card-medium/examples/6/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/6/index.less
rename to projects/demo/src/modules/experimental/card-medium/examples/6/index.less
diff --git a/projects/demo/src/modules/experimental/card-medium/examples/6/index.ts b/projects/demo/src/modules/experimental/card-medium/examples/6/index.ts
new file mode 100644
index 000000000000..a0ea458bd2b8
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-medium/examples/6/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-medium-example-6',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiCardMediumExample6 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/7/index.html b/projects/demo/src/modules/experimental/card-medium/examples/7/index.html
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/7/index.html
rename to projects/demo/src/modules/experimental/card-medium/examples/7/index.html
diff --git a/projects/demo/src/modules/experimental/card/examples/7/index.less b/projects/demo/src/modules/experimental/card-medium/examples/7/index.less
similarity index 100%
rename from projects/demo/src/modules/experimental/card/examples/7/index.less
rename to projects/demo/src/modules/experimental/card-medium/examples/7/index.less
diff --git a/projects/demo/src/modules/experimental/card/examples/7/index.ts b/projects/demo/src/modules/experimental/card-medium/examples/7/index.ts
similarity index 79%
rename from projects/demo/src/modules/experimental/card/examples/7/index.ts
rename to projects/demo/src/modules/experimental/card-medium/examples/7/index.ts
index 529de4049ea6..342209a033dd 100644
--- a/projects/demo/src/modules/experimental/card/examples/7/index.ts
+++ b/projects/demo/src/modules/experimental/card-medium/examples/7/index.ts
@@ -3,12 +3,12 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
 @Component({
-    selector: 'tui-card-example-7',
+    selector: 'tui-card-medium-example-7',
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiCardExample7 {
+export class TuiCardMediumExample7 {
     value = 0;
 }
diff --git a/projects/demo/src/modules/experimental/card-medium/examples/import/import-module.md b/projects/demo/src/modules/experimental/card-medium/examples/import/import-module.md
new file mode 100644
index 000000000000..b8f6dc443ad0
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-medium/examples/import/import-module.md
@@ -0,0 +1,13 @@
+```ts
+import {NgModule} from '@angular/core';
+import {TuiCardModule} from '@taiga-ui/experimental';
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiCardModule,
+  ],
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/experimental/card/examples/import/insert-template.md b/projects/demo/src/modules/experimental/card-medium/examples/import/insert-template.md
similarity index 57%
rename from projects/demo/src/modules/experimental/card/examples/import/insert-template.md
rename to projects/demo/src/modules/experimental/card-medium/examples/import/insert-template.md
index e1f776077d08..515ef284ad1e 100644
--- a/projects/demo/src/modules/experimental/card/examples/import/insert-template.md
+++ b/projects/demo/src/modules/experimental/card-medium/examples/import/insert-template.md
@@ -1,5 +1,4 @@
 ```html
-<!-- Medium -->
 <div tuiCardMedium>
   <tui-avatar
     class="star"
@@ -11,14 +10,4 @@
     <span tuiSubtitle>Subtitle</span>
   </h2>
 </div>
-
-<!-- Large -->
-<div
-  tuiCardLarge
-  tuiSurface="elevated"
->
-  <div tuiHeader>
-    <h2 tuiTitle>Header</h2>
-  </div>
-</div>
 ```
diff --git a/projects/demo/src/modules/experimental/card/card.template.html b/projects/demo/src/modules/experimental/card/card.template.html
deleted file mode 100644
index f5fa6125ecb6..000000000000
--- a/projects/demo/src/modules/experimental/card/card.template.html
+++ /dev/null
@@ -1,203 +0,0 @@
-<tui-doc-page
-    header="Card"
-    package="EXPERIMENTAL"
-    type="components"
->
-    <ng-template pageTab="Medium">
-        <tui-notification status="warning">
-            This code is
-            <strong>experimental</strong>
-            and is a subject to change. Expect final solution to be shipped in the next major version
-        </tui-notification>
-
-        <p>
-            A layout component used to create various cards for the interface. Define visual styles of the cards
-            yourself or combine with
-            <a
-                routerLink="/experimental/surface"
-                tuiLink
-            >
-                Surface
-            </a>
-            for visual presets.
-        </p>
-
-        <tui-doc-example
-            id="avatar"
-            heading="Avatar and text"
-            [content]="example1"
-        >
-            <tui-card-example-1></tui-card-example-1>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="icon"
-            heading="Icon"
-            [content]="example2"
-        >
-            <tui-card-example-2></tui-card-example-2>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="badge"
-            heading="Badge"
-            [content]="example3"
-        >
-            <tui-card-example-3></tui-card-example-3>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="stacking"
-            heading="Stacking"
-            [content]="example4"
-        >
-            <tui-card-example-4></tui-card-example-4>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="customization"
-            heading="Customization"
-            [content]="example5"
-        >
-            <tui-card-example-5></tui-card-example-5>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="long-text"
-            heading="Long text"
-            [content]="example6"
-        >
-            <tui-card-example-6></tui-card-example-6>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="selectable"
-            heading="Selectable"
-            [content]="example7"
-        >
-            <tui-card-example-7></tui-card-example-7>
-        </tui-doc-example>
-    </ng-template>
-
-    <ng-template pageTab="Large">
-        <tui-doc-example
-            id="basic"
-            heading="Basic"
-            [content]="example8"
-        >
-            <tui-card-example-8></tui-card-example-8>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="cell-avatar"
-            heading="Avatar"
-            [content]="example9"
-        >
-            <tui-card-example-9></tui-card-example-9>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="single"
-            heading="Single item"
-            [content]="example10"
-        >
-            <tui-card-example-10></tui-card-example-10>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="cards-list"
-            heading="Cards List"
-            [content]="example11"
-        >
-            <tui-card-example-11></tui-card-example-11>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="cell-list"
-            heading="Cell List"
-            [content]="example12"
-        >
-            <tui-card-example-12></tui-card-example-12>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="cell-list-columns"
-            heading="Cell List (2 columns)"
-            [content]="example13"
-            [fullsize]="true"
-        >
-            <tui-card-example-13></tui-card-example-13>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="cell-list-headless"
-            heading="Cell List (actions)"
-            [content]="example14"
-        >
-            <tui-card-example-14></tui-card-example-14>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="align"
-            heading="Footer alignment"
-            [content]="example15"
-        >
-            <tui-card-example-15></tui-card-example-15>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="map"
-            heading="Map"
-            [content]="example16"
-            [fullsize]="true"
-        >
-            <tui-card-example-16></tui-card-example-16>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="image"
-            heading="Image"
-            [content]="example17"
-        >
-            <tui-card-example-17></tui-card-example-17>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="image-dark"
-            heading="Image-dark"
-            [content]="example18"
-        >
-            <tui-card-example-18></tui-card-example-18>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="paddings"
-            heading="Paddings and radiuses"
-            [content]="example19"
-        >
-            <tui-card-example-19></tui-card-example-19>
-        </tui-doc-example>
-    </ng-template>
-
-    <ng-template pageTab="Setup">
-        <ol class="b-demo-steps">
-            <li>
-                <p>Import module:</p>
-
-                <tui-doc-code
-                    filename="my.module.ts"
-                    [code]="exampleModule"
-                ></tui-doc-code>
-            </li>
-
-            <li>
-                <p>Add to the template:</p>
-
-                <tui-doc-code
-                    filename="my.component.html"
-                    [code]="exampleHtml"
-                ></tui-doc-code>
-            </li>
-        </ol>
-    </ng-template>
-</tui-doc-page>
diff --git a/projects/demo/src/modules/experimental/card/examples/14/index.ts b/projects/demo/src/modules/experimental/card/examples/14/index.ts
deleted file mode 100644
index 9787940ca55c..000000000000
--- a/projects/demo/src/modules/experimental/card/examples/14/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-
-@Component({
-    selector: 'tui-card-example-14',
-    templateUrl: './index.html',
-    styleUrls: ['./index.less'],
-    encapsulation,
-    changeDetection,
-})
-export class TuiCardExample14 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/15/index.ts b/projects/demo/src/modules/experimental/card/examples/15/index.ts
deleted file mode 100644
index 4ab34ce90edc..000000000000
--- a/projects/demo/src/modules/experimental/card/examples/15/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-
-@Component({
-    selector: 'tui-card-example-15',
-    templateUrl: './index.html',
-    styleUrls: ['./index.less'],
-    encapsulation,
-    changeDetection,
-})
-export class TuiCardExample15 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/17/index.ts b/projects/demo/src/modules/experimental/card/examples/17/index.ts
deleted file mode 100644
index 97963906a33d..000000000000
--- a/projects/demo/src/modules/experimental/card/examples/17/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-
-@Component({
-    selector: 'tui-card-example-17',
-    templateUrl: './index.html',
-    styleUrls: ['./index.less'],
-    encapsulation,
-    changeDetection,
-})
-export class TuiCardExample17 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/18/index.ts b/projects/demo/src/modules/experimental/card/examples/18/index.ts
deleted file mode 100644
index 2a9848f6e14a..000000000000
--- a/projects/demo/src/modules/experimental/card/examples/18/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-
-@Component({
-    selector: 'tui-card-example-18',
-    templateUrl: './index.html',
-    styleUrls: ['./index.less'],
-    encapsulation,
-    changeDetection,
-})
-export class TuiCardExample18 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/2/index.ts b/projects/demo/src/modules/experimental/card/examples/2/index.ts
deleted file mode 100644
index fd79fbaf8c27..000000000000
--- a/projects/demo/src/modules/experimental/card/examples/2/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-
-@Component({
-    selector: 'tui-card-example-2',
-    templateUrl: './index.html',
-    styleUrls: ['./index.less'],
-    encapsulation,
-    changeDetection,
-})
-export class TuiCardExample2 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/3/index.ts b/projects/demo/src/modules/experimental/card/examples/3/index.ts
deleted file mode 100644
index bf5182354cc5..000000000000
--- a/projects/demo/src/modules/experimental/card/examples/3/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-
-@Component({
-    selector: 'tui-card-example-3',
-    templateUrl: './index.html',
-    styleUrls: ['./index.less'],
-    encapsulation,
-    changeDetection,
-})
-export class TuiCardExample3 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/5/index.ts b/projects/demo/src/modules/experimental/card/examples/5/index.ts
deleted file mode 100644
index 29fc336578ce..000000000000
--- a/projects/demo/src/modules/experimental/card/examples/5/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-
-@Component({
-    selector: 'tui-card-example-5',
-    templateUrl: './index.html',
-    styleUrls: ['./index.less'],
-    encapsulation,
-    changeDetection,
-})
-export class TuiCardExample5 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/6/index.ts b/projects/demo/src/modules/experimental/card/examples/6/index.ts
deleted file mode 100644
index 9a36002ecf5d..000000000000
--- a/projects/demo/src/modules/experimental/card/examples/6/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-
-@Component({
-    selector: 'tui-card-example-6',
-    templateUrl: './index.html',
-    styleUrls: ['./index.less'],
-    encapsulation,
-    changeDetection,
-})
-export class TuiCardExample6 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/8/index.ts b/projects/demo/src/modules/experimental/card/examples/8/index.ts
deleted file mode 100644
index 3df1d3690d37..000000000000
--- a/projects/demo/src/modules/experimental/card/examples/8/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component} from '@angular/core';
-import {changeDetection} from '@demo/emulate/change-detection';
-import {encapsulation} from '@demo/emulate/encapsulation';
-
-@Component({
-    selector: 'tui-card-example-8',
-    templateUrl: './index.html',
-    styleUrls: ['./index.less'],
-    encapsulation,
-    changeDetection,
-})
-export class TuiCardExample8 {}