diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index af79f0ddb32c..b76ba682fef1 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -335,6 +335,15 @@ export const ROUTES: Routes = [
             title: 'BadgedContent ',
         },
     },
+    {
+        path: 'experimental/block-details',
+        loadChildren: async () =>
+            (await import('../experimental/block-details/block-details.module'))
+                .ExampleTuiBlockDetailsModule,
+        data: {
+            title: 'BlockDetails',
+        },
+    },
     {
         path: 'experimental/button',
         loadChildren: async () =>
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index b0e269a99de5..9bb96885f2d2 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -895,6 +895,12 @@ export const pages: TuiDocPages = [
             },
         ],
     },
+    {
+        section: 'Experimental',
+        title: 'BlockDetails',
+        keywords: 'details, block, детали, блок',
+        route: '/experimental/block-details',
+    },
     {
         section: 'Experimental',
         title: 'Button',
diff --git a/projects/demo/src/modules/experimental/block-details/block-details.component.ts b/projects/demo/src/modules/experimental/block-details/block-details.component.ts
new file mode 100644
index 000000000000..9af8133c59d7
--- /dev/null
+++ b/projects/demo/src/modules/experimental/block-details/block-details.component.ts
@@ -0,0 +1,29 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+
+@Component({
+    selector: 'example-block-details',
+    templateUrl: './block-details.template.html',
+    changeDetection,
+})
+export class ExampleTuiBlockDetailsComponent {
+    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'),
+        TypeScript: import('./examples/1/index.ts?raw'),
+    };
+
+    readonly example2: TuiDocExample = {
+        HTML: import('./examples/2/index.html?raw'),
+        LESS: import('./examples/2/index.less?raw'),
+        TypeScript: import('./examples/2/index.ts?raw'),
+    };
+}
diff --git a/projects/demo/src/modules/experimental/block-details/block-details.module.ts b/projects/demo/src/modules/experimental/block-details/block-details.module.ts
new file mode 100644
index 000000000000..4133ebc66005
--- /dev/null
+++ b/projects/demo/src/modules/experimental/block-details/block-details.module.ts
@@ -0,0 +1,39 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
+import {TuiNotificationModule} from '@taiga-ui/core';
+import {
+    TuiAmountPipeModule,
+    TuiAvatarModule,
+    TuiBadgeModule,
+    TuiBlockDetailsModule,
+    TuiFadeModule,
+    TuiTitleModule,
+} from '@taiga-ui/experimental';
+
+import {ExampleTuiBlockDetailsComponent} from './block-details.component';
+import {TuiBlockDetailsExample1} from './examples/1';
+import {TuiBlockDetailsExample2} from './examples/2';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiAddonDocModule,
+        TuiAvatarModule,
+        TuiAmountPipeModule,
+        TuiBadgeModule,
+        TuiTitleModule,
+        TuiBlockDetailsModule,
+        TuiFadeModule,
+        TuiNotificationModule,
+        RouterModule.forChild(tuiGenerateRoutes(ExampleTuiBlockDetailsComponent)),
+    ],
+    declarations: [
+        ExampleTuiBlockDetailsComponent,
+        TuiBlockDetailsExample1,
+        TuiBlockDetailsExample2,
+    ],
+    exports: [ExampleTuiBlockDetailsComponent],
+})
+export class ExampleTuiBlockDetailsModule {}
diff --git a/projects/demo/src/modules/experimental/block-details/block-details.template.html b/projects/demo/src/modules/experimental/block-details/block-details.template.html
new file mode 100644
index 000000000000..88e128f3c104
--- /dev/null
+++ b/projects/demo/src/modules/experimental/block-details/block-details.template.html
@@ -0,0 +1,53 @@
+<tui-doc-page
+    header="BlockDetails"
+    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>Layout component for describing details. For example, transaction details</p>
+
+        <tui-doc-example
+            id="full"
+            heading="Full"
+            [content]="example1"
+        >
+            <tui-block-details-example-1></tui-block-details-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="customization"
+            heading="Customization"
+            [content]="example2"
+        >
+            <tui-block-details-example-2></tui-block-details-example-2>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p>Import module:</p>
+
+                <tui-doc-code
+                    filename="my.module.ts"
+                    [code]="exampleModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p>Add to the template:</p>
+
+                <tui-doc-code
+                    filename="my.component.html"
+                    [code]="exampleHtml"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>
diff --git a/projects/demo/src/modules/experimental/block-details/examples/1/index.html b/projects/demo/src/modules/experimental/block-details/examples/1/index.html
new file mode 100644
index 000000000000..f36b040d6740
--- /dev/null
+++ b/projects/demo/src/modules/experimental/block-details/examples/1/index.html
@@ -0,0 +1,18 @@
+<div tuiBlockDetails>
+    <tui-avatar
+        src="JW"
+        [size]="isMobile ? 'xl' : 'xxl'"
+    ></tui-avatar>
+    <h2 tuiTitle>
+        John W
+        <div tuiSubtitle>money transfers</div>
+    </h2>
+
+    <span>{{ -1050 | tuiAmount: 'USD' | async }}</span>
+    <span tuiAmountDescription>today</span>
+    <span tuiComment>Birthday gift</span>
+    <div tuiAccessories>
+        <tui-badge appearance="neutral">private</tui-badge>
+        <tui-badge appearance="default">fast</tui-badge>
+    </div>
+</div>
diff --git a/projects/demo/src/modules/experimental/block-details/examples/1/index.less b/projects/demo/src/modules/experimental/block-details/examples/1/index.less
new file mode 100644
index 000000000000..57dca5a052c0
--- /dev/null
+++ b/projects/demo/src/modules/experimental/block-details/examples/1/index.less
@@ -0,0 +1,3 @@
+:host {
+    width: 15rem;
+}
diff --git a/projects/demo/src/modules/experimental/block-details/examples/1/index.ts b/projects/demo/src/modules/experimental/block-details/examples/1/index.ts
new file mode 100644
index 000000000000..1b72d582ae91
--- /dev/null
+++ b/projects/demo/src/modules/experimental/block-details/examples/1/index.ts
@@ -0,0 +1,15 @@
+import {Component, Inject} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TUI_IS_MOBILE} from '@taiga-ui/cdk';
+
+@Component({
+    selector: 'tui-block-details-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiBlockDetailsExample1 {
+    constructor(@Inject(TUI_IS_MOBILE) readonly isMobile: boolean) {}
+}
diff --git a/projects/demo/src/modules/experimental/block-details/examples/2/index.html b/projects/demo/src/modules/experimental/block-details/examples/2/index.html
new file mode 100644
index 000000000000..c8c4ba346407
--- /dev/null
+++ b/projects/demo/src/modules/experimental/block-details/examples/2/index.html
@@ -0,0 +1,37 @@
+<div>
+    <div tuiBlockDetails>
+        <tui-avatar
+            src="tuiIconGiftLarge"
+            [size]="isMobile ? 'xl' : 'xxl'"
+        ></tui-avatar>
+        <h2 tuiTitle>
+            Auchan
+            <div tuiSubtitle>grocery &#x2022; MMC 5350</div>
+        </h2>
+
+        <span [style.color]="'var(--tui-positive)'">{{ 0.5 | tuiAmount: 'USD' | async }}</span>
+        <span
+            tuiAmountDescription
+            tuiFade
+        >
+            promotion (long value with fade)
+        </span>
+
+        <tui-badge appearance="neutral">cashback</tui-badge>
+    </div>
+</div>
+
+<div>
+    <div tuiBlockDetails>
+        <tui-avatar
+            src="tuiIconStarLarge"
+            [size]="isMobile ? 'xl' : 'xxl'"
+        ></tui-avatar>
+        <h2 tuiTitle>
+            Uber
+            <div tuiSubtitle>taxi &#x2022; MMC 5550</div>
+        </h2>
+
+        <span [style.color]="'var(--tui-negative)'">{{ -10.5 | tuiAmount: 'USD' | async }}</span>
+    </div>
+</div>
diff --git a/projects/demo/src/modules/experimental/block-details/examples/2/index.less b/projects/demo/src/modules/experimental/block-details/examples/2/index.less
new file mode 100644
index 000000000000..0cd370f6dc0f
--- /dev/null
+++ b/projects/demo/src/modules/experimental/block-details/examples/2/index.less
@@ -0,0 +1,10 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 5rem;
+}
+
+[tuiAmountDescription] {
+    white-space: nowrap;
+    max-width: 7rem;
+}
diff --git a/projects/demo/src/modules/experimental/block-details/examples/2/index.ts b/projects/demo/src/modules/experimental/block-details/examples/2/index.ts
new file mode 100644
index 000000000000..f49f46be8051
--- /dev/null
+++ b/projects/demo/src/modules/experimental/block-details/examples/2/index.ts
@@ -0,0 +1,17 @@
+import {Component, Inject} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TUI_IS_MOBILE} from '@taiga-ui/cdk';
+import {tuiAmountOptionsProvider} from '@taiga-ui/experimental';
+
+@Component({
+    selector: 'tui-block-details-example-2',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+    providers: [tuiAmountOptionsProvider({sign: 'always'})],
+})
+export class TuiBlockDetailsExample2 {
+    constructor(@Inject(TUI_IS_MOBILE) readonly isMobile: boolean) {}
+}
diff --git a/projects/demo/src/modules/experimental/block-details/examples/import/import-module.md b/projects/demo/src/modules/experimental/block-details/examples/import/import-module.md
new file mode 100644
index 000000000000..1504eaec2498
--- /dev/null
+++ b/projects/demo/src/modules/experimental/block-details/examples/import/import-module.md
@@ -0,0 +1,13 @@
+```ts
+import {NgModule} from '@angular/core';
+import {TuiBlockDetailsModule} from '@taiga-ui/experimental';
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiBlockDetailsModule,
+  ],
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/experimental/block-details/examples/import/insert-template.md b/projects/demo/src/modules/experimental/block-details/examples/import/insert-template.md
new file mode 100644
index 000000000000..2de33bd2abe3
--- /dev/null
+++ b/projects/demo/src/modules/experimental/block-details/examples/import/insert-template.md
@@ -0,0 +1,14 @@
+```html
+<div tuiBlockDetails>
+  <tui-avatar></tui-avatar>
+  <h2 tuiTitle>
+    Title
+    <div tuiSubtitle>Subtitle</div>
+  </h2>
+
+  <span>{{ amount }} | tuiAmount: 'USD' | async }}</span>
+  <span tuiAmountDescription>description</span>
+  <span tuiComment>comment</span>
+  <tui-badge appearance="neutral">Badge</tui-badge>
+</div>
+```
diff --git a/projects/experimental/directives/block-details/block-details.component.ts b/projects/experimental/directives/block-details/block-details.component.ts
new file mode 100644
index 000000000000..705fca6dab83
--- /dev/null
+++ b/projects/experimental/directives/block-details/block-details.component.ts
@@ -0,0 +1,12 @@
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    template: '',
+    styleUrls: ['./block-details.style.less'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        class: 'tui-block-details-styles',
+    },
+})
+export class TuiBlockDetailsComponent {}
diff --git a/projects/experimental/directives/block-details/block-details.directive.ts b/projects/experimental/directives/block-details/block-details.directive.ts
new file mode 100644
index 000000000000..d00c74fdbabb
--- /dev/null
+++ b/projects/experimental/directives/block-details/block-details.directive.ts
@@ -0,0 +1,15 @@
+import {Directive, Inject} from '@angular/core';
+import {TuiDirectiveStylesService} from '@taiga-ui/cdk';
+
+import {TuiBlockDetailsComponent} from './block-details.component';
+
+@Directive({
+    selector: '[tuiBlockDetails]',
+})
+export class TuiBlockDetailsDirective {
+    constructor(
+        @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService,
+    ) {
+        directiveStyles.addComponent(TuiBlockDetailsComponent);
+    }
+}
diff --git a/projects/experimental/directives/block-details/block-details.module.ts b/projects/experimental/directives/block-details/block-details.module.ts
new file mode 100644
index 000000000000..92e7ac7300c5
--- /dev/null
+++ b/projects/experimental/directives/block-details/block-details.module.ts
@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core';
+
+import {TuiBlockDetailsComponent} from './block-details.component';
+import {TuiBlockDetailsDirective} from './block-details.directive';
+
+@NgModule({
+    declarations: [TuiBlockDetailsDirective, TuiBlockDetailsComponent],
+    exports: [TuiBlockDetailsDirective],
+})
+export class TuiBlockDetailsModule {}
diff --git a/projects/experimental/directives/block-details/block-details.style.less b/projects/experimental/directives/block-details/block-details.style.less
new file mode 100644
index 000000000000..335941818852
--- /dev/null
+++ b/projects/experimental/directives/block-details/block-details.style.less
@@ -0,0 +1,72 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+[tuiBlockDetails] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font: var(--tui-font-heading-3);
+    width: 100%;
+
+    [tuiTitle] {
+        text-align: center;
+        font: var(--tui-font-text-l);
+    }
+
+    [tuiSubtitle],
+    [tuiAmountDescription] {
+        font: var(--tui-font-text-m);
+        color: var(--tui-text-02);
+
+        :host-context(tui-root._mobile) & {
+            font: var(--tui-font-text-s);
+        }
+    }
+
+    [tuiAmountDescription] {
+        margin-top: 0.25rem;
+    }
+
+    [tuiComment] {
+        position: relative;
+        font: var(--tui-font-text-m);
+        color: var(--tui-text-01-night);
+        padding: 0.5rem 0.75rem;
+        border-radius: 1rem;
+        line-height: 1rem;
+        background: var(--tui-accent);
+        margin-top: 1.0625rem;
+    }
+
+    [tuiComment]:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 50%;
+        width: 1.5625rem;
+        height: 0.5625rem;
+        background: var(--tui-accent);
+        transform: translate(-50%, -100%);
+        mask: url("data:image/svg+xml,%3Csvg width='25' height='9' viewBox='0 0 25 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.23309 6.67813L7.56191 3.83178C9.4546 1.5185 10.4009 0.361853 11.5998 0.10488C12.0834 0.00123882 12.5834 0.00123882 13.0669 0.10488C14.2658 0.361853 15.2121 1.5185 17.1048 3.83178L19.4337 6.67813C20.636 8.14771 22.4346 9 24.3334 9H0.333374C2.23217 9 4.0307 8.14772 5.23309 6.67813Z' fill='black'/%3E%3C/svg%3E%0A")
+            no-repeat;
+    }
+
+    [tuiAccessory] {
+        display: flex;
+        flex-gap: 0.5rem;
+        margin-top: 1.25rem
+    }
+
+    [tuiAccessories],tui-badge:only-of-type {
+        margin-top: 1.25rem;
+    }
+
+    [tuiAccessories] {
+        display: flex;
+        gap: 0.5rem;
+    }
+
+    tui-avatar,
+    [tuiTitle] {
+        margin-bottom: 1rem;
+    }
+}
diff --git a/projects/experimental/directives/block-details/index.ts b/projects/experimental/directives/block-details/index.ts
new file mode 100644
index 000000000000..470f9b55e088
--- /dev/null
+++ b/projects/experimental/directives/block-details/index.ts
@@ -0,0 +1,3 @@
+export * from './block-details.component';
+export * from './block-details.directive';
+export * from './block-details.module';
diff --git a/projects/experimental/directives/block-details/ng-package.json b/projects/experimental/directives/block-details/ng-package.json
new file mode 100644
index 000000000000..bebf62dcb5e5
--- /dev/null
+++ b/projects/experimental/directives/block-details/ng-package.json
@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}
diff --git a/projects/experimental/directives/index.ts b/projects/experimental/directives/index.ts
index 7d2856ccfe8b..b3929688a28e 100644
--- a/projects/experimental/directives/index.ts
+++ b/projects/experimental/directives/index.ts
@@ -1,4 +1,5 @@
 export * from '@taiga-ui/experimental/directives/appearance';
+export * from '@taiga-ui/experimental/directives/block-details';
 export * from '@taiga-ui/experimental/directives/button-close';
 export * from '@taiga-ui/experimental/directives/button-group';
 export * from '@taiga-ui/experimental/directives/button-vertical';