diff --git a/projects/addon-mobile/styles/common/card-large.less b/projects/addon-mobile/styles/common/card-large.less
new file mode 100644
index 000000000000..b2acd387e9c7
--- /dev/null
+++ b/projects/addon-mobile/styles/common/card-large.less
@@ -0,0 +1,12 @@
+[tuiCardLarge] {
+    &[data-space='normal'] {
+        --t-padding: 1.25rem;
+        --t-gap: 1.25rem;
+    }
+
+    &[data-space='compact'] {
+        --t-padding: 1rem;
+        --t-gap: 1rem;
+        --t-comp: -0.125rem;
+    }
+}
diff --git a/projects/addon-mobile/styles/taiga-ui-mobile.less b/projects/addon-mobile/styles/taiga-ui-mobile.less
index fbd892f45b59..6722d24e75d3 100644
--- a/projects/addon-mobile/styles/taiga-ui-mobile.less
+++ b/projects/addon-mobile/styles/taiga-ui-mobile.less
@@ -22,4 +22,5 @@
     @import './common/block-status';
     @import './common/button';
     @import './common/title';
+    @import './common/card-large';
 }
diff --git a/projects/core/styles/theme/appearance/outline.less b/projects/core/styles/theme/appearance/outline.less
index f99bebd35ac6..7129fb14fb6e 100644
--- a/projects/core/styles/theme/appearance/outline.less
+++ b/projects/core/styles/theme/appearance/outline.less
@@ -29,6 +29,7 @@
 
     .appearance-hover({
         background: var(--tui-clear);
+        cursor: pointer;
         --t-bs: var(--tui-base-05);
     });
 
diff --git a/projects/demo-playwright/utils/mock-images.ts b/projects/demo-playwright/utils/mock-images.ts
index 413a5f972cbd..e2cd737d7d60 100644
--- a/projects/demo-playwright/utils/mock-images.ts
+++ b/projects/demo-playwright/utils/mock-images.ts
@@ -6,6 +6,7 @@ const DEFAULT_MOCKS = [
             /.*avatar.jpg/,
             /.*avatars.githubusercontent.com.*/,
             /https:\/\/github.com\/.*.png.*/,
+            /https:\/\/yandex.ru\/map-widget.*/,
             /https:\/\/m.media-amazon.com\/.*.jpg.*/,
             /.*bf2e94ae58ee713717faf397958a8e3d.jpg/, // filename - MD5 hash value of file content (waterplea avatar)
         ],
