diff --git a/projects/addon-mobile/styles/common/card-large.less b/projects/addon-mobile/styles/common/card-large.less
index 34a672f59b690..b2acd387e9c7f 100644
--- a/projects/addon-mobile/styles/common/card-large.less
+++ b/projects/addon-mobile/styles/common/card-large.less
@@ -1,13 +1,12 @@
-[tuiCard='l'] {
-    &[data-size='l'] {
-        &[data-space='normal'] {
-            padding: 1.25rem;
-            gap: 1.25rem;
-        }
+[tuiCardLarge] {
+    &[data-space='normal'] {
+        --t-padding: 1.25rem;
+        --t-gap: 1.25rem;
+    }
 
-        &[data-space='compact'] {
-            padding: 1rem;
-            gap: 1rem;
-        }
+    &[data-space='compact'] {
+        --t-padding: 1rem;
+        --t-gap: 1rem;
+        --t-comp: -0.125rem;
     }
 }
diff --git a/projects/core/styles/theme/appearance/outline.less b/projects/core/styles/theme/appearance/outline.less
index 395f44c7fa147..8052809093541 100644
--- a/projects/core/styles/theme/appearance/outline.less
+++ b/projects/core/styles/theme/appearance/outline.less
@@ -9,6 +9,7 @@
     .appearance-hover({
         background: var(--tui-clear);
         box-shadow: inset 0 0 0 1px var(--tui-base-05);
+        cursor: pointer;
     });
 
     .appearance-active({
diff --git a/projects/demo/src/modules/experimental/card/card.module.ts b/projects/demo/src/modules/experimental/card/card.module.ts
index a3a5f20b25871..a017c3f4a337e 100644
--- a/projects/demo/src/modules/experimental/card/card.module.ts
+++ b/projects/demo/src/modules/experimental/card/card.module.ts
@@ -14,6 +14,7 @@ import {
     TuiSvgModule,
 } from '@taiga-ui/core';
 import {
+    TuiAppearanceModule,
     TuiAutoColorModule,
     TuiAvatarModule,
     TuiAvatarStackModule,
@@ -31,7 +32,6 @@ import {
     TuiThumbnailCardModule,
     TuiTitleModule,
 } from '@taiga-ui/experimental';
-import {TuiProgressModule} from '@taiga-ui/kit';
 
 import {ExampleTuiCardComponent} from './card.component';
 import {TuiCardExample1} from './examples/1';
@@ -82,10 +82,10 @@ import {TuiCardExample19} from './examples/19';
         TuiRepeatTimesModule,
         TuiDataListModule,
         TuiHostedDropdownModule,
-        TuiProgressModule,
         TuiButtonCloseModule,
         TuiPlatformModule,
         TuiLinkModule,
+        TuiAppearanceModule,
     ],
     declarations: [
         ExampleTuiCardComponent,
diff --git a/projects/demo/src/modules/experimental/card/card.template.html b/projects/demo/src/modules/experimental/card/card.template.html
index 0bc306bc42e0e..f5fa6125ecb6a 100644
--- a/projects/demo/src/modules/experimental/card/card.template.html
+++ b/projects/demo/src/modules/experimental/card/card.template.html
@@ -10,6 +10,18 @@
             and is a subject to change. Expect final solution to be shipped in the next major version
         </tui-notification>
 
+        <p>
+            A layout component used to create various cards for the interface. Define visual styles of the cards
+            yourself or combine with
+            <a
+                routerLink="/experimental/surface"
+                tuiLink
+            >
+                Surface
+            </a>
+            for visual presets.
+        </p>
+
         <tui-doc-example
             id="avatar"
             heading="Avatar and text"
@@ -85,8 +97,8 @@
         </tui-doc-example>
 
         <tui-doc-example
-            id="cell"
-            heading="Cell"
+            id="single"
+            heading="Single item"
             [content]="example10"
         >
             <tui-card-example-10></tui-card-example-10>
@@ -119,15 +131,15 @@
 
         <tui-doc-example
             id="cell-list-headless"
-            heading="Cell List (headless)"
+            heading="Cell List (actions)"
             [content]="example14"
         >
             <tui-card-example-14></tui-card-example-14>
         </tui-doc-example>
 
         <tui-doc-example
-            id="progress"
-            heading="Progress"
+            id="align"
+            heading="Footer alignment"
             [content]="example15"
         >
             <tui-card-example-15></tui-card-example-15>
diff --git a/projects/demo/src/modules/experimental/card/examples/1/index.html b/projects/demo/src/modules/experimental/card/examples/1/index.html
index f5ebe33cc50bf..c54eaaa5678b6 100644
--- a/projects/demo/src/modules/experimental/card/examples/1/index.html
+++ b/projects/demo/src/modules/experimental/card/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/10/index.html b/projects/demo/src/modules/experimental/card/examples/10/index.html
index 4cffc1243342e..35a4776929184 100644
--- a/projects/demo/src/modules/experimental/card/examples/10/index.html
+++ b/projects/demo/src/modules/experimental/card/examples/10/index.html
@@ -1,74 +1,64 @@
 <button
-    tuiCard="l"
-    tuiCell
+    tuiCardLarge
+    tuiHeader
     tuiSurface="elevated"
 >
-    <header tuiHeader>
-        <h1 tuiTitle>
-            Title
-            <span tuiSubtitle>Subtitle</span>
-        </h1>
+    <h1 tuiTitle>
+        Title
+        <span tuiSubtitle>Subtitle</span>
+    </h1>
 
-        <aside tuiAccessories>
-            <tui-avatar
-                appearance="primary"
-                src="tuiIconStar"
-            ></tui-avatar>
-        </aside>
-    </header>
+    <aside tuiAccessories>
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconStar"
+        ></tui-avatar>
+    </aside>
 </button>
 
 <button
-    tuiCard="l"
+    tuiCardLarge
     tuiCell
     tuiSurface="elevated"
 >
-    <section tuiCell>
-        <tui-avatar
-            appearance="primary"
-            src="tuiIconStar"
-        ></tui-avatar>
-        <div tuiTitle>
-            Title
-            <div tuiSubtitle>Description</div>
-        </div>
-    </section>
+    <tui-avatar
+        appearance="primary"
+        src="tuiIconStar"
+    ></tui-avatar>
+    <div tuiTitle>
+        Title
+        <div tuiSubtitle>Description</div>
+    </div>
 </button>
 
 <section class="actions">
     <button
-        tuiCard="l"
-        tuiCell
+        tuiCardLarge
+        tuiHeader
         tuiSurface="elevated"
     >
-        <header tuiHeader>
-            <h2 tuiTitle>Title</h2>
+        <h2 tuiTitle>Title</h2>
 
-            <aside tuiAccessories>
-                <tui-avatar
-                    appearance="primary"
-                    size="xxs"
-                    src="tuiIconStar"
-                ></tui-avatar>
-            </aside>
-        </header>
+        <aside tuiAccessories>
+            <tui-icon
+                icon="tuiIconStar"
+                tuiAppearance="flat"
+            ></tui-icon>
+        </aside>
     </button>
 
     <button
-        tuiCard="l"
-        tuiCell
+        tuiCardLarge
+        tuiHeader
         tuiSurface="elevated"
     >
-        <header tuiHeader>
-            <h2 tuiTitle>Title</h2>
+        <h2 tuiTitle>Title</h2>
 
-            <aside tuiAccessories>
-                <tui-avatar
-                    appearance="primary"
-                    size="xxs"
-                    src="tuiIconStar"
-                ></tui-avatar>
-            </aside>
-        </header>
+        <aside tuiAccessories>
+            <tui-icon
+                icon="tuiIconStar"
+                tuiAppearance="flat"
+            ></tui-icon>
+        </aside>
     </button>
 </section>
diff --git a/projects/demo/src/modules/experimental/card/examples/10/index.less b/projects/demo/src/modules/experimental/card/examples/10/index.less
index 728927259d172..e13863a293d55 100644
--- a/projects/demo/src/modules/experimental/card/examples/10/index.less
+++ b/projects/demo/src/modules/experimental/card/examples/10/index.less
@@ -2,18 +2,11 @@
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
-
-    [tuiCard][data-size='l'] {
-        padding: 1rem 1.5rem;
-    }
+    width: 20rem;
 }
 
 .actions {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     gap: 1.25rem;
-
-    button {
-        flex: 1;
-        height: 3.75rem;
-    }
 }
diff --git a/projects/demo/src/modules/experimental/card/examples/11/index.html b/projects/demo/src/modules/experimental/card/examples/11/index.html
index e32f80a517c24..bea2b059d2dd5 100644
--- a/projects/demo/src/modules/experimental/card/examples/11/index.html
+++ b/projects/demo/src/modules/experimental/card/examples/11/index.html
@@ -1,5 +1,5 @@
 <div
-    tuiCard="l"
+    tuiCardLarge
     tuiSurface="elevated"
 >
     <header tuiHeader>
@@ -11,8 +11,9 @@ <h1 tuiTitle>
 
     <section>
         <div
-            *tuiRepeatTimes="let index of 4"
-            tuiCard
+            *tuiRepeatTimes="let index of 3"
+            tuiCardMedium
+            tuiSurface="flat"
         >
             <tui-icon
                 icon="tuiIconPlusSquareLarge"
diff --git a/projects/demo/src/modules/experimental/card/examples/12/index.html b/projects/demo/src/modules/experimental/card/examples/12/index.html
index def7cb61d29c7..1423a8a200e5a 100644
--- a/projects/demo/src/modules/experimental/card/examples/12/index.html
+++ b/projects/demo/src/modules/experimental/card/examples/12/index.html
@@ -1,5 +1,5 @@
 <div
-    tuiCard="l"
+    tuiCardLarge
     tuiSurface="elevated"
 >
     <header tuiHeader>
@@ -9,21 +9,19 @@ <h1 tuiTitle>
         </h1>
     </header>
 
-    <section>
-        <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
+        *tuiRepeatTimes="let index of 3"
+        tuiCell="l"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconStar"
+        ></tui-avatar>
+        <div tuiTitle>
+            Title
+            <div tuiSubtitle>Description</div>
         </div>
-    </section>
+    </div>
 
     <footer>
         <button
diff --git a/projects/demo/src/modules/experimental/card/examples/13/index.html b/projects/demo/src/modules/experimental/card/examples/13/index.html
index e07c3cc151576..6d57c19177179 100644
--- a/projects/demo/src/modules/experimental/card/examples/13/index.html
+++ b/projects/demo/src/modules/experimental/card/examples/13/index.html
@@ -1,5 +1,5 @@
 <div
-    tuiCard="l"
+    tuiCardLarge
     tuiSurface="elevated"
 >
     <header tuiHeader>
@@ -9,38 +9,20 @@ <h1 tuiTitle>
         </h1>
     </header>
 
-    <section>
-        <aside>
-            <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>
-        </aside>
-
-        <aside>
-            <div
-                *tuiRepeatTimes="let index of 6"
-                tuiCell="l"
-            >
-                <tui-avatar
-                    appearance="primary"
-                    src="tuiIconStar"
-                ></tui-avatar>
-                <div tuiTitle>
-                    Title
-                    <div tuiSubtitle>Description</div>
-                </div>
+    <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>
-        </aside>
+        </div>
     </section>
 
     <footer>
diff --git a/projects/demo/src/modules/experimental/card/examples/13/index.less b/projects/demo/src/modules/experimental/card/examples/13/index.less
index 2c7a3b16833c4..294ee2562724c 100644
--- a/projects/demo/src/modules/experimental/card/examples/13/index.less
+++ b/projects/demo/src/modules/experimental/card/examples/13/index.less
@@ -1,8 +1,5 @@
-section {
-    display: flex;
-    gap: 1.5rem;
-}
-
-aside {
-    flex: 1;
+.actions {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: inherit;
 }
diff --git a/projects/demo/src/modules/experimental/card/examples/14/index.html b/projects/demo/src/modules/experimental/card/examples/14/index.html
index b84a0a642ff56..ddf01b2df22f6 100644
--- a/projects/demo/src/modules/experimental/card/examples/14/index.html
+++ b/projects/demo/src/modules/experimental/card/examples/14/index.html
@@ -1,5 +1,5 @@
 <div
-    tuiCard="l"
+    tuiCardLarge
     tuiSurface="elevated"
 >
     <header tuiHeader>
@@ -9,43 +9,36 @@ <h1 tuiTitle>
         </h1>
     </header>
 
-    <section class="actions">
-        <tui-hosted-dropdown
-            *tuiRepeatTimes="let index of 6"
-            tuiDropdownAlign="right"
-            [content]="dropdown"
-            [sided]="true"
-        >
-            <button
-                tuiCell="l"
-                class="action"
-            >
-                <tui-avatar
-                    appearance="primary"
-                    src="tuiIconStar"
-                ></tui-avatar>
-                <div tuiTitle>
-                    Title
-                    <div tuiSubtitle>Description</div>
-                </div>
+    <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 tuiSubtitle>
-                    <tui-icon icon="tuiIconChevronRightLarge"></tui-icon>
-                </div>
-            </button>
-        </tui-hosted-dropdown>
-    </section>
+            <div tuiTitle>
+                Title
+                <div tuiSubtitle>Description</div>
+            </div>
 
-    <footer>
-        <button
-            appearance="secondary"
-            size="m"
-            tuiButton
-            type="button"
-        >
-            Label
+            <tui-icon
+                icon="tuiIconChevronRightLarge"
+                tuiAppearance="icon"
+            ></tui-icon>
         </button>
-    </footer>
+    </tui-hosted-dropdown>
+
+    <button
+        tuiLink
+        type="button"
+    >
+        Show all
+    </button>
 </div>
 
 <ng-template
diff --git a/projects/demo/src/modules/experimental/card/examples/14/index.less b/projects/demo/src/modules/experimental/card/examples/14/index.less
index 44dba3b7f21e2..1fe8c28223aff 100644
--- a/projects/demo/src/modules/experimental/card/examples/14/index.less
+++ b/projects/demo/src/modules/experimental/card/examples/14/index.less
@@ -2,10 +2,3 @@
     display: flex;
     flex-direction: column;
 }
-
-.action {
-    width: 100%;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    border-radius: 0.75rem;
-}
diff --git a/projects/demo/src/modules/experimental/card/examples/15/index.html b/projects/demo/src/modules/experimental/card/examples/15/index.html
index 9795a553578bc..da48ec4b2c26e 100644
--- a/projects/demo/src/modules/experimental/card/examples/15/index.html
+++ b/projects/demo/src/modules/experimental/card/examples/15/index.html
@@ -1,23 +1,42 @@
 <div
-    tuiCard="l"
+    tuiCardLarge
     tuiSurface="elevated"
 >
     <header tuiHeader>
-        <h1 tuiTitle>
-            Title
-            <span tuiSubtitle>Subtitle</span>
-        </h1>
+        <h2 tuiTitle>Title</h2>
     </header>
 
-    <section>
-        <progress
-            max="100"
-            new
+    <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"
-            tuiProgressBar
-            [value]="65"
-        ></progress>
-    </section>
+            tuiButton
+            type="button"
+        >
+            Label
+        </button>
+    </footer>
+</div>
+<div
+    tuiCardLarge
+    tuiSurface="elevated"
+>
+    <header tuiHeader>
+        <h2 tuiTitle>Title</h2>
+    </header>
+
+    Some text
 
     <footer>
         <button
diff --git a/projects/demo/src/modules/experimental/card/examples/15/index.less b/projects/demo/src/modules/experimental/card/examples/15/index.less
new file mode 100644
index 0000000000000..2ea2cb93864c0
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/15/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/examples/15/index.ts b/projects/demo/src/modules/experimental/card/examples/15/index.ts
index fb6d05cd62390..4ab34ce90edcc 100644
--- a/projects/demo/src/modules/experimental/card/examples/15/index.ts
+++ b/projects/demo/src/modules/experimental/card/examples/15/index.ts
@@ -5,6 +5,7 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 @Component({
     selector: 'tui-card-example-15',
     templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
diff --git a/projects/demo/src/modules/experimental/card/examples/16/index.html b/projects/demo/src/modules/experimental/card/examples/16/index.html
index 2968bcc285fa4..72cf5200e8c3d 100644
--- a/projects/demo/src/modules/experimental/card/examples/16/index.html
+++ b/projects/demo/src/modules/experimental/card/examples/16/index.html
@@ -1,5 +1,5 @@
 <div
-    tuiCard="l"
+    tuiCardLarge
     tuiSurface="elevated"
 >
     <header tuiHeader>
diff --git a/projects/demo/src/modules/experimental/card/examples/17/index.html b/projects/demo/src/modules/experimental/card/examples/17/index.html
index acc5fe7916ea1..8aff64f0024e3 100644
--- a/projects/demo/src/modules/experimental/card/examples/17/index.html
+++ b/projects/demo/src/modules/experimental/card/examples/17/index.html
@@ -1,25 +1,21 @@
 <div
-    tuiCard="l"
+    tuiCardLarge
+    tuiHeader
     tuiSurface="elevated"
     class="image"
 >
-    <header
-        tuiHeader
-        tuiTheme="night"
-    >
-        <h1 tuiTitle>
-            Title
-            <span tuiSubtitle>Subtitle</span>
-        </h1>
+    <h1 tuiTitle>
+        Title
+        <span tuiSubtitle>Subtitle</span>
+    </h1>
 
-        <aside tuiAccessories>
-            <button
-                appearance="glass"
-                tuiButtonClose
-                tuiIconButton
-            >
-                Close
-            </button>
-        </aside>
-    </header>
+    <aside tuiAccessories>
+        <button
+            appearance="glass"
+            tuiButtonClose
+            tuiIconButton
+        >
+            Close
+        </button>
+    </aside>
 </div>
diff --git a/projects/demo/src/modules/experimental/card/examples/17/index.less b/projects/demo/src/modules/experimental/card/examples/17/index.less
index 4c2ab50c5a424..a3ce92c035a07 100644
--- a/projects/demo/src/modules/experimental/card/examples/17/index.less
+++ b/projects/demo/src/modules/experimental/card/examples/17/index.less
@@ -1,4 +1,3 @@
 .image {
-    background: url('/assets/images/illustration.jpg') no-repeat;
-    background-size: cover;
+    background: url(/assets/images/illustration.jpg) no-repeat top right / 250%;
 }
diff --git a/projects/demo/src/modules/experimental/card/examples/18/index.html b/projects/demo/src/modules/experimental/card/examples/18/index.html
index 5ec4a97c204a0..132a80af4fcda 100644
--- a/projects/demo/src/modules/experimental/card/examples/18/index.html
+++ b/projects/demo/src/modules/experimental/card/examples/18/index.html
@@ -1,28 +1,25 @@
 <div
-    tuiCard="l"
+    tuiCardLarge
+    tuiHeader
     tuiSurface="elevated"
-    class="image-dark"
+    tuiTheme="night"
+    class="image"
 >
-    <header
-        tuiHeader
-        tuiTheme="night"
-    >
-        <h1 tuiTitle>
-            Title
-            <span tuiSubtitle>Subtitle</span>
-        </h1>
+    <h1 tuiTitle>
+        Title
+        <span tuiSubtitle>Subtitle</span>
+    </h1>
 
-        <aside
-            tuiAccessories
-            tuiTheme="light"
+    <aside
+        tuiAccessories
+        tuiTheme="light"
+    >
+        <button
+            appearance="glass"
+            tuiButtonClose
+            tuiIconButton
         >
-            <button
-                appearance="glass"
-                tuiButtonClose
-                tuiIconButton
-            >
-                Close
-            </button>
-        </aside>
-    </header>
+            Close
+        </button>
+    </aside>
 </div>
diff --git a/projects/demo/src/modules/experimental/card/examples/18/index.less b/projects/demo/src/modules/experimental/card/examples/18/index.less
index 35f64bafedafb..ebc56a8e640a8 100644
--- a/projects/demo/src/modules/experimental/card/examples/18/index.less
+++ b/projects/demo/src/modules/experimental/card/examples/18/index.less
@@ -1,6 +1,5 @@
-.image-dark {
-    background: url('/assets/images/road-illustration.jpg') no-repeat center;
-    background-size: cover;
+.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/examples/19/index.html b/projects/demo/src/modules/experimental/card/examples/19/index.html
index a7173cae35738..e8889f447bba6 100644
--- a/projects/demo/src/modules/experimental/card/examples/19/index.html
+++ b/projects/demo/src/modules/experimental/card/examples/19/index.html
@@ -2,11 +2,10 @@
     <h4>Desktop</h4>
 
     <div
-        space="normal"
-        tuiCard="l"
+        tuiCardLarge="normal"
         tuiSurface="elevated"
     >
-        <header tuiHeader="s">
+        <header tuiHeader>
             <h2 tuiTitle>
                 Normal
                 <span tuiSubtitle>Radius: 24, padding: 24/20</span>
@@ -26,12 +25,11 @@ <h2 tuiTitle>
     </div>
 
     <div
-        space="compact"
-        tuiCard="l"
+        tuiCardLarge="compact"
         tuiSurface="elevated"
         class="tui-space_top-4"
     >
-        <header tuiHeader="s">
+        <header tuiHeader>
             <h2 tuiTitle>
                 Compact
                 <span tuiSubtitle>Radius: 16, padding: 20/16</span>
@@ -55,11 +53,10 @@ <h2 tuiTitle>
     <h4>iOS/Android</h4>
 
     <div
-        space="normal"
-        tuiCard="l"
+        tuiCardLarge="normal"
         tuiSurface="elevated"
     >
-        <header tuiHeader="s">
+        <header tuiHeader="xs">
             <h2 tuiTitle>
                 Normal
                 <span tuiSubtitle>Radius: 24, padding: 20/16</span>
@@ -79,12 +76,11 @@ <h2 tuiTitle>
     </div>
 
     <div
-        space="compact"
-        tuiCard="l"
+        tuiCardLarge="compact"
         tuiSurface="elevated"
         class="tui-space_top-4"
     >
-        <header tuiHeader="s">
+        <header tuiHeader="xs">
             <h2 tuiTitle>
                 Compact
                 <span tuiSubtitle>Radius: 16, padding: 16/14</span>
diff --git a/projects/demo/src/modules/experimental/card/examples/2/index.html b/projects/demo/src/modules/experimental/card/examples/2/index.html
index 2973ba7f336da..8a96ad6c3dc42 100644
--- a/projects/demo/src/modules/experimental/card/examples/2/index.html
+++ b/projects/demo/src/modules/experimental/card/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/3/index.html b/projects/demo/src/modules/experimental/card/examples/3/index.html
index b2e9450c93bdb..c497103883156 100644
--- a/projects/demo/src/modules/experimental/card/examples/3/index.html
+++ b/projects/demo/src/modules/experimental/card/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/4/index.html b/projects/demo/src/modules/experimental/card/examples/4/index.html
index 80edf46d4e3dc..8a25550db16b6 100644
--- a/projects/demo/src/modules/experimental/card/examples/4/index.html
+++ b/projects/demo/src/modules/experimental/card/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/5/index.html b/projects/demo/src/modules/experimental/card/examples/5/index.html
index 58088d8418863..28763b559b418 100644
--- a/projects/demo/src/modules/experimental/card/examples/5/index.html
+++ b/projects/demo/src/modules/experimental/card/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/examples/5/index.less
index 659262ce86738..994070ff005da 100644
--- a/projects/demo/src/modules/experimental/card/examples/5/index.less
+++ b/projects/demo/src/modules/experimental/card/examples/5/index.less
@@ -9,12 +9,12 @@
     color: #333;
 }
 
-.money[tuiSurface] {
+.money {
     background: #ffdd2d;
     color: #333;
 }
 
-.poster[tuiSurface] {
+.poster {
     background: rgb(88, 192, 190);
     padding: 0.75rem;
     color: #fff;
@@ -34,7 +34,7 @@
     }
 }
 
-.fly[tuiSurface] {
+.fly {
     background: rgb(101, 174, 234);
     padding: 0.75rem;
     color: #fff;
@@ -50,8 +50,8 @@
     }
 }
 
-.google[tuiSurface],
-.microsoft[tuiSurface] {
+.google,
+.microsoft {
     padding: 0.75rem;
     background: var(--tui-base-02);
     height: 8rem;
@@ -62,7 +62,7 @@
     }
 }
 
-.google[tuiSurface] {
+.google {
     [tuiSubtitle] {
         color: red;
     }
@@ -72,7 +72,7 @@
     }
 }
 
-.microsoft[tuiSurface] {
+.microsoft {
     [tuiSubtitle] {
         color: #00b92d;
     }
diff --git a/projects/demo/src/modules/experimental/card/examples/6/index.html b/projects/demo/src/modules/experimental/card/examples/6/index.html
index e6fd9331b63ae..8030ad639fc31 100644
--- a/projects/demo/src/modules/experimental/card/examples/6/index.html
+++ b/projects/demo/src/modules/experimental/card/examples/6/index.html
@@ -1,46 +1,44 @@
-<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>
+<div
+    tuiCardMedium
+    tuiSurface="flat"
+    tuiTitle
+>
+    <span
+        tuiFade
+        class="fade"
+    >
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    </span>
 
-        <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>
+    <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 tuiCard>
-    <h2 tuiTitle>Text without fade out when overflow content</h2>
+<div
+    tuiCardMedium
+    tuiSurface="flat"
+    tuiTitle
+>
+    Text without fade out when overflow content
 
     <div
         #text
         tuiHintDirection="top"
+        tuiSubtitle=""
         class="nowrap"
-        [tuiHint]="tooltip"
+        [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>
-    <ng-template #tooltip>{{ text.innerText }}</ng-template>
 </div>
diff --git a/projects/demo/src/modules/experimental/card/examples/6/index.less b/projects/demo/src/modules/experimental/card/examples/6/index.less
index 2cc57e51845ad..e252245e982bf 100644
--- a/projects/demo/src/modules/experimental/card/examples/6/index.less
+++ b/projects/demo/src/modules/experimental/card/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/examples/7/index.html b/projects/demo/src/modules/experimental/card/examples/7/index.html
index 96c8272f7a08e..630e9682ab679 100644
--- a/projects/demo/src/modules/experimental/card/examples/7/index.html
+++ b/projects/demo/src/modules/experimental/card/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/examples/7/index.less
index 1b720d2235e64..2281d1fdc1f3a 100644
--- a/projects/demo/src/modules/experimental/card/examples/7/index.less
+++ b/projects/demo/src/modules/experimental/card/examples/7/index.less
@@ -5,17 +5,9 @@
     gap: 1rem;
 }
 
-.surface[tuiSurface] {
+.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/8/index.html b/projects/demo/src/modules/experimental/card/examples/8/index.html
index 28db44b053ca1..a700adde4bbd4 100644
--- a/projects/demo/src/modules/experimental/card/examples/8/index.html
+++ b/projects/demo/src/modules/experimental/card/examples/8/index.html
@@ -2,7 +2,7 @@
     <h4>Desktop</h4>
 
     <div
-        tuiCard="l"
+        tuiCardLarge
         tuiSurface="elevated"
     >
         <header tuiHeader>
@@ -24,7 +24,7 @@ <h2 tuiTitle>Header</h2>
     </div>
 
     <div
-        tuiCard="l"
+        tuiCardLarge
         tuiSurface="elevated"
         class="tui-space_top-4"
     >
@@ -40,7 +40,7 @@ <h2 tuiTitle>Header</h2>
     <h4>iOS/Android</h4>
 
     <div
-        tuiCard="l"
+        tuiCardLarge
         tuiSurface="elevated"
     >
         <header tuiHeader>
@@ -71,7 +71,7 @@ <h2 tuiTitle>Header</h2>
     </div>
 
     <div
-        tuiCard="l"
+        tuiCardLarge
         tuiSurface="elevated"
         class="tui-space_top-4"
     >
diff --git a/projects/demo/src/modules/experimental/card/examples/9/index.html b/projects/demo/src/modules/experimental/card/examples/9/index.html
index 5d684fc6b0634..fbab751614b9d 100644
--- a/projects/demo/src/modules/experimental/card/examples/9/index.html
+++ b/projects/demo/src/modules/experimental/card/examples/9/index.html
@@ -2,7 +2,7 @@
     <h4>Desktop</h4>
 
     <div
-        tuiCard="l"
+        tuiCardLarge
         tuiSurface="elevated"
     >
         <header tuiHeader>
@@ -36,7 +36,7 @@ <h1 tuiTitle>
     <h4>iOS/Android</h4>
 
     <div
-        tuiCard="l"
+        tuiCardLarge
         tuiSurface="elevated"
     >
         <div tuiHeader>
diff --git a/projects/demo/src/modules/experimental/card/examples/import/insert-template.md b/projects/demo/src/modules/experimental/card/examples/import/insert-template.md
index 2334deb74f1ff..e1f776077d081 100644
--- a/projects/demo/src/modules/experimental/card/examples/import/insert-template.md
+++ b/projects/demo/src/modules/experimental/card/examples/import/insert-template.md
@@ -1,6 +1,6 @@
 ```html
 <!-- Medium -->
-<div tuiCard>
+<div tuiCardMedium>
   <tui-avatar
     class="star"
     src="tuiIconStarLarge"
@@ -14,7 +14,7 @@
 
 <!-- Large -->
 <div
-  tuiCard="l"
+  tuiCardLarge
   tuiSurface="elevated"
 >
   <div tuiHeader>
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 3d14b1f311452..edb78291a157d 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 0bb4487a36a12..49a01f7ec1ac9 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 149b14b3d18e3..1c9efb4ee432c 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 07a5469e03359..0757d44b6fb79 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 4243d64a6d075..b6a70c46eb57c 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 605e38fac96a4..e7a7cf28cba34 100644
--- a/projects/demo/src/modules/experimental/surface/surface.module.ts
+++ b/projects/demo/src/modules/experimental/surface/surface.module.ts
@@ -13,6 +13,7 @@ import {
     TuiScrollbarModule,
 } from '@taiga-ui/core';
 import {
+    TuiAppearanceModule,
     TuiAvatarModule,
     TuiBadgeModule,
     TuiButtonModule,
@@ -46,6 +47,7 @@ import {ExampleTuiSurfaceComponent} from './surface.component';
         TuiMoneyModule,
         TuiThumbnailCardModule,
         tuiGetDocModules(ExampleTuiSurfaceComponent),
+        TuiAppearanceModule,
     ],
     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 8a9c8b47b746e..ec8316ac2ebf1 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/badge/badge.style.less b/projects/experimental/components/badge/badge.style.less
index 945484ccebbed..3882d2b1e766e 100644
--- a/projects/experimental/components/badge/badge.style.less
+++ b/projects/experimental/components/badge/badge.style.less
@@ -13,6 +13,7 @@
     padding: var(--t-padding);
     height: var(--t-size);
     min-width: var(--t-size);
+    width: fit-content;
     font: var(--tui-font-text-s);
 
     &._dot:before {
diff --git a/projects/experimental/components/chip/chip.style.less b/projects/experimental/components/chip/chip.style.less
index 6449fd7c040e9..4417ede287ef3 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 0e6b5c10991a3..2a5e0175793e1 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 5ad734b5d6127..3f73412febd2f 100644
--- a/projects/experimental/directives/card/card.directive.ts
+++ b/projects/experimental/directives/card/card.directive.ts
@@ -1,23 +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"',
-        '[attr.data-space]': 'space',
+        tuiCardMedium: '',
     },
 })
-export class TuiCardDirective {
-    @Input('tuiCard')
-    size: TuiSizeL | '' = 'm';
+export class TuiCardMediumDirective {
+    constructor(
+        @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService,
+    ) {
+        directiveStyles.addComponent(TuiCardComponent);
+    }
+}
 
-    @Input()
-    space: 'compact' | 'normal' = 'normal';
+@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 4431b105f6691..7c0b922e123c4 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 8c8fbdc2fb0dd..09783bb4dbe15 100644
--- a/projects/experimental/directives/card/card.styles.less
+++ b/projects/experimental/directives/card/card.styles.less
@@ -1,73 +1,109 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
-[tuiCard] {
+[tuiCardMedium],
+[tuiCardLarge] {
     .clearbtn();
+
     position: relative;
     display: flex;
     align-items: flex-start;
-    justify-content: space-between;
-    background: var(--tui-base-02);
-    border-radius: 0.75rem;
-    box-sizing: border-box;
-    padding: 0.75rem;
-    gap: 0.75rem;
     flex-shrink: 0;
-    flex-direction: column;
     text-decoration: none;
-    width: var(--t-size);
-    height: var(--t-size);
     overscroll-behavior: contain;
 
-    &,
-    & > * {
-        .scrollbar-hidden();
+    &[tuiTitle],
+    [tuiTitle] {
+        font-weight: bold;
+    }
+
+    [tuiTitle],
+    [tuiSubtitle] {
+        max-width: 100%;
     }
 
-    &[data-size='m'] {
-        --t-size: 8.75rem;
+    > * {
+        .scrollbar-hidden();
     }
+}
 
-    [tuiTitle] {
-        font-weight: bold;
+[tuiCardMedium] {
+    width: 8.75rem;
+    height: 8.75rem;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 0.75rem;
+    border-radius: var(--tui-radius-l);
+    box-sizing: border-box;
+
+    &[tuiTitle] {
+        padding: 0.625rem 0.75rem;
     }
 
-    &[tuiCell] {
-        box-sizing: border-box;
+    [tuiTitle] {
+        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-size='l'] {
-        --t-size: 100%;
-        height: auto;
-        font-size: 1rem;
+    &[data-space='compact'] {
+        --t-radius: 1rem;
+        --t-padding: 1.25rem;
+        --t-gap: 1.25rem;
+    }
 
-        & > * {
-            width: 100%;
-        }
+    &:not([tuiCell], [tuiHeader]) {
+        flex-direction: column;
+        gap: var(--t-gap);
+        align-items: stretch;
 
-        [tuiCell] {
-            padding: 0.5rem;
-            margin: 0 -0.5rem;
+        > :last-child {
+            margin-top: auto;
         }
+    }
 
-        &[data-space='normal'] {
-            border-radius: 1.5rem;
-            padding: 1.5rem;
-            gap: 1.5rem;
-        }
+    &[tuiHeader] {
+        padding: var(--t-dim) var(--t-dim) var(--t-dim) var(--t-padding);
+    }
 
-        &[data-space='compact'] {
-            border-radius: 1rem;
-            padding: 1.25rem;
-            gap: 1.25rem;
+    [tuiCell] {
+        width: 100%;
+        padding: 0.5rem;
+        margin: -0.5rem -0.5rem -0.75rem;
+        border-radius: var(--tui-radius-l);
+    }
+
+    > [tuiHeader] {
+        margin: var(--t-comp) var(--t-comp) calc(1.5 * var(--t-comp)) 0;
+
+        [tuiLink] {
+            margin-right: calc(-1 * var(--t-comp));
         }
     }
+
+    > [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 798d26b050c20..1135a0726f59f 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;
@@ -155,8 +154,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 9e87e7fe5dd64..57bec957df3a0 100644
--- a/projects/experimental/directives/surface/surface.style.less
+++ b/projects/experimental/directives/surface/surface.style.less
@@ -1,21 +1,27 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
 // prettier-ignore
-[tuiSurface][data-surface] {
-    .clearbtn();
+[data-surface] {
     .transition();
 
     --tui-gap: 0.25rem;
     position: relative;
-    border-radius: var(--tui-radius-l);
     box-sizing: border-box;
-    padding: 1rem 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)) {
@@ -25,14 +31,14 @@
     }
 }
 
-button[tuiSurface][data-surface] {
+button[data-surface] {
     cursor: pointer;
 }
 
-[tuiSurface][data-surface]:before,
-[tuiSurface][data-surface]:after,
-[tuiSurface][tuiSurfaceLayer]:before,
-[tuiSurface][tuiSurfaceLayer]:after {
+[data-surface]:before,
+[data-surface]:after,
+[tuiSurfaceLayer]:before,
+[tuiSurfaceLayer]:after {
     .fullsize();
     .transition();
     content: '';
@@ -106,13 +112,13 @@ input[tuiSurfaceLayer] {
     }
 
     @media (hover: hover) and (pointer: fine) {
-        [tuiSurface][data-surface]:hover & {
+        [data-surface]:hover & {
             box-shadow:
                 inset 0 0,
                 inset 0 0 0 calc(var(--tui-gap) / 2) var(--tui-base-03);
         }
 
-        [tuiSurface][data-surface]:hover &:checked {
+        [data-surface]:hover &:checked {
             filter: brightness(0.9);
             box-shadow:
                 inset 0 0 0 calc(var(--tui-gap) / 2),
@@ -121,14 +127,13 @@ input[tuiSurfaceLayer] {
     }
 }
 
-[tuiSurface][data-surface='elevated'] {
+[data-surface='elevated'] {
     box-shadow: var(--tui-shadow);
-    border-radius: var(--tui-radius-xl);
     background: var(--tui-elevation-01);
 }
 
-button[tuiSurface][data-surface='elevated'],
-a[tuiSurface][data-surface='elevated'] {
+button[data-surface='elevated'],
+a[data-surface='elevated'] {
     &:active {
         box-shadow: var(--tui-shadow);
         transform: scale(0.95);
@@ -143,13 +148,12 @@ a[tuiSurface][data-surface='elevated'] {
     }
 }
 
-[tuiSurface][data-surface='flat'] {
-    border-radius: var(--tui-radius-xl);
+[data-surface='flat'] {
     background: var(--tui-clear);
 }
 
-button[tuiSurface][data-surface='flat'],
-a[tuiSurface][data-surface='flat'] {
+button[data-surface='flat'],
+a[data-surface='flat'] {
     &:active {
         transform: scale(0.95);
     }