diff --git a/.cspell.json b/.cspell.json
index 83aacba3aec4..ae62d0cdf843 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -32,7 +32,8 @@
         "tcrm",
         "scrollbars",
         "callout",
-        "retrowave"
+        "retrowave",
+        "replicants"
     ],
     "ignoreRegExpList": ["\\(https?://.*?\\)", "\\/{1}.+\\/{1}", "\\%2F.+", "\\%2C.+", "\\ɵ.+", "\\ыва.+"],
     "overrides": [
diff --git a/projects/core/components/loader/loader.style.less b/projects/core/components/loader/loader.style.less
index da0d83f8bd08..30aa06605923 100644
--- a/projects/core/components/loader/loader.style.less
+++ b/projects/core/components/loader/loader.style.less
@@ -44,6 +44,7 @@
 :host {
     position: relative;
     display: flex;
+    min-width: 1.5rem;
 
     &._loading {
         overflow: hidden;
diff --git a/projects/core/styles/theme/variables.less b/projects/core/styles/theme/variables.less
index ee726726ab47..40206b6a5414 100644
--- a/projects/core/styles/theme/variables.less
+++ b/projects/core/styles/theme/variables.less
@@ -21,6 +21,7 @@
     --tui-font-text-s: normal 0.8125rem/1.25rem var(--tui-font-text);
     --tui-font-text-s-2: normal 0.8125rem/1rem var(--tui-font-text);
     --tui-font-text-xs: normal 0.6875rem/1rem var(--tui-font-text);
+    --tui-font-text-xs-2: normal 0.6875rem/0.8125rem var(--tui-font-text);
     // Sizes
     --tui-radius-xs: 0.25rem;
     --tui-radius-s: 0.5rem;
diff --git a/projects/demo-playwright/utils/mock-images.ts b/projects/demo-playwright/utils/mock-images.ts
index 481a0fdd8c72..c04e171d1850 100644
--- a/projects/demo-playwright/utils/mock-images.ts
+++ b/projects/demo-playwright/utils/mock-images.ts
@@ -5,6 +5,7 @@ const DEFAULT_MOCKS = [
         patterns: [
             /.*avatar.jpg/,
             /.*avatars.githubusercontent.com.*/,
+            /https:\/\/github.com\/.*.png.*/,
             /.*bf2e94ae58ee713717faf397958a8e3d.jpg/, // filename - MD5 hash value of file content (waterplea avatar)
         ],
         mockImage: `${__dirname}/../stubs/github-avatar.jpeg`,
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index 4eca2812033c..40a7cfc87b64 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -207,14 +207,6 @@ export const ROUTES: Routes = [
             title: `BlockStatus`,
         },
     },
-    {
-        path: `layout/title`,
-        loadChildren: async () =>
-            (await import(`../directives/title/title.module`)).ExampleTuiTitleModule,
-        data: {
-            title: `Title`,
-        },
-    },
     {
         path: `experimental/avatar`,
         loadChildren: async () =>
@@ -240,6 +232,14 @@ export const ROUTES: Routes = [
             title: `Radio `,
         },
     },
+    {
+        path: `experimental/title`,
+        loadChildren: async () =>
+            (await import(`../experimental/title/title.module`)).ExampleTuiTitleModule,
+        data: {
+            title: `Title`,
+        },
+    },
     {
         path: `experimental/toggle`,
         loadChildren: async () =>
@@ -282,6 +282,14 @@ export const ROUTES: Routes = [
             title: `Button `,
         },
     },
+    {
+        path: `experimental/cell`,
+        loadChildren: async () =>
+            (await import(`../experimental/cell/cell.module`)).ExampleTuiCellModule,
+        data: {
+            title: `Cell`,
+        },
+    },
     {
         path: `experimental/compass`,
         loadChildren: async () =>
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index 830214ca1561..0882131b1f61 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -172,12 +172,6 @@ export const pages: TuiDocPages = [
         keywords: `блок, статус, block, status, block-status, blockstatus, layout`,
         route: `/layout/block-status`,
     },
-    {
-        section: `Layout`,
-        title: `Title`,
-        keywords: `subtitle, заголовок, caption, description, подзаголовок`,
-        route: `/layout/title`,
-    },
     {
         section: `Components`,
         title: `Button`,
@@ -859,6 +853,12 @@ export const pages: TuiDocPages = [
         keywords: `кнопка, button, icon-button, иконка`,
         route: `/experimental/button`,
     },
+    {
+        section: `Experimental`,
+        title: `Cell`,
+        keywords: `cell, feed, item`,
+        route: `/experimental/cell`,
+    },
     {
         section: `Experimental`,
         title: `Compass`,
@@ -889,6 +889,12 @@ export const pages: TuiDocPages = [
         keywords: `card, container, wrapper, image, blur, overlay`,
         route: `/experimental/surface`,
     },
+    {
+        section: `Experimental`,
+        title: `Title`,
+        keywords: `subtitle, заголовок, caption, description, подзаголовок`,
+        route: `/experimental/title`,
+    },
     {
         section: `Experimental`,
         title: `ThumbnailCard `,
diff --git a/projects/demo/src/modules/experimental/cell/cell.component.ts b/projects/demo/src/modules/experimental/cell/cell.component.ts
new file mode 100644
index 000000000000..9e466d8ed8a0
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/cell.component.ts
@@ -0,0 +1,55 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {
+    TuiDocExample,
+    tuiDocExampleOptionsProvider,
+    TuiRawLoaderContent,
+} from '@taiga-ui/addon-doc';
+
+@Component({
+    selector: 'example-cell',
+    templateUrl: './cell.template.html',
+    styleUrls: ['./cell.styles.less'],
+    providers: [tuiDocExampleOptionsProvider({fullsize: true})],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection,
+})
+export class ExampleTuiCellComponent {
+    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'),
+    };
+
+    readonly example2: TuiDocExample = {
+        HTML: import('./examples/2/index.html?raw'),
+    };
+
+    readonly example3: TuiDocExample = {
+        HTML: import('./examples/3/index.html?raw'),
+    };
+
+    readonly example4: TuiDocExample = {
+        HTML: import('./examples/4/index.html?raw'),
+    };
+
+    readonly example5: TuiDocExample = {
+        HTML: import('./examples/5/index.html?raw'),
+    };
+
+    readonly example6: TuiDocExample = {
+        HTML: import('./examples/6/index.html?raw'),
+        TypeScript: import('./examples/6/index.ts?raw'),
+    };
+
+    readonly example7: TuiDocExample = {
+        HTML: import('./examples/7/index.html?raw'),
+        LESS: import('./examples/7/index.less?raw'),
+    };
+}
diff --git a/projects/demo/src/modules/experimental/cell/cell.module.ts b/projects/demo/src/modules/experimental/cell/cell.module.ts
new file mode 100644
index 000000000000..a535b011c6bb
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/cell.module.ts
@@ -0,0 +1,96 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {tuiGetDocModules} from '@taiga-ui/addon-doc';
+import {
+    TuiGroupModule,
+    TuiHostedDropdownModule,
+    TuiLabelModule,
+    TuiLinkModule,
+    TuiLoaderModule,
+    TuiModeModule,
+    TuiNotificationModule,
+    TuiSvgModule,
+    TuiTextfieldControllerModule,
+    TuiTooltipModule,
+    TuiWrapperModule,
+} from '@taiga-ui/core';
+import {
+    TuiAvatarModule,
+    TuiAvatarStackModule,
+    TuiBadgedContentModule,
+    TuiBadgeModule,
+    TuiBadgeNotificationModule,
+    TuiButtonModule,
+    TuiCellModule,
+    TuiCheckboxModule,
+    TuiFadeModule,
+    TuiSensitiveModule,
+    TuiSurfaceModule,
+    TuiThumbnailCardModule,
+    TuiTitleModule,
+    TuiToggleModule,
+} from '@taiga-ui/experimental';
+import {
+    TuiDataListWrapperModule,
+    TuiProgressModule,
+    TuiSelectModule,
+} from '@taiga-ui/kit';
+
+import {ExampleTuiCellComponent} from './cell.component';
+import {TuiCellExample1} from './examples/1';
+import {TuiCellExample2} from './examples/2';
+import {TuiCellExample3} from './examples/3';
+import {TuiCellExample4} from './examples/4';
+import {TuiCellExample5} from './examples/5';
+import {TuiCellExample6} from './examples/6';
+import {TuiCellExample7} from './examples/7';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        TuiWrapperModule,
+        TuiAvatarModule,
+        TuiAvatarStackModule,
+        TuiBadgeModule,
+        TuiBadgeNotificationModule,
+        TuiBadgedContentModule,
+        TuiCellModule,
+        TuiFadeModule,
+        TuiLinkModule,
+        TuiNotificationModule,
+        TuiProgressModule,
+        TuiThumbnailCardModule,
+        TuiToggleModule,
+        TuiTooltipModule,
+        TuiTitleModule,
+        TuiToggleModule,
+        TuiSvgModule,
+        TuiCheckboxModule,
+        TuiLoaderModule,
+        TuiSensitiveModule,
+        TuiSurfaceModule,
+        TuiSelectModule,
+        TuiDataListWrapperModule,
+        TuiTextfieldControllerModule,
+        TuiLabelModule,
+        TuiButtonModule,
+        TuiHostedDropdownModule,
+        TuiGroupModule,
+        tuiGetDocModules(ExampleTuiCellComponent),
+        TuiModeModule,
+    ],
+    declarations: [
+        ExampleTuiCellComponent,
+        TuiCellExample1,
+        TuiCellExample2,
+        TuiCellExample3,
+        TuiCellExample4,
+        TuiCellExample5,
+        TuiCellExample6,
+        TuiCellExample7,
+    ],
+    exports: [ExampleTuiCellComponent],
+})
+export class ExampleTuiCellModule {}
diff --git a/projects/demo/src/modules/experimental/cell/cell.styles.less b/projects/demo/src/modules/experimental/cell/cell.styles.less
new file mode 100644
index 000000000000..6fbd78f1fbfb
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/cell.styles.less
@@ -0,0 +1,5 @@
+@import 'taiga-ui-local';
+
+example-cell [tuiCell] {
+    max-width: 25rem;
+}
diff --git a/projects/demo/src/modules/experimental/cell/cell.template.html b/projects/demo/src/modules/experimental/cell/cell.template.html
new file mode 100644
index 000000000000..5c2a7a52c493
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/cell.template.html
@@ -0,0 +1,91 @@
+<tui-doc-page
+    header="Cell"
+    package="EXPERIMENTAL"
+    type="components"
+>
+    <ng-template pageTab>
+        <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>
+
+        <tui-doc-example
+            id="base"
+            heading="Basic"
+            [content]="example1"
+        >
+            <tui-cell-example-1></tui-cell-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="label"
+            heading="Label"
+            [content]="example2"
+        >
+            <tui-cell-example-2></tui-cell-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="left"
+            heading="Left side"
+            [content]="example3"
+        >
+            <tui-cell-example-3></tui-cell-example-3>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="right"
+            heading="Right side"
+            [content]="example4"
+        >
+            <tui-cell-example-4></tui-cell-example-4>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="long"
+            heading="Long content"
+            [content]="example5"
+        >
+            <tui-cell-example-5></tui-cell-example-5>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="actions"
+            heading="Actions"
+            [content]="example6"
+        >
+            <tui-cell-example-6></tui-cell-example-6>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="combinations"
+            heading="Combinations"
+            [content]="example7"
+        >
+            <tui-cell-example-7></tui-cell-example-7>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p>Import module:</p>
+
+                <tui-doc-code
+                    filename="myComponent.module.ts"
+                    [code]="exampleModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p>Add to the template:</p>
+
+                <tui-doc-code
+                    filename="myComponent.template.html"
+                    [code]="exampleHtml"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>
diff --git a/projects/demo/src/modules/experimental/cell/examples/1/index.html b/projects/demo/src/modules/experimental/cell/examples/1/index.html
new file mode 100644
index 000000000000..b7dd72d1cb87
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/1/index.html
@@ -0,0 +1,18 @@
+<div
+    *ngFor="let size of sizes"
+    [tuiCell]="size"
+>
+    <tui-avatar
+        appearance="primary"
+        tuiWrapper
+        [src]="size === 's' ? 'tuiIconStar' : 'tuiIconStarLarge'"
+    ></tui-avatar>
+    <div tuiTitle>
+        Title
+        <div tuiSubtitle>Description</div>
+    </div>
+    <div tuiTitle>
+        Secondary title
+        <div tuiSubtitle>Another description</div>
+    </div>
+</div>
diff --git a/projects/demo/src/modules/directives/title/examples/1/index.less b/projects/demo/src/modules/experimental/cell/examples/1/index.less
similarity index 100%
rename from projects/demo/src/modules/directives/title/examples/1/index.less
rename to projects/demo/src/modules/experimental/cell/examples/1/index.less
diff --git a/projects/demo/src/modules/experimental/cell/examples/1/index.ts b/projects/demo/src/modules/experimental/cell/examples/1/index.ts
new file mode 100644
index 000000000000..dd84de0e9e24
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/1/index.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-cell-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiCellExample1 {
+    readonly sizes = ['s', 'm', 'l'] as const;
+}
diff --git a/projects/demo/src/modules/experimental/cell/examples/2/index.html b/projects/demo/src/modules/experimental/cell/examples/2/index.html
new file mode 100644
index 000000000000..46e159b2c75d
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/2/index.html
@@ -0,0 +1,48 @@
+<label tuiCell>
+    <tui-badged-content>
+        <tui-badge
+            appearance="light"
+            size="s"
+            tuiSlot="top"
+        >
+            <tui-svg src="tuiIconArrowDownLeft"></tui-svg>
+        </tui-badge>
+        <tui-avatar
+            size="s"
+            src="tuiIconPhone"
+        ></tui-avatar>
+    </tui-badged-content>
+    <div
+        tuiTitle
+        [style.color]="'var(--tui-negative)'"
+    >
+        Allow incoming
+        <div tuiSubtitle>Why would you?</div>
+    </div>
+    <input
+        tuiToggle
+        type="checkbox"
+        [(ngModel)]="incoming"
+    />
+</label>
+<label tuiCell>
+    <tui-badged-content>
+        <tui-badge
+            appearance="light"
+            size="s"
+            tuiSlot="top"
+        >
+            <tui-svg src="tuiIconArrowUpRight"></tui-svg>
+        </tui-badge>
+        <tui-avatar
+            size="s"
+            src="tuiIconPhone"
+        ></tui-avatar>
+    </tui-badged-content>
+    <div tuiTitle>Allow outgoing</div>
+    <input
+        tuiToggle
+        type="checkbox"
+        [(ngModel)]="outgoing"
+    />
+</label>
diff --git a/projects/demo/src/modules/experimental/cell/examples/2/index.less b/projects/demo/src/modules/experimental/cell/examples/2/index.less
new file mode 100644
index 000000000000..23d25a3bb0a1
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/2/index.less
@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
diff --git a/projects/demo/src/modules/experimental/cell/examples/2/index.ts b/projects/demo/src/modules/experimental/cell/examples/2/index.ts
new file mode 100644
index 000000000000..fffe698fd33e
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/2/index.ts
@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-cell-example-2',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiCellExample2 {
+    incoming = false;
+    outgoing = true;
+}
diff --git a/projects/demo/src/modules/experimental/cell/examples/3/index.html b/projects/demo/src/modules/experimental/cell/examples/3/index.html
new file mode 100644
index 000000000000..a86581e2fb20
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/3/index.html
@@ -0,0 +1,90 @@
+<div tuiCell>
+    <label tuiProgressLabel>
+        <tui-svg
+            src="tuiIconSmileLarge"
+            [style.color]="'var(--tui-primary)'"
+        ></tui-svg>
+        <tui-progress-circle [value]="0.3"></tui-progress-circle>
+    </label>
+    <div tuiTitle>
+        <strong>$30 our of $100</strong>
+        <div tuiSubtitle>Saving for a Benjamin Franklin portrait</div>
+    </div>
+    <div tuiTitle>
+        <tui-badge
+            appearance="success"
+            size="s"
+        >
+            +$30
+        </tui-badge>
+        <div tuiSubtitle>&nbsp;</div>
+    </div>
+</div>
+
+<div tuiCell>
+    <tui-avatar-stack>
+        <tui-avatar src="/assets/images/avatar.jpg"></tui-avatar>
+        <tui-avatar src="/assets/images/poorly.png"></tui-avatar>
+        <tui-avatar>+2</tui-avatar>
+    </tui-avatar-stack>
+    <div tuiTitle>
+        Waterplea
+        <div tuiSubtitle>
+            <tui-badge
+                appearance="neutral"
+                size="s"
+            >
+                <tui-svg src="tuiIconLock"></tui-svg>
+                100 ₽
+            </tui-badge>
+            Music
+            <tui-badge
+                appearance="success"
+                size="s"
+            >
+                <tui-svg src="tuiIconBell"></tui-svg>
+            </tui-badge>
+        </div>
+    </div>
+    <a
+        href="https://waterplea.bandcamp.com"
+        tuiLink
+    >
+        Buy
+    </a>
+</div>
+
+<div tuiCell>
+    <input
+        tuiCheckbox
+        type="checkbox"
+        [(ngModel)]="value"
+    />
+    <tui-thumbnail-card
+        paymentSystem="mastercard"
+        size="s"
+    >
+        1234
+    </tui-thumbnail-card>
+    <div tuiTitle>
+        Primary Card
+        <div tuiSubtitle>**** **** **** 1234</div>
+    </div>
+</div>
+
+<div tuiCell>
+    <img
+        alt="Poster"
+        src="https://m.media-amazon.com/images/M/MV5BNzQzMzJhZTEtOWM4NS00MTdhLTg0YjgtMjM4MDRkZjUwZDBlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_UY209_CR0,0,140,209_AL_.jpg"
+        [style.border-radius.rem]="0.5"
+        [style.width.rem]="3"
+    />
+    <div tuiTitle>
+        <div tuiSubtitle>Ridley Scott, 1982</div>
+        Blade Runner
+        <div tuiSubtitle>
+            A blade runner must pursue and terminate four replicants who stole a ship in space and have returned to
+            Earth to find their creator.
+        </div>
+    </div>
+</div>
diff --git a/projects/demo/src/modules/experimental/cell/examples/3/index.less b/projects/demo/src/modules/experimental/cell/examples/3/index.less
new file mode 100644
index 000000000000..23d25a3bb0a1
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/3/index.less
@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
diff --git a/projects/demo/src/modules/experimental/cell/examples/3/index.ts b/projects/demo/src/modules/experimental/cell/examples/3/index.ts
new file mode 100644
index 000000000000..af9b1337704b
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/3/index.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-cell-example-3',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiCellExample3 {
+    value = false;
+}
diff --git a/projects/demo/src/modules/experimental/cell/examples/4/index.html b/projects/demo/src/modules/experimental/cell/examples/4/index.html
new file mode 100644
index 000000000000..486dbf6dc730
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/4/index.html
@@ -0,0 +1,59 @@
+<a
+    href="https://github.com/taiga-family/taiga-ui"
+    tuiCell
+>
+    <div tuiTitle>Notifications</div>
+    <tui-badge-notification>3</tui-badge-notification>
+    <tui-tooltip
+        content="A cell can be a link"
+        (click.prevent)="(0)"
+    ></tui-tooltip>
+    <div tuiSubtitle>
+        Read
+        <tui-svg src="tuiIconChevronRightLarge"></tui-svg>
+    </div>
+</a>
+
+<label tuiCell>
+    <div tuiTitle>
+        A label
+        <div tuiSubtitle>Clicking it will toggle checkbox</div>
+    </div>
+    <tui-loader></tui-loader>
+    <input
+        tuiCheckbox
+        type="checkbox"
+        [(ngModel)]="value"
+    />
+</label>
+
+<button tuiCell>
+    <div tuiTitle>
+        <div tuiSubtitle>
+            <span [style.color]="'var(--tui-positive)'">For sale</span>
+            •
+            <span>ebay</span>
+        </div>
+        It can be a button
+        <div tuiSubtitle>In stock</div>
+    </div>
+    <div tuiTitle>
+        <div tuiSubtitle>&nbsp;</div>
+        $237
+        <div tuiSubtitle>321 items</div>
+    </div>
+</button>
+
+<div tuiCell>
+    <tui-avatar src="/assets/images/avatar.jpg"></tui-avatar>
+    <div tuiTitle>Salary</div>
+    <div tuiTitle>
+        <span
+            [style.color]="'var(--tui-positive)'"
+            [tuiSensitive]="true"
+        >
+            Enough
+        </span>
+        <div tuiSubtitle>Sky's the limit</div>
+    </div>
+</div>
diff --git a/projects/demo/src/modules/experimental/cell/examples/4/index.less b/projects/demo/src/modules/experimental/cell/examples/4/index.less
new file mode 100644
index 000000000000..23d25a3bb0a1
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/4/index.less
@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
diff --git a/projects/demo/src/modules/experimental/cell/examples/4/index.ts b/projects/demo/src/modules/experimental/cell/examples/4/index.ts
new file mode 100644
index 000000000000..baccb9b03928
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/4/index.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-cell-example-4',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiCellExample4 {
+    value = false;
+}
diff --git a/projects/demo/src/modules/experimental/cell/examples/5/index.html b/projects/demo/src/modules/experimental/cell/examples/5/index.html
new file mode 100644
index 000000000000..0abd9110e62a
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/5/index.html
@@ -0,0 +1,102 @@
+<div tuiCell>
+    <tui-avatar
+        src="tuiIconEyeLarge"
+        tuiCellSide
+    ></tui-avatar>
+    <div tuiTitle>
+        Long title in a cell will wrap to multiple lines and so will the subtitle
+        <div
+            tuiSubtitle
+            [style.display]="'block'"
+        >
+            Use
+            <strong>tuiCellSide</strong>
+            to keep your side content properly aligned if you have many lines of text
+        </div>
+    </div>
+    <div tuiCellSide>
+        <tui-svg
+            src="tuiIconCheckLarge"
+            [style.color]="'var(--tui-positive)'"
+        ></tui-svg>
+    </div>
+</div>
+
+<div
+    tuiCell
+    [style.white-space]="'nowrap'"
+>
+    <div
+        tuiFade
+        tuiTitle
+    >
+        Alternatively you can use fade to hide extra text using nowrap CSS
+        <div tuiSubtitle>Works the same for subtitle when fade directive is applied to the top</div>
+    </div>
+    <tui-badge>Works with the right side</tui-badge>
+</div>
+
+<div
+    tuiCell
+    [style.white-space]="'nowrap'"
+>
+    <tui-avatar
+        src="tuiIconSmileLarge"
+        [round]="false"
+    ></tui-avatar>
+    <div
+        tuiFade
+        tuiTitle
+    >
+        Works with fade on both sides
+        <div tuiSubtitle>You can control proportions</div>
+    </div>
+    <div
+        tuiFade
+        tuiTitle
+    >
+        Proportions are controlled with flex
+        <div tuiSubtitle>Flex shrink is set to 70-30 by default</div>
+    </div>
+    <tui-badge-notification size="xs"></tui-badge-notification>
+</div>
+
+<div tuiCell>
+    <tui-avatar
+        src="/assets/images/avatar.jpg"
+        tuiCellSide
+    ></tui-avatar>
+    <div
+        tuiCellSide
+        tuiTitle
+    >
+        Alexander
+        <div tuiSubtitle>Taiga UI developer</div>
+    </div>
+    <div tuiTitle>
+        <span [style.color]="'var(--tui-positive)'">+$1000</span>
+        <div tuiSubtitle>Bonus for tuiCell component</div>
+        <tui-badge appearance="primary">Awesome!</tui-badge>
+    </div>
+</div>
+
+<div tuiCell>
+    <tui-avatar
+        src="tuiIconHomeLarge"
+        tuiCellSide
+    ></tui-avatar>
+    <div tuiTitle>
+        <strong>Main account</strong>
+        <div tuiSubtitle>USD</div>
+        <tui-badge appearance="neutral">By default unless arrested</tui-badge>
+    </div>
+    <div
+        tuiCellSide
+        tuiTitle
+        [style.white-space]="'nowrap'"
+        [style.width]="0"
+    >
+        $123 456
+        <div tuiSubtitle>Careful, content may overlap</div>
+    </div>
+</div>
diff --git a/projects/demo/src/modules/experimental/cell/examples/5/index.less b/projects/demo/src/modules/experimental/cell/examples/5/index.less
new file mode 100644
index 000000000000..23d25a3bb0a1
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/5/index.less
@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
diff --git a/projects/demo/src/modules/experimental/cell/examples/5/index.ts b/projects/demo/src/modules/experimental/cell/examples/5/index.ts
new file mode 100644
index 000000000000..f988cd382612
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/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-cell-example-5',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiCellExample5 {}
diff --git a/projects/demo/src/modules/experimental/cell/examples/6/index.html b/projects/demo/src/modules/experimental/cell/examples/6/index.html
new file mode 100644
index 000000000000..a64abba4a9d3
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/6/index.html
@@ -0,0 +1,61 @@
+<div tuiCell>
+    <div tuiTitle>
+        Single action
+        <div tuiSubtitle>Description of the action</div>
+    </div>
+    <button tuiButton>Action</button>
+</div>
+
+<div tuiCell>
+    <div tuiTitle>
+        Multiple actions
+        <div tuiSubtitle>With no content on the right</div>
+    </div>
+    <tui-hosted-dropdown
+        tuiDropdownAlign="right"
+        [content]="dropdown"
+    >
+        <button
+            appearance="icon"
+            iconLeft="tuiIconMoreHorizontalLarge"
+            tuiIconButton
+        >
+            Action
+        </button>
+        <ng-template
+            #dropdown
+            let-close="close"
+        >
+            <tui-data-list-wrapper
+                [items]="items"
+                (itemClick)="close()"
+            ></tui-data-list-wrapper>
+        </ng-template>
+    </tui-hosted-dropdown>
+</div>
+
+<button tuiCell>
+    <div tuiTitle>
+        Multiple actions
+        <div tuiSubtitle>When there's content on the right</div>
+    </div>
+    <div
+        tuiCellActions
+        tuiGroup
+        tuiMode="onDark"
+        [collapsed]="true"
+    >
+        <button
+            *ngFor="let item of items"
+            appearance="opposite"
+            tuiIconButton
+            [iconLeft]="item.icon"
+        >
+            {{ item }}
+        </button>
+    </div>
+    <div tuiTitle>
+        Hover over
+        <div tuiSubtitle>Put it before the right side</div>
+    </div>
+</button>
diff --git a/projects/demo/src/modules/experimental/cell/examples/6/index.less b/projects/demo/src/modules/experimental/cell/examples/6/index.less
new file mode 100644
index 000000000000..23d25a3bb0a1
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/6/index.less
@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
diff --git a/projects/demo/src/modules/experimental/cell/examples/6/index.ts b/projects/demo/src/modules/experimental/cell/examples/6/index.ts
new file mode 100644
index 000000000000..6d6db20b9cdf
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/6/index.ts
@@ -0,0 +1,27 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-cell-example-6',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiCellExample6 {
+    readonly items = [
+        {
+            icon: 'tuiIconPhone',
+            toString: () => 'Call now',
+        },
+        {
+            icon: 'tuiIconStar',
+            toString: () => 'Add to favorites',
+        },
+        {
+            icon: 'tuiIconTrash',
+            toString: () => 'Remove item',
+        },
+    ];
+}
diff --git a/projects/demo/src/modules/experimental/cell/examples/7/index.html b/projects/demo/src/modules/experimental/cell/examples/7/index.html
new file mode 100644
index 000000000000..67f5931689af
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/7/index.html
@@ -0,0 +1,50 @@
+<div 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"
+                tuiWrapper
+                [src]="item.icon"
+            ></tui-avatar>
+            <span tuiTitle>
+                {{ item.title }}
+                <span tuiSubtitle>{{ item.subtitle }}</span>
+            </span>
+        </button>
+    </div>
+</div>
+
+<label tuiLabel="Inside a dropdown">
+    <tui-select
+        [tuiTextfieldLabelOutside]="true"
+        [valueContent]="content"
+        [(ngModel)]="value"
+    >
+        <tui-data-list-wrapper
+            *tuiDataList
+            [itemContent]="content"
+            [items]="items"
+        ></tui-data-list-wrapper>
+        <ng-template
+            #content
+            let-item
+        >
+            <span tuiCell>
+                <tui-avatar
+                    appearance="primary"
+                    tuiWrapper
+                    [src]="item.icon"
+                ></tui-avatar>
+                <span tuiTitle>
+                    {{ item.title }}
+                    <span tuiSubtitle>{{ item.subtitle }}</span>
+                </span>
+            </span>
+        </ng-template>
+    </tui-select>
+</label>
diff --git a/projects/demo/src/modules/experimental/cell/examples/7/index.less b/projects/demo/src/modules/experimental/cell/examples/7/index.less
new file mode 100644
index 000000000000..3b7d879d2e89
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/7/index.less
@@ -0,0 +1,19 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    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/cell/examples/7/index.ts b/projects/demo/src/modules/experimental/cell/examples/7/index.ts
new file mode 100644
index 000000000000..58d2792dcb96
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/7/index.ts
@@ -0,0 +1,32 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-cell-example-7',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiCellExample7 {
+    readonly items = [
+        {
+            icon: 'tuiIconEyeLarge',
+            title: 'Show more',
+            subtitle: 'Ctrl + Shift + M',
+        },
+        {
+            icon: 'tuiIconMailLarge',
+            title: 'Send message',
+            subtitle: 'Keep it short',
+        },
+        {
+            icon: 'tuiIconLockLarge',
+            title: 'Access',
+            subtitle: 'Block your account',
+        },
+    ];
+
+    value = this.items[0];
+}
diff --git a/projects/demo/src/modules/experimental/cell/examples/import/import-module.md b/projects/demo/src/modules/experimental/cell/examples/import/import-module.md
new file mode 100644
index 000000000000..e5e01c04cb6a
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/import/import-module.md
@@ -0,0 +1,13 @@
+```ts
+import {NgModule} from '@angular/core';
+import {TuiCellModule} from '@taiga-ui/experimental';
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiCellModule,
+  ],
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/experimental/cell/examples/import/insert-template.md b/projects/demo/src/modules/experimental/cell/examples/import/insert-template.md
new file mode 100644
index 000000000000..dabca51107b4
--- /dev/null
+++ b/projects/demo/src/modules/experimental/cell/examples/import/insert-template.md
@@ -0,0 +1,10 @@
+```html
+<div tuiCell>
+  <tui-avatar src="..."></tui-avatar>
+  <div tuiTitle>
+    Title
+    <div tuiSubtitle>Subtitle</div>
+  </div>
+  <button tuiButton>Action</button>
+</div>
+```
diff --git a/projects/demo/src/modules/directives/title/examples/1/index.html b/projects/demo/src/modules/experimental/title/examples/1/index.html
similarity index 100%
rename from projects/demo/src/modules/directives/title/examples/1/index.html
rename to projects/demo/src/modules/experimental/title/examples/1/index.html
diff --git a/projects/demo/src/modules/directives/title/examples/2/index.less b/projects/demo/src/modules/experimental/title/examples/1/index.less
similarity index 100%
rename from projects/demo/src/modules/directives/title/examples/2/index.less
rename to projects/demo/src/modules/experimental/title/examples/1/index.less
diff --git a/projects/demo/src/modules/directives/title/examples/1/index.ts b/projects/demo/src/modules/experimental/title/examples/1/index.ts
similarity index 100%
rename from projects/demo/src/modules/directives/title/examples/1/index.ts
rename to projects/demo/src/modules/experimental/title/examples/1/index.ts
diff --git a/projects/demo/src/modules/directives/title/examples/2/index.html b/projects/demo/src/modules/experimental/title/examples/2/index.html
similarity index 100%
rename from projects/demo/src/modules/directives/title/examples/2/index.html
rename to projects/demo/src/modules/experimental/title/examples/2/index.html
diff --git a/projects/demo/src/modules/experimental/title/examples/2/index.less b/projects/demo/src/modules/experimental/title/examples/2/index.less
new file mode 100644
index 000000000000..dc3140046ad7
--- /dev/null
+++ b/projects/demo/src/modules/experimental/title/examples/2/index.less
@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
diff --git a/projects/demo/src/modules/directives/title/examples/2/index.ts b/projects/demo/src/modules/experimental/title/examples/2/index.ts
similarity index 100%
rename from projects/demo/src/modules/directives/title/examples/2/index.ts
rename to projects/demo/src/modules/experimental/title/examples/2/index.ts
diff --git a/projects/demo/src/modules/directives/title/examples/3/index.html b/projects/demo/src/modules/experimental/title/examples/3/index.html
similarity index 100%
rename from projects/demo/src/modules/directives/title/examples/3/index.html
rename to projects/demo/src/modules/experimental/title/examples/3/index.html
diff --git a/projects/demo/src/modules/directives/title/examples/3/index.less b/projects/demo/src/modules/experimental/title/examples/3/index.less
similarity index 100%
rename from projects/demo/src/modules/directives/title/examples/3/index.less
rename to projects/demo/src/modules/experimental/title/examples/3/index.less
diff --git a/projects/demo/src/modules/directives/title/examples/3/index.ts b/projects/demo/src/modules/experimental/title/examples/3/index.ts
similarity index 100%
rename from projects/demo/src/modules/directives/title/examples/3/index.ts
rename to projects/demo/src/modules/experimental/title/examples/3/index.ts
diff --git a/projects/demo/src/modules/directives/title/examples/import/import-module.md b/projects/demo/src/modules/experimental/title/examples/import/import-module.md
similarity index 100%
rename from projects/demo/src/modules/directives/title/examples/import/import-module.md
rename to projects/demo/src/modules/experimental/title/examples/import/import-module.md
diff --git a/projects/demo/src/modules/directives/title/examples/import/insert-template.md b/projects/demo/src/modules/experimental/title/examples/import/insert-template.md
similarity index 100%
rename from projects/demo/src/modules/directives/title/examples/import/insert-template.md
rename to projects/demo/src/modules/experimental/title/examples/import/insert-template.md
diff --git a/projects/demo/src/modules/directives/title/title.component.ts b/projects/demo/src/modules/experimental/title/title.component.ts
similarity index 100%
rename from projects/demo/src/modules/directives/title/title.component.ts
rename to projects/demo/src/modules/experimental/title/title.component.ts
diff --git a/projects/demo/src/modules/directives/title/title.module.ts b/projects/demo/src/modules/experimental/title/title.module.ts
similarity index 75%
rename from projects/demo/src/modules/directives/title/title.module.ts
rename to projects/demo/src/modules/experimental/title/title.module.ts
index fa84c491296d..29b5e8830a89 100644
--- a/projects/demo/src/modules/directives/title/title.module.ts
+++ b/projects/demo/src/modules/experimental/title/title.module.ts
@@ -1,9 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {tuiGetDocModules} from '@taiga-ui/addon-doc';
-import {TuiLinkModule, TuiWrapperModule} from '@taiga-ui/core';
-import {TuiAvatarModule, TuiCheckboxModule} from '@taiga-ui/experimental';
-import {TuiTitleModule} from '@taiga-ui/layout';
+import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
+import {TuiAvatarModule, TuiTitleModule} from '@taiga-ui/experimental';
 
 import {TuiTitleExample1} from './examples/1';
 import {TuiTitleExample2} from './examples/2';
@@ -14,11 +13,10 @@ import {ExampleTuiTitleComponent} from './title.component';
     imports: [
         CommonModule,
         TuiTitleModule,
-        tuiGetDocModules(ExampleTuiTitleComponent),
         TuiLinkModule,
-        TuiCheckboxModule,
-        TuiWrapperModule,
         TuiAvatarModule,
+        TuiNotificationModule,
+        tuiGetDocModules(ExampleTuiTitleComponent),
     ],
     declarations: [
         ExampleTuiTitleComponent,
diff --git a/projects/demo/src/modules/directives/title/title.template.html b/projects/demo/src/modules/experimental/title/title.template.html
similarity index 83%
rename from projects/demo/src/modules/directives/title/title.template.html
rename to projects/demo/src/modules/experimental/title/title.template.html
index 93d7457089c9..f3bd23b5d609 100644
--- a/projects/demo/src/modules/directives/title/title.template.html
+++ b/projects/demo/src/modules/experimental/title/title.template.html
@@ -1,9 +1,15 @@
 <tui-doc-page
     header="Title"
-    package="LAYOUT"
+    package="EXPERIMENTAL"
     type="components"
 >
     <ng-template pageTab>
+        <tui-notification status="warning">
+            This code is
+            <strong>experimental</strong>
+            and is a subject to change. Expect final solution to be shipped in the next major version
+        </tui-notification>
+
         <p>A directive for title with optional subtitle</p>
 
         <tui-doc-example
diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts
index 243c7cda251c..bba27fa2dd95 100644
--- a/projects/demo/used-icons.ts
+++ b/projects/demo/used-icons.ts
@@ -102,10 +102,14 @@ export const TUI_USED_ICONS = [
     `tuiIconBox`,
     `tuiIconLock`,
     `tuiIconUsers`,
+    `tuiIconArrowDownLeft`,
+    `tuiIconArrowUpRight`,
+    `tuiIconSmileLarge`,
+    `tuiIconBell`,
+    `tuiIconCheckLarge`,
     `tuiIconCloseLarge`,
     `tuiIconFrownLarge`,
     `tuiIconMehLarge`,
-    `tuiIconSmileLarge`,
     `tuiIconThumbsUp`,
     `tuiIconThumbsDown`,
     `tuiIconCloud`,
diff --git a/projects/experimental/components/avatar-stack/avatar-stack.style.less b/projects/experimental/components/avatar-stack/avatar-stack.style.less
index c78e86450195..cede95c18d80 100644
--- a/projects/experimental/components/avatar-stack/avatar-stack.style.less
+++ b/projects/experimental/components/avatar-stack/avatar-stack.style.less
@@ -4,15 +4,27 @@ tui-avatar-stack {
     display: flex;
     --t-gap: 0.125rem;
 
-    tui-avatar {
-        mask-size:
-            calc(var(--t-radius) + var(--t-gap)) calc(var(--t-radius) + var(--t-gap)),
-            calc(var(--t-radius) + var(--t-gap)) calc(var(--t-radius) + var(--t-gap)),
-            100%;
-        mask-repeat: no-repeat;
+    tui-avatar._round {
+        mask-image: radial-gradient(circle at var(--t-x) 50%, transparent calc(var(--t-radius) + var(--t-gap)), #000 calc(var(--t-radius) + var(--t-gap) + 0.2px));
+    }
+
+    &[data-direction='right'] tui-avatar._round {
+        --t-x: 100%;
+
+        &:last-child {
+            mask-image: none;
+        }
+    }
+
+    &[data-direction='left'] tui-avatar._round {
+        --t-x: 0;
+
+        &:first-child {
+            mask-image: none;
+        }
     }
 
-    &[data-direction='left'] tui-avatar:not(:first-child) {
+    &[data-direction='left'] tui-avatar:not(._round):not(:first-child) {
         mask-image:
             radial-gradient(circle at 0% 100%, transparent calc(var(--t-radius) + var(--t-gap)), #000 calc(var(--t-radius) + var(--t-gap) + 0.2px)),
             radial-gradient(circle at 0% 0%, transparent calc(var(--t-radius) + var(--t-gap)), #000 calc(var(--t-radius) + var(--t-gap) + 0.2px)),
@@ -23,7 +35,7 @@ tui-avatar-stack {
             bottom;
     }
 
-    &[data-direction='right'] tui-avatar:not(:last-child) {
+    &[data-direction='right'] tui-avatar:not(._round):not(:last-child) {
         mask-image:
             radial-gradient(circle at 150% 100%, transparent calc(var(--t-radius) + var(--t-gap)), #000 calc(var(--t-radius) + var(--t-gap) + 0.2px)),
             radial-gradient(circle at 150% 0%, transparent calc(var(--t-radius) + var(--t-gap)), #000 calc(var(--t-radius) + var(--t-gap) + 0.2px)),
@@ -34,6 +46,14 @@ tui-avatar-stack {
             bottom;
     }
 
+    tui-avatar:not(._round) {
+        mask-size:
+            calc(var(--t-radius) + var(--t-gap)) calc(var(--t-radius) + var(--t-gap)),
+            calc(var(--t-radius) + var(--t-gap)) calc(var(--t-radius) + var(--t-gap)),
+            100%;
+        mask-repeat: no-repeat;
+    }
+
     tui-avatar:not(:last-child) {
         margin-right: calc(var(--t-size) / -2);
     }
diff --git a/projects/experimental/components/badge/badge.style.less b/projects/experimental/components/badge/badge.style.less
index 8b9872bc9b54..128003493b5a 100644
--- a/projects/experimental/components/badge/badge.style.less
+++ b/projects/experimental/components/badge/badge.style.less
@@ -13,6 +13,7 @@
     overflow: hidden;
     vertical-align: middle;
     font: var(--tui-font-text-s);
+    flex-shrink: 0;
     max-width: 100%;
 
     &:after {
diff --git a/projects/experimental/directives/cell/cell.component.ts b/projects/experimental/directives/cell/cell.component.ts
new file mode 100644
index 000000000000..fb59d3f8e018
--- /dev/null
+++ b/projects/experimental/directives/cell/cell.component.ts
@@ -0,0 +1,10 @@
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    host: {class: 'tui-cell'},
+    template: '',
+    styleUrls: ['./cell.styles.less'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+})
+export class TuiCellComponent {}
diff --git a/projects/experimental/directives/cell/cell.directive.ts b/projects/experimental/directives/cell/cell.directive.ts
new file mode 100644
index 000000000000..e685be56243e
--- /dev/null
+++ b/projects/experimental/directives/cell/cell.directive.ts
@@ -0,0 +1,33 @@
+import {Directive, Inject, Input} from '@angular/core';
+import {TUI_PLATFORM, TuiDirectiveStylesService, TuiPlatform} from '@taiga-ui/cdk';
+import {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
+import {
+    tuiAvatarOptionsProvider,
+    tuiButtonOptionsProvider,
+} from '@taiga-ui/experimental/components';
+
+import {TuiCellComponent} from './cell.component';
+
+@Directive({
+    selector: '[tuiCell]',
+    providers: [
+        tuiAvatarOptionsProvider({size: 's'}),
+        tuiButtonOptionsProvider({size: 's'}),
+    ],
+    host: {
+        tuiCell: '',
+        '[attr.data-size]': 'platform !== "web" ? "l" : size || "l"',
+        '[attr.data-platform]': 'platform',
+    },
+})
+export class TuiCellDirective {
+    @Input('tuiCell')
+    size: TuiSizeL | TuiSizeS | '' = 'l';
+
+    constructor(
+        @Inject(TUI_PLATFORM) readonly platform: TuiPlatform,
+        @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService,
+    ) {
+        directiveStyles.addComponent(TuiCellComponent);
+    }
+}
diff --git a/projects/experimental/directives/cell/cell.module.ts b/projects/experimental/directives/cell/cell.module.ts
new file mode 100644
index 000000000000..7a06442de096
--- /dev/null
+++ b/projects/experimental/directives/cell/cell.module.ts
@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core';
+
+import {TuiCellComponent} from './cell.component';
+import {TuiCellDirective} from './cell.directive';
+
+@NgModule({
+    declarations: [TuiCellComponent, TuiCellDirective],
+    exports: [TuiCellComponent, TuiCellDirective],
+})
+export class TuiCellModule {}
diff --git a/projects/experimental/directives/cell/cell.styles.less b/projects/experimental/directives/cell/cell.styles.less
new file mode 100644
index 000000000000..90453dac72ca
--- /dev/null
+++ b/projects/experimental/directives/cell/cell.styles.less
@@ -0,0 +1,164 @@
+@import 'taiga-ui-local';
+
+[tuiCell] {
+    .transition(background);
+    .clearbtn();
+    position: relative;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    box-sizing: content-box;
+    isolation: isolate;
+    color: var(--tui-text-01);
+    padding: var(--t-padding);
+    min-height: var(--t-height);
+
+    --tui-height: calc(var(--tui-height-s) - 0.5rem);
+    --t-padding: 0.125rem 1rem;
+
+    [tuiCellSide] {
+        position: relative;
+        display: flex;
+        max-height: var(--t-height);
+        align-items: center;
+        align-self: stretch;
+    }
+
+    [tuiCellActions] {
+        position: absolute;
+        right: 0;
+        z-index: 1;
+        padding-right: inherit;
+
+        & ~ * {
+            .transition(opacity);
+        }
+
+        & button,
+        & a {
+            .transition(opacity);
+            opacity: 0;
+
+            &:focus-visible {
+                opacity: 1;
+            }
+        }
+    }
+
+    [tuiSubtitle] {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        color: var(--tui-text-02);
+    }
+
+    [tuiTitle] {
+        flex-shrink: 7;
+        margin-inline-end: auto;
+        align-items: normal;
+    }
+
+    [tuiTitle] ~ [tuiTitle] {
+        flex-shrink: 3;
+        margin-inline-end: 0;
+        text-align: right;
+        align-items: flex-end;
+    }
+
+    tui-badge-notification[data-size='xs'] {
+        .center-top();
+        left: -0.625rem;
+    }
+
+    &[data-size='s'] {
+        --t-height: calc(var(--tui-height-s) - 0.5rem);
+        --t-padding: 0.125rem 1rem;
+
+        [tuiTitle] {
+            max-height: 100%;
+            font: var(--tui-font-text-s-2);
+            gap: 0;
+        }
+
+        [tuiSubtitle] {
+            font: var(--tui-font-text-xs-s);
+        }
+
+        & > *:not(:first-child),
+        & > [tuiCellSide] > *:not(:first-child) {
+            margin-inline-start: 0.5rem;
+        }
+
+        & > tui-avatar,
+        & > tui-avatar-stack tui-avatar,
+        & > [tuiCellSide] tui-avatar,
+        & > [tuiCellSide] tui-avatar-stack tui-avatar {
+            --t-size: 1.5rem;
+        }
+    }
+
+    &[data-size='m'] {
+        --t-height: calc(var(--tui-height-m) - 0.75rem);
+        --t-padding: 0.375rem 1rem;
+
+        [tuiTitle] {
+            font: var(--tui-font-text-s-2);
+            gap: 0.125rem;
+        }
+
+        [tuiSubtitle] {
+            font: var(--tui-font-text-xs-2);
+        }
+
+        & > *:not(:first-child),
+        & > [tuiCellSide] > *:not(:first-child) {
+            margin-inline-start: 0.75rem;
+        }
+
+        & > tui-avatar,
+        & > tui-avatar-stack tui-avatar,
+        & > [tuiCellSide] tui-avatar,
+        & > [tuiCellSide] tui-avatar-stack tui-avatar {
+            --t-size: 2rem;
+        }
+    }
+
+    &[data-size='l'] {
+        --t-height: calc(var(--tui-height-l) - 1rem);
+        --t-padding: 0.5rem 1rem;
+
+        & > *:not(:first-child),
+        & > [tuiCellSide] > *:not(:first-child) {
+            margin-inline-start: 1rem;
+        }
+
+        & > tui-avatar,
+        & > tui-avatar-stack tui-avatar,
+        & > [tuiCellSide] tui-avatar,
+        & > [tuiCellSide] tui-avatar-stack tui-avatar {
+            --t-size: 2.5rem;
+        }
+    }
+
+    &:hover [tuiCellActions] ~ * {
+        opacity: 0;
+    }
+
+    &:hover [tuiCellActions] button,
+    &:hover [tuiCellActions] a {
+        opacity: 1;
+    }
+
+    [tuiOption] &,
+    tui-primitive-textfield & {
+        padding: 0;
+    }
+}
+
+@media (hover: hover) and (pointer: fine) {
+    a[tuiCell]:hover,
+    button[tuiCell]:hover {
+        background: var(--tui-clear);
+        cursor: pointer;
+    }
+}
diff --git a/projects/experimental/directives/cell/index.ts b/projects/experimental/directives/cell/index.ts
new file mode 100644
index 000000000000..a61848642896
--- /dev/null
+++ b/projects/experimental/directives/cell/index.ts
@@ -0,0 +1,3 @@
+export * from './cell.component';
+export * from './cell.directive';
+export * from './cell.module';
diff --git a/projects/layout/components/title/ng-package.json b/projects/experimental/directives/cell/ng-package.json
similarity index 100%
rename from projects/layout/components/title/ng-package.json
rename to projects/experimental/directives/cell/ng-package.json
diff --git a/projects/experimental/directives/index.ts b/projects/experimental/directives/index.ts
index 5758f3fd140a..f7a099c4fdd9 100644
--- a/projects/experimental/directives/index.ts
+++ b/projects/experimental/directives/index.ts
@@ -1,3 +1,5 @@
+export * from '@taiga-ui/experimental/directives/cell';
 export * from '@taiga-ui/experimental/directives/fade';
 export * from '@taiga-ui/experimental/directives/sensitive';
 export * from '@taiga-ui/experimental/directives/surface';
+export * from '@taiga-ui/experimental/directives/title';
diff --git a/projects/experimental/directives/sensitive/sensitive.style.less b/projects/experimental/directives/sensitive/sensitive.style.less
index e6b368574dcb..54cab64e97ba 100644
--- a/projects/experimental/directives/sensitive/sensitive.style.less
+++ b/projects/experimental/directives/sensitive/sensitive.style.less
@@ -19,6 +19,6 @@
     }
 
     &.tui-sensitive {
-        text-indent: -10000%;
+        -webkit-text-fill-color: transparent;
     }
 }
diff --git a/projects/layout/components/title/index.ts b/projects/experimental/directives/title/index.ts
similarity index 100%
rename from projects/layout/components/title/index.ts
rename to projects/experimental/directives/title/index.ts
diff --git a/projects/experimental/directives/title/ng-package.json b/projects/experimental/directives/title/ng-package.json
new file mode 100644
index 000000000000..bab5ebcdb74a
--- /dev/null
+++ b/projects/experimental/directives/title/ng-package.json
@@ -0,0 +1,8 @@
+{
+    "lib": {
+        "entryFile": "index.ts",
+        "styleIncludePaths": [
+            "../../../core/styles"
+        ]
+    }
+}
diff --git a/projects/layout/components/title/title.component.ts b/projects/experimental/directives/title/title.component.ts
similarity index 100%
rename from projects/layout/components/title/title.component.ts
rename to projects/experimental/directives/title/title.component.ts
diff --git a/projects/layout/components/title/title.directive.ts b/projects/experimental/directives/title/title.directive.ts
similarity index 93%
rename from projects/layout/components/title/title.directive.ts
rename to projects/experimental/directives/title/title.directive.ts
index e16ab2fff036..3c7b97a6e10f 100644
--- a/projects/layout/components/title/title.directive.ts
+++ b/projects/experimental/directives/title/title.directive.ts
@@ -5,8 +5,9 @@ import {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {TuiTitleComponent} from './title.component';
 
 @Directive({
-    selector: '[tuiTitle], [tuiSubtitle]',
+    selector: '[tuiTitle]',
     host: {
+        tuiTitle: '',
         '[attr.data-size]': 'size || null',
         '[attr.data-platform]': 'platform',
     },
diff --git a/projects/layout/components/title/title.module.ts b/projects/experimental/directives/title/title.module.ts
similarity index 100%
rename from projects/layout/components/title/title.module.ts
rename to projects/experimental/directives/title/title.module.ts
diff --git a/projects/layout/components/title/title.style.less b/projects/experimental/directives/title/title.style.less
similarity index 94%
rename from projects/layout/components/title/title.style.less
rename to projects/experimental/directives/title/title.style.less
index fc78c49710f3..ad0159f87edd 100644
--- a/projects/layout/components/title/title.style.less
+++ b/projects/experimental/directives/title/title.style.less
@@ -1,6 +1,8 @@
 [tuiTitle] {
+    position: relative;
     display: flex;
     flex-direction: column;
+    text-align: left;
     gap: 0.25rem;
     margin: 0;
     font: var(--tui-font-text-m-2);
diff --git a/projects/kit/components/data-list-wrapper/data-list-group-wrapper.template.html b/projects/kit/components/data-list-wrapper/data-list-group-wrapper.template.html
index 7e00c5ee97eb..066ff48b26fa 100644
--- a/projects/kit/components/data-list-wrapper/data-list-group-wrapper.template.html
+++ b/projects/kit/components/data-list-wrapper/data-list-group-wrapper.template.html
@@ -16,6 +16,7 @@
             tuiOption
             [disabled]="disabledItemHandler(item)"
             [value]="item"
+            (click)="itemClick.emit(item)"
         >
             <ng-container *polymorpheusOutlet="itemContent as text; context: getContext(item, elementRef)">
                 {{ text }}
diff --git a/projects/kit/components/data-list-wrapper/data-list-wrapper.template.html b/projects/kit/components/data-list-wrapper/data-list-wrapper.template.html
index 25f831f9e3ae..009f05d7e50a 100644
--- a/projects/kit/components/data-list-wrapper/data-list-wrapper.template.html
+++ b/projects/kit/components/data-list-wrapper/data-list-wrapper.template.html
@@ -12,6 +12,7 @@
         tuiOption
         [disabled]="disabledItemHandler(item)"
         [value]="item"
+        (click)="itemClick.emit(item)"
     >
         <span class="t-content">
             <ng-container *polymorpheusOutlet="itemContent as text; context: getContext(item, elementRef)">
diff --git a/projects/kit/components/data-list-wrapper/data-list-wrapper.ts b/projects/kit/components/data-list-wrapper/data-list-wrapper.ts
index e912a474a2bc..ccd091d15358 100644
--- a/projects/kit/components/data-list-wrapper/data-list-wrapper.ts
+++ b/projects/kit/components/data-list-wrapper/data-list-wrapper.ts
@@ -1,8 +1,10 @@
 import {
     Directive,
     ElementRef,
+    EventEmitter,
     forwardRef,
     Input,
+    Output,
     QueryList,
     ViewChildren,
 } from '@angular/core';
@@ -31,6 +33,9 @@ export abstract class AbstractTuiDataListWrapper<T> {
     @Input()
     size: TuiSizeL | TuiSizeXS = this.defaultSize;
 
+    @Output()
+    readonly itemClick = new EventEmitter<T>();
+
     constructor(
         protected readonly itemsHandlers: TuiItemsHandlers<T>,
         protected readonly defaultSize: TuiSizeL | TuiSizeXS,
diff --git a/projects/layout/components/index.ts b/projects/layout/components/index.ts
index 8becae85e0aa..45b3c6d90361 100644
--- a/projects/layout/components/index.ts
+++ b/projects/layout/components/index.ts
@@ -1,2 +1 @@
 export * from '@taiga-ui/layout/components/block-status';
-export * from '@taiga-ui/layout/components/title';