diff --git a/projects/demo/src/assets/images/illustration.jpg b/projects/demo/src/assets/images/illustration.jpg
new file mode 100644
index 000000000000..54b8308c717c
Binary files /dev/null and b/projects/demo/src/assets/images/illustration.jpg differ
diff --git a/projects/demo/src/assets/images/road-illustration.jpg b/projects/demo/src/assets/images/road-illustration.jpg
new file mode 100644
index 000000000000..52762388f02f
Binary files /dev/null and b/projects/demo/src/assets/images/road-illustration.jpg differ
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index 69285b18a2d3..34e16580cb78 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -277,11 +277,21 @@ 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'))
+                .ExampleTuiCardMediumModule,
         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 f332c04e306f..09e37e01b5bf 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -1031,9 +1031,15 @@ export const pages: TuiDocPages = [
     },
     {
         section: 'Experimental',
-        title: 'Card',
-        keywords: 'card, block, карточка, блок',
-        route: '/experimental/card',
+        title: 'CardMedium',
+        keywords: 'card, card-medium, medium, block, карточка, блок',
+        route: '/experimental/card-medium',
+    },
+    {
+        section: 'Experimental',
+        title: 'CardLarge',
+        keywords: 'card, card-large, large, block, карточка, блок',
+        route: '/experimental/card-large',
     },
     {
         section: 'Experimental',
diff --git a/projects/demo/src/modules/experimental/card-large/card-large.component.ts b/projects/demo/src/modules/experimental/card-large/card-large.component.ts
new file mode 100644
index 000000000000..3f5e26530aeb
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/card-large.component.ts
@@ -0,0 +1,73 @@
+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-large.template.html',
+    changeDetection,
+})
+export class ExampleTuiCardLargeComponent {
+    readonly exampleModule: TuiRawLoaderContent = import(
+        './examples/import/import-module.md?raw'
+    );
+
+    readonly exampleHtml: TuiRawLoaderContent = import(
+        './examples/import/insert-template.md?raw'
+    );
+
+    readonly example1: TuiDocExample = {
+        HTML: import('./examples/1/index.html?raw'),
+        LESS: import('./examples/1/index.less?raw'),
+    };
+
+    readonly example2: TuiDocExample = {
+        HTML: import('./examples/2/index.html?raw'),
+    };
+
+    readonly example3: TuiDocExample = {
+        HTML: import('./examples/3/index.html?raw'),
+        LESS: import('./examples/3/index.less?raw'),
+    };
+
+    readonly example4: TuiDocExample = {
+        HTML: import('./examples/4/index.html?raw'),
+        LESS: import('./examples/4/index.less?raw'),
+    };
+
+    readonly example5: TuiDocExample = {
+        HTML: import('./examples/5/index.html?raw'),
+    };
+
+    readonly example6: TuiDocExample = {
+        HTML: import('./examples/6/index.html?raw'),
+        LESS: import('./examples/6/index.less?raw'),
+    };
+
+    readonly example7: TuiDocExample = {
+        HTML: import('./examples/7/index.html?raw'),
+        LESS: import('./examples/7/index.less?raw'),
+    };
+
+    readonly example8: TuiDocExample = {
+        HTML: import('./examples/8/index.html?raw'),
+    };
+
+    readonly example9: TuiDocExample = {
+        HTML: import('./examples/9/index.html?raw'),
+    };
+
+    readonly example10: TuiDocExample = {
+        HTML: import('./examples/10/index.html?raw'),
+        LESS: import('./examples/10/index.less?raw'),
+    };
+
+    readonly example11: TuiDocExample = {
+        HTML: import('./examples/11/index.html?raw'),
+        LESS: import('./examples/11/index.less?raw'),
+    };
+
+    readonly example12: TuiDocExample = {
+        HTML: import('./examples/12/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..bd5c55c40d8a
--- /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 {
+    TuiAppearanceDirective,
+    TuiDataListModule,
+    TuiHintModule,
+    TuiHostedDropdownModule,
+    TuiLinkModule,
+    TuiNotificationModule,
+    TuiScrollbarModule,
+    TuiSvgModule,
+} from '@taiga-ui/core';
+import {
+    TuiAutoColorModule,
+    TuiAvatarModule,
+    TuiAvatarStackModule,
+    TuiButtonCloseModule,
+    TuiButtonModule,
+    TuiCardModule,
+    TuiCellModule,
+    TuiFadeModule,
+    TuiFallbackSrcModule,
+    TuiHeaderDirective,
+    TuiIconModule,
+    TuiInitialsModule,
+    TuiSurfaceModule,
+    TuiThumbnailCardModule,
+    TuiTitleModule,
+} from '@taiga-ui/experimental';
+import {TuiBadgeDirective} from '@taiga-ui/kit';
+
+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,
+        TuiBadgeDirective,
+        TuiTitleModule,
+        TuiAvatarModule,
+        TuiScrollbarModule,
+        TuiHintModule,
+        FormsModule,
+        TuiRippleModule,
+        TuiThumbnailCardModule,
+        TuiIconModule,
+        TuiButtonModule,
+        TuiHeaderDirective,
+        TuiCellModule,
+        tuiGetDocModules(ExampleTuiCardLargeComponent),
+        TuiRepeatTimesModule,
+        TuiDataListModule,
+        TuiHostedDropdownModule,
+        TuiButtonCloseModule,
+        TuiPlatformModule,
+        TuiLinkModule,
+        TuiAppearanceDirective,
+    ],
+    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-large/examples/1/index.html b/projects/demo/src/modules/experimental/card-large/examples/1/index.html
new file mode 100644
index 000000000000..a700adde4bbd
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/1/index.html
@@ -0,0 +1,93 @@
+<div tuiPlatform="web">
+    <h4>Desktop</h4>
+
+    <div
+        tuiCardLarge
+        tuiSurface="elevated"
+    >
+        <header tuiHeader>
+            <h2 tuiTitle>Header</h2>
+        </header>
+
+        <section>Replace me</section>
+
+        <footer>
+            <button
+                appearance="secondary"
+                size="m"
+                tuiButton
+                type="button"
+            >
+                Label
+            </button>
+        </footer>
+    </div>
+
+    <div
+        tuiCardLarge
+        tuiSurface="elevated"
+        class="tui-space_top-4"
+    >
+        <header tuiHeader>
+            <h2 tuiTitle>Header</h2>
+        </header>
+
+        <section>Replace me</section>
+    </div>
+</div>
+
+<div tuiPlatform="ios">
+    <h4>iOS/Android</h4>
+
+    <div
+        tuiCardLarge
+        tuiSurface="elevated"
+    >
+        <header tuiHeader>
+            <h2 tuiTitle>Header</h2>
+
+            <aside tuiAccessories>
+                <a
+                    tuiLink
+                    class="label"
+                >
+                    Label
+                </a>
+            </aside>
+        </header>
+
+        <section>Replace me</section>
+
+        <footer>
+            <button
+                appearance="secondary"
+                size="m"
+                tuiButton
+                type="button"
+            >
+                Label
+            </button>
+        </footer>
+    </div>
+
+    <div
+        tuiCardLarge
+        tuiSurface="elevated"
+        class="tui-space_top-4"
+    >
+        <header tuiHeader>
+            <h2 tuiTitle>Header</h2>
+
+            <aside tuiAccessories>
+                <a
+                    tuiLink
+                    class="label"
+                >
+                    Label
+                </a>
+            </aside>
+        </header>
+
+        <section>Replace me</section>
+    </div>
+</div>
diff --git a/projects/demo/src/modules/experimental/card-large/examples/1/index.less b/projects/demo/src/modules/experimental/card-large/examples/1/index.less
new file mode 100644
index 000000000000..e2346e5335bb
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/1/index.less
@@ -0,0 +1,13 @@
+section {
+    display: flex;
+    height: 3.125rem;
+    border-radius: 0.75rem;
+    justify-content: center;
+    align-items: center;
+    color: var(--tui-base-06);
+    border: 1px dashed var(--tui-base-06);
+}
+
+.label {
+    font: var(--tui-font-text-l);
+}
diff --git a/projects/demo/src/modules/experimental/card/examples/1/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/1/index.ts
rename to projects/demo/src/modules/experimental/card-large/examples/1/index.ts
index 490e91a760f3..485fe5a374c6 100644
--- a/projects/demo/src/modules/experimental/card/examples/1/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-1',
+    selector: 'tui-card-large-example-1',
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiCardExample1 {}
+export class TuiCardLargeExample1 {}
diff --git a/projects/demo/src/modules/experimental/card-large/examples/10/index.html b/projects/demo/src/modules/experimental/card-large/examples/10/index.html
new file mode 100644
index 000000000000..8aff64f0024e
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/10/index.html
@@ -0,0 +1,21 @@
+<div
+    tuiCardLarge
+    tuiHeader
+    tuiSurface="elevated"
+    class="image"
+>
+    <h1 tuiTitle>
+        Title
+        <span tuiSubtitle>Subtitle</span>
+    </h1>
+
+    <aside tuiAccessories>
+        <button
+            appearance="glass"
+            tuiButtonClose
+            tuiIconButton
+        >
+            Close
+        </button>
+    </aside>
+</div>
diff --git a/projects/demo/src/modules/experimental/card-large/examples/10/index.less b/projects/demo/src/modules/experimental/card-large/examples/10/index.less
new file mode 100644
index 000000000000..a3ce92c035a0
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/10/index.less
@@ -0,0 +1,3 @@
+.image {
+    background: url(/assets/images/illustration.jpg) no-repeat top right / 250%;
+}
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-large/examples/11/index.html b/projects/demo/src/modules/experimental/card-large/examples/11/index.html
new file mode 100644
index 000000000000..132a80af4fcd
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/11/index.html
@@ -0,0 +1,25 @@
+<div
+    tuiCardLarge
+    tuiHeader
+    tuiSurface="elevated"
+    tuiTheme="night"
+    class="image"
+>
+    <h1 tuiTitle>
+        Title
+        <span tuiSubtitle>Subtitle</span>
+    </h1>
+
+    <aside
+        tuiAccessories
+        tuiTheme="light"
+    >
+        <button
+            appearance="glass"
+            tuiButtonClose
+            tuiIconButton
+        >
+            Close
+        </button>
+    </aside>
+</div>
diff --git a/projects/demo/src/modules/experimental/card-large/examples/11/index.less b/projects/demo/src/modules/experimental/card-large/examples/11/index.less
new file mode 100644
index 000000000000..ebc56a8e640a
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/11/index.less
@@ -0,0 +1,7 @@
+.image {
+    background: url('/assets/images/road-illustration.jpg') no-repeat center / cover;
+
+    &:before {
+        background: rgba(0, 0, 0, 0.5);
+    }
+}
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-large/examples/12/index.html b/projects/demo/src/modules/experimental/card-large/examples/12/index.html
new file mode 100644
index 000000000000..e8889f447bba
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/12/index.html
@@ -0,0 +1,101 @@
+<div tuiPlatform="web">
+    <h4>Desktop</h4>
+
+    <div
+        tuiCardLarge="normal"
+        tuiSurface="elevated"
+    >
+        <header tuiHeader>
+            <h2 tuiTitle>
+                Normal
+                <span tuiSubtitle>Radius: 24, padding: 24/20</span>
+            </h2>
+        </header>
+
+        <footer>
+            <button
+                appearance="secondary"
+                size="m"
+                tuiButton
+                type="button"
+            >
+                Label
+            </button>
+        </footer>
+    </div>
+
+    <div
+        tuiCardLarge="compact"
+        tuiSurface="elevated"
+        class="tui-space_top-4"
+    >
+        <header tuiHeader>
+            <h2 tuiTitle>
+                Compact
+                <span tuiSubtitle>Radius: 16, padding: 20/16</span>
+            </h2>
+        </header>
+
+        <footer>
+            <button
+                appearance="secondary"
+                size="m"
+                tuiButton
+                type="button"
+            >
+                Label
+            </button>
+        </footer>
+    </div>
+</div>
+
+<div tuiPlatform="ios">
+    <h4>iOS/Android</h4>
+
+    <div
+        tuiCardLarge="normal"
+        tuiSurface="elevated"
+    >
+        <header tuiHeader="xs">
+            <h2 tuiTitle>
+                Normal
+                <span tuiSubtitle>Radius: 24, padding: 20/16</span>
+            </h2>
+        </header>
+
+        <footer>
+            <button
+                appearance="secondary"
+                size="m"
+                tuiButton
+                type="button"
+            >
+                Label
+            </button>
+        </footer>
+    </div>
+
+    <div
+        tuiCardLarge="compact"
+        tuiSurface="elevated"
+        class="tui-space_top-4"
+    >
+        <header tuiHeader="xs">
+            <h2 tuiTitle>
+                Compact
+                <span tuiSubtitle>Radius: 16, padding: 16/14</span>
+            </h2>
+        </header>
+
+        <footer>
+            <button
+                appearance="secondary"
+                size="m"
+                tuiButton
+                type="button"
+            >
+                Label
+            </button>
+        </footer>
+    </div>
+</div>
diff --git a/projects/demo/src/modules/experimental/card-large/examples/12/index.ts b/projects/demo/src/modules/experimental/card-large/examples/12/index.ts
new file mode 100644
index 000000000000..3e93031b74fc
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/12/index.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-large-example-12',
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export class TuiCardLargeExample12 {}
diff --git a/projects/demo/src/modules/experimental/card-large/examples/2/index.html b/projects/demo/src/modules/experimental/card-large/examples/2/index.html
new file mode 100644
index 000000000000..fbab751614b9
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/2/index.html
@@ -0,0 +1,67 @@
+<div tuiPlatform="web">
+    <h4>Desktop</h4>
+
+    <div
+        tuiCardLarge
+        tuiSurface="elevated"
+    >
+        <header tuiHeader>
+            <h1 tuiTitle>
+                Title
+                <span tuiSubtitle>Subtitle</span>
+            </h1>
+
+            <aside tuiAccessories>
+                <tui-avatar
+                    appearance="primary"
+                    src="tuiIconStar"
+                ></tui-avatar>
+            </aside>
+        </header>
+
+        <footer>
+            <button
+                appearance="secondary"
+                size="m"
+                tuiButton
+                type="button"
+            >
+                Label
+            </button>
+        </footer>
+    </div>
+</div>
+
+<div tuiPlatform="ios">
+    <h4>iOS/Android</h4>
+
+    <div
+        tuiCardLarge
+        tuiSurface="elevated"
+    >
+        <div tuiHeader>
+            <h2 tuiTitle>
+                Title
+                <span tuiSubtitle>Subtitle</span>
+            </h2>
+
+            <aside tuiAccessories>
+                <tui-avatar
+                    appearance="primary"
+                    src="tuiIconStar"
+                ></tui-avatar>
+            </aside>
+        </div>
+
+        <footer>
+            <button
+                appearance="secondary"
+                size="m"
+                tuiButton
+                type="button"
+            >
+                Label
+            </button>
+        </footer>
+    </div>
+</div>
diff --git a/projects/demo/src/modules/experimental/card-large/examples/2/index.ts b/projects/demo/src/modules/experimental/card-large/examples/2/index.ts
new file mode 100644
index 000000000000..603118469dac
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/2/index.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-large-example-2',
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export class TuiCardLargeExample2 {}
diff --git a/projects/demo/src/modules/experimental/card-large/examples/3/index.html b/projects/demo/src/modules/experimental/card-large/examples/3/index.html
new file mode 100644
index 000000000000..35a477692918
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/3/index.html
@@ -0,0 +1,64 @@
+<button
+    tuiCardLarge
+    tuiHeader
+    tuiSurface="elevated"
+>
+    <h1 tuiTitle>
+        Title
+        <span tuiSubtitle>Subtitle</span>
+    </h1>
+
+    <aside tuiAccessories>
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconStar"
+        ></tui-avatar>
+    </aside>
+</button>
+
+<button
+    tuiCardLarge
+    tuiCell
+    tuiSurface="elevated"
+>
+    <tui-avatar
+        appearance="primary"
+        src="tuiIconStar"
+    ></tui-avatar>
+    <div tuiTitle>
+        Title
+        <div tuiSubtitle>Description</div>
+    </div>
+</button>
+
+<section class="actions">
+    <button
+        tuiCardLarge
+        tuiHeader
+        tuiSurface="elevated"
+    >
+        <h2 tuiTitle>Title</h2>
+
+        <aside tuiAccessories>
+            <tui-icon
+                icon="tuiIconStar"
+                tuiAppearance="flat"
+            ></tui-icon>
+        </aside>
+    </button>
+
+    <button
+        tuiCardLarge
+        tuiHeader
+        tuiSurface="elevated"
+    >
+        <h2 tuiTitle>Title</h2>
+
+        <aside tuiAccessories>
+            <tui-icon
+                icon="tuiIconStar"
+                tuiAppearance="flat"
+            ></tui-icon>
+        </aside>
+    </button>
+</section>
diff --git a/projects/demo/src/modules/experimental/card-large/examples/3/index.less b/projects/demo/src/modules/experimental/card-large/examples/3/index.less
new file mode 100644
index 000000000000..e13863a293d5
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/3/index.less
@@ -0,0 +1,12 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    width: 20rem;
+}
+
+.actions {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.25rem;
+}
diff --git a/projects/demo/src/modules/experimental/card/examples/5/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/5/index.ts
rename to projects/demo/src/modules/experimental/card-large/examples/3/index.ts
index 29fc336578ce..7aa80ed01374 100644
--- a/projects/demo/src/modules/experimental/card/examples/5/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-5',
+    selector: 'tui-card-large-example-3',
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiCardExample5 {}
+export class TuiCardLargeExample3 {}
diff --git a/projects/demo/src/modules/experimental/card-large/examples/4/index.html b/projects/demo/src/modules/experimental/card-large/examples/4/index.html
new file mode 100644
index 000000000000..bea2b059d2dd
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/4/index.html
@@ -0,0 +1,40 @@
+<div
+    tuiCardLarge
+    tuiSurface="elevated"
+>
+    <header tuiHeader>
+        <h1 tuiTitle>
+            Title
+            <span tuiSubtitle>Subtitle</span>
+        </h1>
+    </header>
+
+    <section>
+        <div
+            *tuiRepeatTimes="let index of 3"
+            tuiCardMedium
+            tuiSurface="flat"
+        >
+            <tui-icon
+                icon="tuiIconPlusSquareLarge"
+                class="plus"
+            ></tui-icon>
+
+            <h2 tuiTitle>
+                Title
+                <span tuiSubtitle>Subtitle</span>
+            </h2>
+        </div>
+    </section>
+
+    <footer>
+        <button
+            appearance="secondary"
+            size="m"
+            tuiButton
+            type="button"
+        >
+            Label
+        </button>
+    </footer>
+</div>
diff --git a/projects/demo/src/modules/experimental/card-large/examples/4/index.less b/projects/demo/src/modules/experimental/card-large/examples/4/index.less
new file mode 100644
index 000000000000..e93f1944fc1c
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/4/index.less
@@ -0,0 +1,13 @@
+section {
+    display: flex;
+    gap: 0.75rem;
+    margin: 0 -1.5rem;
+    padding: 0 1.5rem;
+    overflow: scroll;
+}
+
+.plus {
+    background: var(--tui-primary);
+    border-radius: 0.25rem;
+    color: #fff;
+}
diff --git a/projects/demo/src/modules/experimental/card/examples/2/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/2/index.ts
rename to projects/demo/src/modules/experimental/card-large/examples/4/index.ts
index fd79fbaf8c27..0c6d4e9fa574 100644
--- a/projects/demo/src/modules/experimental/card/examples/2/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-2',
+    selector: 'tui-card-large-example-4',
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiCardExample2 {}
+export class TuiCardLargeExample4 {}
diff --git a/projects/demo/src/modules/experimental/card-large/examples/5/index.html b/projects/demo/src/modules/experimental/card-large/examples/5/index.html
new file mode 100644
index 000000000000..1423a8a200e5
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/5/index.html
@@ -0,0 +1,36 @@
+<div
+    tuiCardLarge
+    tuiSurface="elevated"
+>
+    <header tuiHeader>
+        <h1 tuiTitle>
+            Title
+            <span tuiSubtitle>Subtitle</span>
+        </h1>
+    </header>
+
+    <div
+        *tuiRepeatTimes="let index of 3"
+        tuiCell="l"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconStar"
+        ></tui-avatar>
+        <div tuiTitle>
+            Title
+            <div tuiSubtitle>Description</div>
+        </div>
+    </div>
+
+    <footer>
+        <button
+            appearance="secondary"
+            size="m"
+            tuiButton
+            type="button"
+        >
+            Label
+        </button>
+    </footer>
+</div>
diff --git a/projects/demo/src/modules/experimental/card-large/examples/5/index.ts b/projects/demo/src/modules/experimental/card-large/examples/5/index.ts
new file mode 100644
index 000000000000..9577dbad7e4a
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/5/index.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-large-example-5',
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export class TuiCardLargeExample5 {}
diff --git a/projects/demo/src/modules/experimental/card-large/examples/6/index.html b/projects/demo/src/modules/experimental/card-large/examples/6/index.html
new file mode 100644
index 000000000000..6d57c1917717
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/6/index.html
@@ -0,0 +1,38 @@
+<div
+    tuiCardLarge
+    tuiSurface="elevated"
+>
+    <header tuiHeader>
+        <h1 tuiTitle>
+            Title
+            <span tuiSubtitle>Subtitle</span>
+        </h1>
+    </header>
+
+    <section class="actions">
+        <div
+            *tuiRepeatTimes="let index of 6"
+            tuiCell="l"
+        >
+            <tui-avatar
+                appearance="primary"
+                src="tuiIconStar"
+            ></tui-avatar>
+            <div tuiTitle>
+                Title
+                <div tuiSubtitle>Description</div>
+            </div>
+        </div>
+    </section>
+
+    <footer>
+        <button
+            appearance="secondary"
+            size="m"
+            tuiButton
+            type="button"
+        >
+            Label
+        </button>
+    </footer>
+</div>
diff --git a/projects/demo/src/modules/experimental/card-large/examples/6/index.less b/projects/demo/src/modules/experimental/card-large/examples/6/index.less
new file mode 100644
index 000000000000..294ee2562724
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/6/index.less
@@ -0,0 +1,5 @@
+.actions {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: inherit;
+}
diff --git a/projects/demo/src/modules/experimental/card/examples/3/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/3/index.ts
rename to projects/demo/src/modules/experimental/card-large/examples/6/index.ts
index bf5182354cc5..cfa484cde232 100644
--- a/projects/demo/src/modules/experimental/card/examples/3/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-3',
+    selector: 'tui-card-large-example-6',
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiCardExample3 {}
+export class TuiCardLargeExample6 {}
diff --git a/projects/demo/src/modules/experimental/card-large/examples/7/index.html b/projects/demo/src/modules/experimental/card-large/examples/7/index.html
new file mode 100644
index 000000000000..ddf01b2df22f
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/7/index.html
@@ -0,0 +1,66 @@
+<div
+    tuiCardLarge
+    tuiSurface="elevated"
+>
+    <header tuiHeader>
+        <h1 tuiTitle>
+            Title
+            <span tuiSubtitle>Subtitle</span>
+        </h1>
+    </header>
+
+    <tui-hosted-dropdown
+        *tuiRepeatTimes="let index of 3"
+        tuiDropdownAlign="right"
+        [content]="dropdown"
+        [sided]="true"
+    >
+        <button tuiCell="l">
+            <tui-avatar
+                appearance="primary"
+                src="tuiIconStar"
+            ></tui-avatar>
+
+            <div tuiTitle>
+                Title
+                <div tuiSubtitle>Description</div>
+            </div>
+
+            <tui-icon
+                icon="tuiIconChevronRightLarge"
+                tuiAppearance="icon"
+            ></tui-icon>
+        </button>
+    </tui-hosted-dropdown>
+
+    <button
+        tuiLink
+        type="button"
+    >
+        Show all
+    </button>
+</div>
+
+<ng-template
+    #dropdown
+    let-close="close"
+>
+    <tui-data-list>
+        <tui-opt-group>
+            <button
+                *ngFor="let item of ['Edit', 'Download', 'Rename', 'Delete']"
+                tuiOption
+            >
+                {{ item }}
+            </button>
+        </tui-opt-group>
+        <tui-opt-group>
+            <button
+                tuiOption
+                (click)="close()"
+            >
+                Nevermind
+            </button>
+        </tui-opt-group>
+    </tui-data-list>
+</ng-template>
diff --git a/projects/demo/src/modules/experimental/card-large/examples/7/index.less b/projects/demo/src/modules/experimental/card-large/examples/7/index.less
new file mode 100644
index 000000000000..1fe8c28223af
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/7/index.less
@@ -0,0 +1,4 @@
+.actions {
+    display: flex;
+    flex-direction: column;
+}
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-large/examples/8/index.html b/projects/demo/src/modules/experimental/card-large/examples/8/index.html
new file mode 100644
index 000000000000..da48ec4b2c26
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/8/index.html
@@ -0,0 +1,51 @@
+<div
+    tuiCardLarge
+    tuiSurface="elevated"
+>
+    <header tuiHeader>
+        <h2 tuiTitle>Title</h2>
+    </header>
+
+    <div tuiCell>
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconStar"
+        ></tui-avatar>
+        <div tuiTitle>
+            Title
+            <div tuiSubtitle>Description</div>
+        </div>
+    </div>
+
+    <footer>
+        <button
+            appearance="secondary"
+            size="m"
+            tuiButton
+            type="button"
+        >
+            Label
+        </button>
+    </footer>
+</div>
+<div
+    tuiCardLarge
+    tuiSurface="elevated"
+>
+    <header tuiHeader>
+        <h2 tuiTitle>Title</h2>
+    </header>
+
+    Some text
+
+    <footer>
+        <button
+            appearance="secondary"
+            size="m"
+            tuiButton
+            type="button"
+        >
+            Label
+        </button>
+    </footer>
+</div>
diff --git a/projects/demo/src/modules/experimental/card-large/examples/8/index.less b/projects/demo/src/modules/experimental/card-large/examples/8/index.less
new file mode 100644
index 000000000000..2ea2cb93864c
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/8/index.less
@@ -0,0 +1,6 @@
+:host {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    width: 30rem;
+}
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-large/examples/9/index.html b/projects/demo/src/modules/experimental/card-large/examples/9/index.html
new file mode 100644
index 000000000000..72cf5200e8c3
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/9/index.html
@@ -0,0 +1,33 @@
+<div
+    tuiCardLarge
+    tuiSurface="elevated"
+>
+    <header tuiHeader>
+        <h1 tuiTitle>
+            Title
+            <span tuiSubtitle>Subtitle</span>
+        </h1>
+    </header>
+
+    <section>
+        <iframe
+            height="450"
+            loading="lazy"
+            src="https://yandex.ru/map-widget/v1/?um=constructor%3A0ff7188173ceeea1b3c1d5b2ebeaca63ceb70dc60ebc79513c51bb855356a6ac&amp;source=constructor"
+            title="map"
+            width="100%"
+            class="map"
+        ></iframe>
+    </section>
+
+    <footer>
+        <button
+            appearance="secondary"
+            size="m"
+            tuiButton
+            type="button"
+        >
+            Label
+        </button>
+    </footer>
+</div>
diff --git a/projects/demo/src/modules/experimental/card-large/examples/9/index.ts b/projects/demo/src/modules/experimental/card-large/examples/9/index.ts
new file mode 100644
index 000000000000..b1b1fe0847fa
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-large/examples/9/index.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-large-example-9',
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+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/card.component.ts b/projects/demo/src/modules/experimental/card-medium/card-medium.component.ts
similarity index 95%
rename from projects/demo/src/modules/experimental/card/card.component.ts
rename to projects/demo/src/modules/experimental/card-medium/card-medium.component.ts
index 9cdbd48c8d1f..af0cea5cf190 100644
--- a/projects/demo/src/modules/experimental/card/card.component.ts
+++ b/projects/demo/src/modules/experimental/card-medium/card-medium.component.ts
@@ -4,10 +4,10 @@ import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-card',
-    templateUrl: './card.template.html',
+    templateUrl: './card-medium.template.html',
     changeDetection,
 })
-export class ExampleTuiCardComponent {
+export class ExampleTuiCardMediumComponent {
     readonly exampleModule: TuiRawLoaderContent = import(
         './examples/import/import-module.md?raw'
     );
diff --git a/projects/demo/src/modules/experimental/card-medium/card-medium.module.ts b/projects/demo/src/modules/experimental/card-medium/card-medium.module.ts
new file mode 100644
index 000000000000..eee00bba5d21
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-medium/card-medium.module.ts
@@ -0,0 +1,90 @@
+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 {
+    TuiAppearanceDirective,
+    TuiDataListModule,
+    TuiHintModule,
+    TuiHostedDropdownModule,
+    TuiLinkModule,
+    TuiNotificationModule,
+    TuiScrollbarModule,
+    TuiSvgModule,
+} from '@taiga-ui/core';
+import {
+    TuiAutoColorModule,
+    TuiAvatarModule,
+    TuiAvatarStackModule,
+    TuiButtonCloseModule,
+    TuiButtonModule,
+    TuiCardModule,
+    TuiCellModule,
+    TuiFadeModule,
+    TuiFallbackSrcModule,
+    TuiHeaderDirective,
+    TuiIconModule,
+    TuiInitialsModule,
+    TuiSurfaceModule,
+    TuiThumbnailCardModule,
+    TuiTitleModule,
+} from '@taiga-ui/experimental';
+import {TuiBadgeDirective} from '@taiga-ui/kit';
+
+import {ExampleTuiCardMediumComponent} from './card-medium.component';
+import {TuiCardMediumExample1} from './examples/1';
+import {TuiCardMediumExample2} from './examples/2';
+import {TuiCardMediumExample3} from './examples/3';
+import {TuiCardMediumExample4} from './examples/4';
+import {TuiCardMediumExample5} from './examples/5';
+import {TuiCardMediumExample6} from './examples/6';
+import {TuiCardMediumExample7} from './examples/7';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiAvatarStackModule,
+        TuiAutoColorModule,
+        TuiInitialsModule,
+        TuiNotificationModule,
+        TuiFallbackSrcModule,
+        TuiFadeModule,
+        TuiCardModule,
+        TuiSurfaceModule,
+        TuiSvgModule,
+        TuiBadgeDirective,
+        TuiTitleModule,
+        TuiAvatarModule,
+        TuiScrollbarModule,
+        TuiHintModule,
+        FormsModule,
+        TuiRippleModule,
+        TuiThumbnailCardModule,
+        TuiIconModule,
+        TuiButtonModule,
+        TuiHeaderDirective,
+        TuiCellModule,
+        tuiGetDocModules(ExampleTuiCardMediumComponent),
+        TuiRepeatTimesModule,
+        TuiDataListModule,
+        TuiHostedDropdownModule,
+        TuiButtonCloseModule,
+        TuiPlatformModule,
+        TuiLinkModule,
+        TuiAppearanceDirective,
+    ],
+    declarations: [
+        ExampleTuiCardMediumComponent,
+        TuiCardMediumExample1,
+        TuiCardMediumExample2,
+        TuiCardMediumExample3,
+        TuiCardMediumExample4,
+        TuiCardMediumExample5,
+        TuiCardMediumExample6,
+        TuiCardMediumExample7,
+    ],
+    exports: [ExampleTuiCardMediumComponent],
+})
+export class ExampleTuiCardMediumModule {}
diff --git a/projects/demo/src/modules/experimental/card/card.template.html b/projects/demo/src/modules/experimental/card-medium/card-medium.template.html
similarity index 71%
rename from projects/demo/src/modules/experimental/card/card.template.html
rename to projects/demo/src/modules/experimental/card-medium/card-medium.template.html
index ac6714c7e620..0f28c1734f90 100644
--- a/projects/demo/src/modules/experimental/card/card.template.html
+++ b/projects/demo/src/modules/experimental/card-medium/card-medium.template.html
@@ -3,19 +3,13 @@
     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>
-
+    <ng-template pageTab>
         <tui-doc-example
             id="avatar"
             heading="Avatar and text"
             [content]="example1"
         >
-            <tui-card-example-1></tui-card-example-1>
+            <tui-card-medium-example-1></tui-card-medium-example-1>
         </tui-doc-example>
 
         <tui-doc-example
@@ -23,7 +17,7 @@
             heading="Icon"
             [content]="example2"
         >
-            <tui-card-example-2></tui-card-example-2>
+            <tui-card-medium-example-2></tui-card-medium-example-2>
         </tui-doc-example>
 
         <tui-doc-example
@@ -31,7 +25,7 @@
             heading="Badge"
             [content]="example3"
         >
-            <tui-card-example-3></tui-card-example-3>
+            <tui-card-medium-example-3></tui-card-medium-example-3>
         </tui-doc-example>
 
         <tui-doc-example
@@ -39,16 +33,15 @@
             heading="Stacking"
             [content]="example4"
         >
-            <tui-card-example-4></tui-card-example-4>
+            <tui-card-medium-example-4></tui-card-medium-example-4>
         </tui-doc-example>
 
         <tui-doc-example
             id="customization"
             heading="Customization"
             [content]="example5"
-            [fullsize]="true"
         >
-            <tui-card-example-5></tui-card-example-5>
+            <tui-card-medium-example-5></tui-card-medium-example-5>
         </tui-doc-example>
 
         <tui-doc-example
@@ -56,7 +49,7 @@
             heading="Long text"
             [content]="example6"
         >
-            <tui-card-example-6></tui-card-example-6>
+            <tui-card-medium-example-6></tui-card-medium-example-6>
         </tui-doc-example>
 
         <tui-doc-example
@@ -64,7 +57,7 @@
             heading="Selectable"
             [content]="example7"
         >
-            <tui-card-example-7></tui-card-example-7>
+            <tui-card-medium-example-7></tui-card-medium-example-7>
         </tui-doc-example>
     </ng-template>
 
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 74%
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
index f5ebe33cc50b..c54eaaa5678b 100644
--- a/projects/demo/src/modules/experimental/card/examples/1/index.html
+++ b/projects/demo/src/modules/experimental/card-medium/examples/1/index.html
@@ -1,4 +1,7 @@
-<div tuiCard>
+<div
+    tuiCardMedium
+    tuiSurface="flat"
+>
     <tui-avatar
         src="tuiIconStarLarge"
         class="star"
@@ -10,7 +13,10 @@ <h2 tuiTitle>
     </h2>
 </div>
 
-<div tuiCard>
+<div
+    tuiCardMedium
+    tuiSurface="flat"
+>
     <h2
         tuiTitle
         [style.margin-top]="'auto'"
@@ -20,7 +26,10 @@ <h2 tuiTitle>
     </h2>
 </div>
 
-<div tuiCard>
+<div
+    tuiCardMedium
+    tuiSurface="flat"
+>
     <h2 tuiTitle>
         Title
         <span tuiSubtitle>Subtitle</span>
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 78%
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
index 2973ba7f336d..8a96ad6c3dc4 100644
--- a/projects/demo/src/modules/experimental/card/examples/2/index.html
+++ b/projects/demo/src/modules/experimental/card-medium/examples/2/index.html
@@ -1,4 +1,7 @@
-<div tuiCard>
+<div
+    tuiCardMedium
+    tuiSurface="elevated"
+>
     <tui-icon
         icon="tuiIconPlusSquareLarge"
         class="plus"
@@ -10,7 +13,10 @@ <h2 tuiTitle>
     </h2>
 </div>
 
-<div tuiCard>
+<div
+    tuiCardMedium
+    tuiSurface="elevated"
+>
     <h2 tuiTitle>
         Title
         <span tuiSubtitle>Subtitle</span>
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 83%
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
index b2e9450c93bd..c49710388315 100644
--- a/projects/demo/src/modules/experimental/card/examples/3/index.html
+++ b/projects/demo/src/modules/experimental/card-medium/examples/3/index.html
@@ -1,4 +1,7 @@
-<div tuiCard>
+<div
+    tuiCardMedium
+    tuiSurface="flat"
+>
     <tui-badge
         appearance="custom"
         class="badge"
@@ -13,7 +16,10 @@ <h2 tuiTitle>
     </h2>
 </div>
 
-<div tuiCard>
+<div
+    tuiCardMedium
+    tuiSurface="flat"
+>
     <h2 tuiTitle>
         Title
         <span tuiSubtitle>Subtitle</span>
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 88%
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
index 80edf46d4e3d..8a25550db16b 100644
--- a/projects/demo/src/modules/experimental/card/examples/4/index.html
+++ b/projects/demo/src/modules/experimental/card-medium/examples/4/index.html
@@ -1,4 +1,7 @@
-<div tuiCard>
+<div
+    tuiCardMedium
+    tuiSurface="elevated"
+>
     <tui-avatar-stack direction="left">
         <tui-avatar
             *ngFor="let url of urls"
@@ -15,7 +18,10 @@ <h2 tuiTitle>
     </h2>
 </div>
 
-<div tuiCard>
+<div
+    tuiCardMedium
+    tuiSurface="elevated"
+>
     <h2 tuiTitle>
         Title
         <span tuiSubtitle>Subtitle</span>
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 86%
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..dc08dd24df20 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,13 +3,13 @@ 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,
     changeDetection,
 })
-export class TuiCardExample4 {
+export class TuiCardMediumExample4 {
     readonly urls = [
         'https://avatars.githubusercontent.com/u/11832552',
         'https://avatars.githubusercontent.com/u/10106368',
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 93%
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
index 58088d841886..28763b559b41 100644
--- a/projects/demo/src/modules/experimental/card/examples/5/index.html
+++ b/projects/demo/src/modules/experimental/card-medium/examples/5/index.html
@@ -1,5 +1,5 @@
 <div
-    tuiCard
+    tuiCardMedium
     tuiSurface
     class="poster"
 >
@@ -18,7 +18,7 @@ <h2 tuiTitle>
 </div>
 
 <div
-    tuiCard
+    tuiCardMedium
     tuiSurface
     class="fly"
 >
@@ -34,7 +34,7 @@ <h2 tuiTitle>Flights</h2>
 </div>
 
 <div
-    tuiCard
+    tuiCardMedium
     tuiSurface
     class="google"
 >
@@ -52,7 +52,7 @@ <h2 tuiTitle>
 </div>
 
 <div
-    tuiCard
+    tuiCardMedium
     tuiSurface
     class="microsoft"
 >
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-medium/examples/6/index.html b/projects/demo/src/modules/experimental/card-medium/examples/6/index.html
new file mode 100644
index 000000000000..8030ad639fc3
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card-medium/examples/6/index.html
@@ -0,0 +1,44 @@
+<div
+    tuiCardMedium
+    tuiSurface="flat"
+    tuiTitle
+>
+    <span
+        tuiFade
+        class="fade"
+    >
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    </span>
+
+    <span
+        tuiFade="vertical"
+        tuiSubtitle
+        class="fade-vertical"
+    >
+        It is a long established fact that a reader will be distracted by the readable content of a page when looking at
+        its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
+        opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing
+        packages and web page editors now use Lorem Ipsum as their default model text.
+    </span>
+</div>
+
+<div
+    tuiCardMedium
+    tuiSurface="flat"
+    tuiTitle
+>
+    Text without fade out when overflow content
+
+    <div
+        #text
+        tuiHintDirection="top"
+        tuiSubtitle=""
+        class="nowrap"
+        [tuiHint]="text.innerText"
+    >
+        It is a long established fact that a reader will be distracted by the readable content of a page when looking at
+        its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
+        opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing
+        packages and web page editors now use Lorem Ipsum as their default model text.
+    </div>
+</div>
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 87%
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
index 2cc57e51845a..e252245e982b 100644
--- a/projects/demo/src/modules/experimental/card/examples/6/index.less
+++ b/projects/demo/src/modules/experimental/card-medium/examples/6/index.less
@@ -6,7 +6,6 @@
 }
 
 .fade {
-    .scrollbar-hidden();
     width: 100%;
     height: 2rem;
     white-space: nowrap;
@@ -14,7 +13,6 @@
 }
 
 .fade-vertical {
-    .scrollbar-hidden();
     height: 5rem;
     overflow: auto;
 }
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 71%
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
index 96c8272f7a08..630e9682ab67 100644
--- a/projects/demo/src/modules/experimental/card/examples/7/index.html
+++ b/projects/demo/src/modules/experimental/card-medium/examples/7/index.html
@@ -1,18 +1,13 @@
-<div
-    tuiCard
+<label
+    tuiCardMedium
     tuiSurface
-    class="surface"
+    class="card"
 >
-    <input
-        tuiSurfaceLayer
-        type="radio"
-        class="selected"
-        [value]="0"
-        [(ngModel)]="value"
-    />
     <tui-svg src="tuiIconGooglePay"></tui-svg>
-
-    <div class="card-list">
+    <div
+        tuiFade
+        class="cards"
+    >
         <tui-thumbnail-card
             iconLeft="tuiIconLock"
             paymentSystem="mastercard"
@@ -39,44 +34,50 @@
         </tui-thumbnail-card>
     </div>
 
+    <input
+        tuiSurfaceLayer
+        type="radio"
+        class="selected"
+        [value]="0"
+        [(ngModel)]="value"
+    />
+
     <div
         tuiRipple
         tuiSurfaceLayer
         [style.background-color]="'#fff6c7'"
     ></div>
-</div>
+</label>
 
-<div
-    tuiCard
+<label
+    tuiCardMedium
     tuiSurface
-    class="surface"
+    class="card"
 >
+    <tui-svg src="tuiIconApplePay"></tui-svg>
+    <div
+        tuiFade
+        class="cards"
+    >
+        <tui-thumbnail-card
+            paymentSystem="mir"
+            size="m"
+            class="mir"
+        >
+            2222
+        </tui-thumbnail-card>
+    </div>
+
     <input
         tuiSurfaceLayer
         type="radio"
-        class="selected"
         [value]="1"
         [(ngModel)]="value"
     />
-    <tui-svg src="tuiIconApplePay"></tui-svg>
-    <tui-scrollbar>
-        <div
-            tuiScrollable
-            class="card-list"
-        >
-            <tui-thumbnail-card
-                paymentSystem="mir"
-                size="m"
-                class="mir"
-            >
-                2222
-            </tui-thumbnail-card>
-        </div>
-    </tui-scrollbar>
 
     <div
         tuiRipple
         tuiSurfaceLayer
         [style.background-color]="'#d5f6df'"
     ></div>
-</div>
+</label>
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 52%
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
index 57c9b8a4fe8a..2281d1fdc1f3 100644
--- a/projects/demo/src/modules/experimental/card/examples/7/index.less
+++ b/projects/demo/src/modules/experimental/card-medium/examples/7/index.less
@@ -5,17 +5,9 @@
     gap: 1rem;
 }
 
-.surface {
+.card {
     height: 6.5rem;
     width: 6.5rem;
-    padding: 0.75rem;
-    background: var(--tui-base-02);
-    cursor: pointer;
-}
-
-.selected {
-    z-index: 1;
-    color: var(--tui-primary);
 }
 
 .mir {
@@ -26,19 +18,12 @@
     background: linear-gradient(45deg, #ffaa00d1, #ffaa00), url(/assets/taiga-ui/icons/tuiIconStarLarge.svg);
 }
 
-.card-list {
-    .scrollbar-hidden();
+.cards {
     display: flex;
     flex-direction: row;
     gap: 0.25rem;
-    width: 100%;
-    overflow-x: scroll;
-    overflow-y: hidden;
-    margin-left: -0.4375rem;
-    padding-left: 0.4375rem;
-    z-index: 2;
-
-    tui-thumbnail-card {
-        flex-shrink: 0;
-    }
+    width: stretch;
+    margin: 0 -0.4375rem;
+    padding: 0 0.4375rem;
+    overflow: auto;
 }
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 89%
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 25593713373a..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,5 @@
 ```html
-<div tuiCard>
+<div tuiCardMedium>
   <tui-avatar
     class="star"
     src="tuiIconStarLarge"
diff --git a/projects/demo/src/modules/experimental/card/card.module.ts b/projects/demo/src/modules/experimental/card/card.module.ts
deleted file mode 100644
index cfd9854b228c..000000000000
--- a/projects/demo/src/modules/experimental/card/card.module.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-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 {
-    TuiHintModule,
-    TuiNotificationModule,
-    TuiScrollbarModule,
-    TuiSvgModule,
-} from '@taiga-ui/core';
-import {
-    TuiAutoColorModule,
-    TuiAvatarModule,
-    TuiAvatarStackModule,
-    TuiCardModule,
-    TuiFadeModule,
-    TuiFallbackSrcModule,
-    TuiIconModule,
-    TuiInitialsModule,
-    TuiSurfaceModule,
-    TuiThumbnailCardModule,
-    TuiTitleModule,
-} from '@taiga-ui/experimental';
-import {TuiBadgeDirective} from '@taiga-ui/kit';
-
-import {ExampleTuiCardComponent} from './card.component';
-import {TuiCardExample1} from './examples/1';
-import {TuiCardExample2} from './examples/2';
-import {TuiCardExample3} from './examples/3';
-import {TuiCardExample4} from './examples/4';
-import {TuiCardExample5} from './examples/5';
-import {TuiCardExample6} from './examples/6';
-import {TuiCardExample7} from './examples/7';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TuiAvatarStackModule,
-        TuiAutoColorModule,
-        TuiInitialsModule,
-        TuiNotificationModule,
-        TuiFallbackSrcModule,
-        TuiFadeModule,
-        TuiCardModule,
-        TuiSurfaceModule,
-        TuiSvgModule,
-        TuiBadgeDirective,
-        TuiTitleModule,
-        TuiAvatarModule,
-        TuiScrollbarModule,
-        TuiHintModule,
-        FormsModule,
-        TuiRippleModule,
-        TuiThumbnailCardModule,
-        tuiGetDocModules(ExampleTuiCardComponent),
-        TuiIconModule,
-    ],
-    declarations: [
-        ExampleTuiCardComponent,
-        TuiCardExample1,
-        TuiCardExample2,
-        TuiCardExample3,
-        TuiCardExample4,
-        TuiCardExample5,
-        TuiCardExample6,
-        TuiCardExample7,
-    ],
-    exports: [ExampleTuiCardComponent],
-})
-export class ExampleTuiCardModule {}
diff --git a/projects/demo/src/modules/experimental/card/examples/6/index.html b/projects/demo/src/modules/experimental/card/examples/6/index.html
deleted file mode 100644
index e6fd9331b63a..000000000000
--- a/projects/demo/src/modules/experimental/card/examples/6/index.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div tuiCard>
-    <h2 tuiTitle>
-        <tui-scrollbar [hidden]="true">
-            <b
-                tuiFade
-                tuiScrollable
-                class="fade"
-            >
-                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-            </b>
-        </tui-scrollbar>
-
-        <span tuiSubtitle>
-            <tui-scrollbar>
-                <span
-                    tuiFade="vertical"
-                    tuiScrollable
-                    class="fade-vertical"
-                >
-                    It is a long established fact that a reader will be distracted by the readable content of a page
-                    when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
-                    distribution of letters, as opposed to using 'Content here, content here', making it look like
-                    readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their
-                    default model text.
-                </span>
-            </tui-scrollbar>
-        </span>
-    </h2>
-</div>
-
-<div tuiCard>
-    <h2 tuiTitle>Text without fade out when overflow content</h2>
-
-    <div
-        #text
-        tuiHintDirection="top"
-        class="nowrap"
-        [tuiHint]="tooltip"
-    >
-        It is a long established fact that a reader will be distracted by the readable content of a page when looking at
-        its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
-        opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing
-        packages and web page editors now use Lorem Ipsum as their default model text.
-    </div>
-    <ng-template #tooltip>{{ text.innerText }}</ng-template>
-</div>
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/cell/cell.module.ts b/projects/demo/src/modules/experimental/cell/cell.module.ts
index c69e9f1c2b97..a180b41e31f0 100644
--- a/projects/demo/src/modules/experimental/cell/cell.module.ts
+++ b/projects/demo/src/modules/experimental/cell/cell.module.ts
@@ -17,6 +17,7 @@ import {
     TuiAvatarStackModule,
     TuiBadgeNotificationModule,
     TuiButtonModule,
+    TuiCardModule,
     TuiCellModule,
     TuiCheckboxModule,
     TuiFadeModule,
@@ -74,6 +75,7 @@ import {TuiCellExample7} from './examples/7';
         TuiButtonModule,
         TuiHostedDropdownModule,
         TuiGroupModule,
+        TuiCardModule,
         tuiGetDocModules(ExampleTuiCellComponent),
     ],
     declarations: [
diff --git a/projects/demo/src/modules/experimental/cell/examples/7/index.html b/projects/demo/src/modules/experimental/cell/examples/7/index.html
index 2ccbebcccdcc..4786c7447e44 100644
--- a/projects/demo/src/modules/experimental/cell/examples/7/index.html
+++ b/projects/demo/src/modules/experimental/cell/examples/7/index.html
@@ -1,21 +1,26 @@
-<div tuiSurface="elevated">
+<tui-notification>
+    Don't forget import
+    <code>TuiCardModule</code>
+</tui-notification>
+
+<div
+    tuiCardLarge
+    tuiSurface="elevated"
+>
     <h3 tuiTitle="m">Inside a block</h3>
-    <div class="actions">
-        <button
-            *ngFor="let item of items"
-            tuiCell
-            class="action"
-        >
-            <tui-avatar
-                appearance="accent"
-                [src]="item.icon"
-            ></tui-avatar>
-            <span tuiTitle>
-                {{ item.title }}
-                <span tuiSubtitle>{{ item.subtitle }}</span>
-            </span>
-        </button>
-    </div>
+    <button
+        *ngFor="let item of items"
+        tuiCell
+    >
+        <tui-avatar
+            appearance="accent"
+            [src]="item.icon"
+        ></tui-avatar>
+        <span tuiTitle>
+            {{ item.title }}
+            <span tuiSubtitle>{{ item.subtitle }}</span>
+        </span>
+    </button>
 </div>
 
 <label tuiLabel="Inside a dropdown">
diff --git a/projects/demo/src/modules/experimental/cell/examples/7/index.less b/projects/demo/src/modules/experimental/cell/examples/7/index.less
index 3b7d879d2e89..4d422fdd3078 100644
--- a/projects/demo/src/modules/experimental/cell/examples/7/index.less
+++ b/projects/demo/src/modules/experimental/cell/examples/7/index.less
@@ -4,16 +4,3 @@
     max-width: 20rem;
     gap: 1rem;
 }
-
-.actions {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-    margin: 1rem -0.5rem -0.5rem;
-}
-
-.action {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    border-radius: 0.75rem;
-}
diff --git a/projects/demo/src/modules/experimental/surface/examples/1/base.less b/projects/demo/src/modules/experimental/surface/examples/1/base.less
index 3d14b1f31145..edb78291a157 100644
--- a/projects/demo/src/modules/experimental/surface/examples/1/base.less
+++ b/projects/demo/src/modules/experimental/surface/examples/1/base.less
@@ -12,8 +12,7 @@
     }
 }
 
-.highlight {
-    background: var(--tui-primary);
-    box-shadow: none;
-    color: var(--tui-primary-text);
+[tuiSurface] {
+    padding: 1.25rem;
+    border-radius: var(--tui-radius-l);
 }
diff --git a/projects/demo/src/modules/experimental/surface/examples/1/index.html b/projects/demo/src/modules/experimental/surface/examples/1/index.html
index 0bb4487a36a1..49a01f7ec1ac 100644
--- a/projects/demo/src/modules/experimental/surface/examples/1/index.html
+++ b/projects/demo/src/modules/experimental/surface/examples/1/index.html
@@ -11,6 +11,7 @@
     Overlay
 </button>
 <button
+    tuiAppearance="primary"
     tuiSurface
     class="highlight"
 >
diff --git a/projects/demo/src/modules/experimental/surface/examples/2/index.less b/projects/demo/src/modules/experimental/surface/examples/2/index.less
index 149b14b3d18e..1c9efb4ee432 100644
--- a/projects/demo/src/modules/experimental/surface/examples/2/index.less
+++ b/projects/demo/src/modules/experimental/surface/examples/2/index.less
@@ -3,3 +3,8 @@
     grid-template-columns: repeat(3, 8rem);
     gap: 1rem;
 }
+
+[tuiSurface] {
+    padding: 1.25rem;
+    border-radius: var(--tui-radius-l);
+}
diff --git a/projects/demo/src/modules/experimental/surface/examples/4/index.html b/projects/demo/src/modules/experimental/surface/examples/4/index.html
index 07a5469e0335..0757d44b6fb7 100644
--- a/projects/demo/src/modules/experimental/surface/examples/4/index.html
+++ b/projects/demo/src/modules/experimental/surface/examples/4/index.html
@@ -14,5 +14,7 @@
             type="video/mp4"
         />
     </video>
-    <b>Big Buck Bunny</b>
+    <p>
+        <b>Big Buck Bunny</b>
+    </p>
 </div>
diff --git a/projects/demo/src/modules/experimental/surface/examples/5/index.html b/projects/demo/src/modules/experimental/surface/examples/5/index.html
index 4243d64a6d07..b6a70c46eb57 100644
--- a/projects/demo/src/modules/experimental/surface/examples/5/index.html
+++ b/projects/demo/src/modules/experimental/surface/examples/5/index.html
@@ -1,6 +1,8 @@
 <label
     *tuiRepeatTimes="let index of 4"
     tuiSurface
+    [style.border-radius.rem]="0.75"
+    [style.padding.rem]="1.25"
 >
     Item {{ index + 1 }}
     <input
diff --git a/projects/demo/src/modules/experimental/surface/surface.module.ts b/projects/demo/src/modules/experimental/surface/surface.module.ts
index 7968e2b2117d..469952875ea4 100644
--- a/projects/demo/src/modules/experimental/surface/surface.module.ts
+++ b/projects/demo/src/modules/experimental/surface/surface.module.ts
@@ -6,6 +6,7 @@ import {tuiGetDocModules} from '@taiga-ui/addon-doc';
 import {TuiRippleModule} from '@taiga-ui/addon-mobile';
 import {TuiRepeatTimesModule} from '@taiga-ui/cdk';
 import {
+    TuiAppearanceDirective,
     TuiLabelModule,
     TuiLinkModule,
     TuiModeModule,
@@ -42,6 +43,7 @@ import {ExampleTuiSurfaceComponent} from './surface.component';
         TuiMoneyModule,
         TuiThumbnailCardModule,
         tuiGetDocModules(ExampleTuiSurfaceComponent),
+        TuiAppearanceDirective,
     ],
     declarations: [
         ExampleTuiSurfaceComponent,
diff --git a/projects/demo/src/modules/experimental/surface/surface.template.html b/projects/demo/src/modules/experimental/surface/surface.template.html
index 8a9c8b47b746..ec8316ac2ebf 100644
--- a/projects/demo/src/modules/experimental/surface/surface.template.html
+++ b/projects/demo/src/modules/experimental/surface/surface.template.html
@@ -10,7 +10,16 @@
             and is a subject to change. Expect final solution to be shipped in the next major version
         </tui-notification>
 
-        <p>General purpose container used in Taiga UI interfaces</p>
+        <p>
+            General purpose container used in Taiga UI interfaces. Often used in conjunction with
+            <a
+                routerLink="/experimental/card"
+                tuiLink
+            >
+                Card
+            </a>
+            component.
+        </p>
 
         <tui-doc-example
             id="behaviors"
@@ -31,6 +40,20 @@
             heading="Presets"
             [content]="example2"
         >
+            <tui-notification class="tui-space_bottom-4">
+                Note that
+                <code>padding</code>
+                and
+                <code>border-radius</code>
+                are not part of the surface. Take a look at
+                <a
+                    routerLink="/experimental/card"
+                    tuiLink
+                >
+                    Card
+                </a>
+                component for that.
+            </tui-notification>
             <tui-surface-example-2></tui-surface-example-2>
         </tui-doc-example>
 
@@ -45,7 +68,7 @@
             >
                 Text should have vertical compensation to look properly aligned, either with unequal
                 <code>padding</code>
-                as in this example or with negative
+                or with negative
                 <code>margin</code>
                 . Typical value is
                 <strong>0.25rem</strong>
diff --git a/projects/experimental/components/chip/chip.style.less b/projects/experimental/components/chip/chip.style.less
index 6449fd7c040e..4417ede287ef 100644
--- a/projects/experimental/components/chip/chip.style.less
+++ b/projects/experimental/components/chip/chip.style.less
@@ -11,6 +11,7 @@ tui-chip,
     border-radius: var(--tui-radius-m);
     padding: var(--t-padding);
     height: var(--t-size);
+    width: fit-content;
 
     .interactive({
         cursor: pointer;
diff --git a/projects/experimental/components/thumbnail-card/thumbnail-card.style.less b/projects/experimental/components/thumbnail-card/thumbnail-card.style.less
index 0e6b5c10991a..2a5e0175793e 100644
--- a/projects/experimental/components/thumbnail-card/thumbnail-card.style.less
+++ b/projects/experimental/components/thumbnail-card/thumbnail-card.style.less
@@ -3,6 +3,7 @@
 :host {
     position: relative;
     display: inline-flex;
+    flex-shrink: 0;
     background: #000;
     color: #fff;
     transform-style: preserve-3d;
diff --git a/projects/experimental/directives/card/card.directive.ts b/projects/experimental/directives/card/card.directive.ts
index 6505dd6a536f..3f73412febd2 100644
--- a/projects/experimental/directives/card/card.directive.ts
+++ b/projects/experimental/directives/card/card.directive.ts
@@ -1,19 +1,32 @@
 import {Directive, Inject, Input} from '@angular/core';
 import {TuiDirectiveStylesService} from '@taiga-ui/cdk';
-import {TuiSizeL} from '@taiga-ui/core';
 
 import {TuiCardComponent} from './card.component';
 
 @Directive({
-    selector: '[tuiCard]',
+    selector: '[tuiCardMedium]',
     host: {
-        tuiCard: '',
-        '[attr.data-size]': 'size || "m"',
+        tuiCardMedium: '',
     },
 })
-export class TuiCardDirective {
-    @Input('tuiCard')
-    size: TuiSizeL | '' = 'm';
+export class TuiCardMediumDirective {
+    constructor(
+        @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService,
+    ) {
+        directiveStyles.addComponent(TuiCardComponent);
+    }
+}
+
+@Directive({
+    selector: '[tuiCardLarge]',
+    host: {
+        tuiCardLarge: '',
+        '[attr.data-space]': 'space || "normal"',
+    },
+})
+export class TuiCardLargeDirective {
+    @Input('tuiCardLarge')
+    space: '' | 'compact' | 'normal' = 'normal';
 
     constructor(
         @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService,
diff --git a/projects/experimental/directives/card/card.module.ts b/projects/experimental/directives/card/card.module.ts
index 4431b105f669..7c0b922e123c 100644
--- a/projects/experimental/directives/card/card.module.ts
+++ b/projects/experimental/directives/card/card.module.ts
@@ -1,10 +1,10 @@
 import {NgModule} from '@angular/core';
 
 import {TuiCardComponent} from './card.component';
-import {TuiCardDirective} from './card.directive';
+import {TuiCardLargeDirective, TuiCardMediumDirective} from './card.directive';
 
 @NgModule({
-    declarations: [TuiCardComponent, TuiCardDirective],
-    exports: [TuiCardDirective],
+    declarations: [TuiCardComponent, TuiCardLargeDirective, TuiCardMediumDirective],
+    exports: [TuiCardLargeDirective, TuiCardMediumDirective],
 })
 export class TuiCardModule {}
diff --git a/projects/experimental/directives/card/card.styles.less b/projects/experimental/directives/card/card.styles.less
index 65570ffe5320..60fea1764283 100644
--- a/projects/experimental/directives/card/card.styles.less
+++ b/projects/experimental/directives/card/card.styles.less
@@ -1,34 +1,113 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
-[tuiCard] {
+[tuiCardMedium],
+[tuiCardLarge] {
     .clearbtn();
+
+    position: relative;
     display: flex;
     align-items: flex-start;
+    flex-shrink: 0;
+    text-decoration: none;
+    overscroll-behavior: contain;
+
+    &[tuiTitle],
+    [tuiTitle] {
+        font-weight: bold;
+    }
+
+    [tuiTitle],
+    [tuiSubtitle] {
+        max-width: 100%;
+    }
+
+    > * {
+        .scrollbar-hidden();
+    }
+}
+
+[tuiCardMedium] {
+    width: 8.75rem;
+    height: 8.75rem;
+    flex-direction: column;
     justify-content: space-between;
-    background: var(--tui-base-02);
-    border-radius: 0.75rem;
-    box-sizing: border-box;
     padding: 0.75rem;
-    gap: 0.75rem;
-    flex-direction: column;
-    text-decoration: none;
-    width: var(--t-size);
-    height: var(--t-size);
+    border-radius: var(--tui-radius-l);
+    box-sizing: border-box;
 
-    &[data-size='m'] {
-        --t-size: 8.75rem;
+    &[tuiTitle] {
+        padding: 0.625rem 0.75rem;
     }
 
     [tuiTitle] {
-        font-weight: bold;
+        margin: -0.125rem 0;
     }
 
     [tuiSubtitle] {
         color: var(--tui-text-01);
     }
+}
 
-    [tuiTitle],
-    [tuiSubtitle] {
-        max-width: 100%;
+[tuiCardLarge][data-space] {
+    --t-gap: 0.75rem;
+    --t-radius: var(--tui-radius-l);
+    --t-comp: -0.25rem;
+    --t-padding: 0.75rem;
+    --t-dim: calc(var(--t-padding) + var(--t-comp));
+
+    font: var(--tui-font-text-m);
+    padding: var(--t-padding);
+    border-radius: var(--t-radius);
+    box-sizing: border-box;
+
+    &[data-space='normal'] {
+        --t-radius: 1.5rem;
+        --t-padding: 1.5rem;
+        --t-gap: 1.5rem;
+    }
+
+    &[data-space='compact'] {
+        --t-radius: 1rem;
+        --t-padding: 1.25rem;
+        --t-gap: 1.25rem;
+    }
+
+    &:not([tuiCell], [tuiHeader]) {
+        flex-direction: column;
+        gap: var(--t-gap);
+        align-items: stretch;
+
+        > :last-child:not([tuiCell]) {
+            margin-top: auto;
+        }
+    }
+
+    &[tuiHeader] {
+        padding: var(--t-dim) var(--t-dim) var(--t-dim) var(--t-padding);
+
+        [tuiLink]:last-child {
+            margin-right: calc(-1 * var(--t-comp));
+        }
+    }
+
+    > [tuiHeader] {
+        margin: var(--t-comp) var(--t-comp) calc(1.5 * var(--t-comp)) 0;
+
+        [tuiLink]:last-child {
+            margin-right: calc(-1 * var(--t-comp));
+        }
+    }
+
+    [tuiCell] {
+        width: stretch;
+        padding: 0.5rem;
+        margin: -0.5rem -0.5rem -0.75rem;
+        border-radius: var(--tui-radius-l);
+    }
+
+    > [tuiLink]:last-child {
+        display: block;
+        width: fit-content;
+        margin-bottom: var(--t-comp);
     }
 }
diff --git a/projects/experimental/directives/cell/cell.styles.less b/projects/experimental/directives/cell/cell.styles.less
index cfd3807b6547..6fd59c87d815 100644
--- a/projects/experimental/directives/cell/cell.styles.less
+++ b/projects/experimental/directives/cell/cell.styles.less
@@ -4,7 +4,6 @@
     --tui-height: calc(var(--tui-height-s) - 0.5rem);
     --t-padding: 0.125rem 1rem;
 
-    .transition(background);
     .clearbtn();
     position: relative;
     display: flex;
@@ -159,8 +158,8 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-    a[tuiCell]:hover,
-    button[tuiCell]:hover {
+    a[tuiCell]:not([tuiSurface]):hover,
+    button[tuiCell]:not([tuiSurface]):hover {
         background: var(--tui-clear);
         cursor: pointer;
     }
diff --git a/projects/experimental/directives/surface/surface.style.less b/projects/experimental/directives/surface/surface.style.less
index 9a41aa196e7d..57bec957df3a 100644
--- a/projects/experimental/directives/surface/surface.style.less
+++ b/projects/experimental/directives/surface/surface.style.less
@@ -2,20 +2,26 @@
 
 // prettier-ignore
 [data-surface] {
-    .clearbtn();
     .transition();
 
     --tui-gap: 0.25rem;
     position: relative;
-    border-radius: var(--tui-radius-l);
     box-sizing: border-box;
-    padding: 1.25rem;
+    background: none;
     background-size: cover;
     background-repeat: no-repeat;
     overflow: hidden;
     isolation: isolate;
-    outline-color: var(--tui-focus);
-    transition-property: backdrop-filter, background, border-radius, box-shadow, mask, transform;
+    appearance: none;
+    border: 0;
+    font-size: inherit;
+    line-height: inherit;
+    text-decoration: none;
+    transition-property: backdrop-filter, background, border-radius, box-shadow, mask, transform !important;
+
+    &:focus-visible {
+        outline-color: var(--tui-focus);
+    }
 
     // Fix for https://bugs.chromium.org/p/chromium/issues/detail?id=1486408
     @supports (not (-moz-appearance: none)) and (not (-webkit-hyphens: none)) {
@@ -123,7 +129,6 @@ input[tuiSurfaceLayer] {
 
 [data-surface='elevated'] {
     box-shadow: var(--tui-shadow);
-    border-radius: var(--tui-radius-xl);
     background: var(--tui-elevation-01);
 }
 
@@ -138,12 +143,12 @@ a[data-surface='elevated'] {
         &:hover {
             box-shadow: var(--tui-shadow-hover);
             transform: translate3d(0, -0.25rem, 0);
+            background: var(--tui-elevation-01);
         }
     }
 }
 
 [data-surface='flat'] {
-    border-radius: var(--tui-radius-xl);
     background: var(--tui-clear);
 }
 
diff --git a/projects/kit/components/badge/badge.style.less b/projects/kit/components/badge/badge.style.less
index baaff73f18b0..78771a261aa9 100644
--- a/projects/kit/components/badge/badge.style.less
+++ b/projects/kit/components/badge/badge.style.less
@@ -13,6 +13,7 @@ tui-badge,
     padding: var(--t-padding);
     height: var(--t-size);
     min-width: var(--t-size);
+    width: fit-content;
     font: var(--tui-font-text-s);
 
     &._dot:before {