From 93b51ff5fa394f1a7dcc7873fcf8bb26978248e1 Mon Sep 17 00:00:00 2001
From: Alex Inkin <alexander@inkin.ru>
Date: Wed, 25 Oct 2023 20:57:39 +0400
Subject: [PATCH] feat(layout): `Title` add new component (#5743)

---
 projects/demo/src/modules/app/app.routes.ts   |  8 +++
 projects/demo/src/modules/app/pages.ts        |  6 ++
 .../directives/title/examples/1/index.html    | 17 ++++++
 .../directives/title/examples/1/index.less    |  5 ++
 .../directives/title/examples/1/index.ts      | 12 ++++
 .../directives/title/examples/2/index.html    | 15 +++++
 .../directives/title/examples/2/index.less    |  5 ++
 .../directives/title/examples/2/index.ts      | 12 ++++
 .../directives/title/examples/3/index.html    | 36 ++++++++++++
 .../directives/title/examples/3/index.less    | 14 +++++
 .../directives/title/examples/3/index.ts      | 12 ++++
 .../title/examples/import/import-module.md    | 14 +++++
 .../title/examples/import/insert-template.md  | 16 ++++++
 .../directives/title/title.component.ts       | 29 ++++++++++
 .../modules/directives/title/title.module.ts  | 31 +++++++++++
 .../directives/title/title.template.html      | 55 +++++++++++++++++++
 .../experimental/avatar/avatar.template.html  |  2 +-
 .../badge-notification.template.html          |  2 +-
 .../experimental/badge/badge.template.html    |  2 +-
 .../badged-content.template.html              |  2 +-
 .../checkbox/checkbox.template.html           |  2 +-
 .../experimental/fade/fade.template.html      |  2 +-
 .../experimental/radio/radio.template.html    |  2 +-
 .../sensitive/sensitive.template.html         |  2 +-
 .../experimental/toggle/toggle.template.html  |  2 +-
 projects/layout/components/index.ts           |  1 +
 projects/layout/components/title/index.ts     |  3 +
 .../layout/components/title/ng-package.json   |  8 +++
 .../components/title/title.component.ts       | 10 ++++
 .../components/title/title.directive.ts       | 24 ++++++++
 .../layout/components/title/title.module.ts   | 10 ++++
 .../layout/components/title/title.style.less  | 47 ++++++++++++++++
 32 files changed, 399 insertions(+), 9 deletions(-)
 create mode 100644 projects/demo/src/modules/directives/title/examples/1/index.html
 create mode 100644 projects/demo/src/modules/directives/title/examples/1/index.less
 create mode 100644 projects/demo/src/modules/directives/title/examples/1/index.ts
 create mode 100644 projects/demo/src/modules/directives/title/examples/2/index.html
 create mode 100644 projects/demo/src/modules/directives/title/examples/2/index.less
 create mode 100644 projects/demo/src/modules/directives/title/examples/2/index.ts
 create mode 100644 projects/demo/src/modules/directives/title/examples/3/index.html
 create mode 100644 projects/demo/src/modules/directives/title/examples/3/index.less
 create mode 100644 projects/demo/src/modules/directives/title/examples/3/index.ts
 create mode 100644 projects/demo/src/modules/directives/title/examples/import/import-module.md
 create mode 100644 projects/demo/src/modules/directives/title/examples/import/insert-template.md
 create mode 100644 projects/demo/src/modules/directives/title/title.component.ts
 create mode 100644 projects/demo/src/modules/directives/title/title.module.ts
 create mode 100644 projects/demo/src/modules/directives/title/title.template.html
 create mode 100644 projects/layout/components/title/index.ts
 create mode 100644 projects/layout/components/title/ng-package.json
 create mode 100644 projects/layout/components/title/title.component.ts
 create mode 100644 projects/layout/components/title/title.directive.ts
 create mode 100644 projects/layout/components/title/title.module.ts
 create mode 100644 projects/layout/components/title/title.style.less

diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index 50654d762791..4eca2812033c 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -207,6 +207,14 @@ 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 () =>
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index 8e20047c1b32..830214ca1561 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -172,6 +172,12 @@ 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`,
diff --git a/projects/demo/src/modules/directives/title/examples/1/index.html b/projects/demo/src/modules/directives/title/examples/1/index.html
new file mode 100644
index 000000000000..ecfaef7460dc
--- /dev/null
+++ b/projects/demo/src/modules/directives/title/examples/1/index.html
@@ -0,0 +1,17 @@
+<h2 tuiTitle>I am a title</h2>
+
+<h2 tuiTitle>
+    I am a title
+    <div tuiSubtitle>I'm a subtitle</div>
+</h2>
+
+<h2 tuiTitle>
+    <div tuiSubtitle>Caption</div>
+    I am a title
+</h2>
+
+<h2 tuiTitle>
+    <div tuiSubtitle>Caption</div>
+    I am a title
+    <div tuiSubtitle>I'm a subtitle</div>
+</h2>
diff --git a/projects/demo/src/modules/directives/title/examples/1/index.less b/projects/demo/src/modules/directives/title/examples/1/index.less
new file mode 100644
index 000000000000..dc3140046ad7
--- /dev/null
+++ b/projects/demo/src/modules/directives/title/examples/1/index.less
@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
diff --git a/projects/demo/src/modules/directives/title/examples/1/index.ts b/projects/demo/src/modules/directives/title/examples/1/index.ts
new file mode 100644
index 000000000000..2175117da266
--- /dev/null
+++ b/projects/demo/src/modules/directives/title/examples/1/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-title-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiTitleExample1 {}
diff --git a/projects/demo/src/modules/directives/title/examples/2/index.html b/projects/demo/src/modules/directives/title/examples/2/index.html
new file mode 100644
index 000000000000..a022043fd460
--- /dev/null
+++ b/projects/demo/src/modules/directives/title/examples/2/index.html
@@ -0,0 +1,15 @@
+<h2 tuiTitle="s">
+    <div tuiSubtitle>Caption</div>
+    I am a title
+    <div tuiSubtitle>I'm a subtitle</div>
+</h2>
+
+<h2 tuiTitle="m">
+    <div tuiSubtitle>Caption</div>
+    I am a title
+</h2>
+
+<h2 tuiTitle="l">
+    I am a title
+    <div tuiSubtitle>I'm a subtitle</div>
+</h2>
diff --git a/projects/demo/src/modules/directives/title/examples/2/index.less b/projects/demo/src/modules/directives/title/examples/2/index.less
new file mode 100644
index 000000000000..dc3140046ad7
--- /dev/null
+++ b/projects/demo/src/modules/directives/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/directives/title/examples/2/index.ts
new file mode 100644
index 000000000000..262fab7c000b
--- /dev/null
+++ b/projects/demo/src/modules/directives/title/examples/2/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-title-example-2',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiTitleExample2 {}
diff --git a/projects/demo/src/modules/directives/title/examples/3/index.html b/projects/demo/src/modules/directives/title/examples/3/index.html
new file mode 100644
index 000000000000..272d87ceb271
--- /dev/null
+++ b/projects/demo/src/modules/directives/title/examples/3/index.html
@@ -0,0 +1,36 @@
+<h2 tuiTitle>
+    <b>I am a title</b>
+    <div
+        tuiSubtitle
+        [style.color]="'var(--tui-text-02)'"
+    >
+        I'm a subtitle
+    </div>
+</h2>
+
+<a
+    href="https://github.com/taiga-family/taiga-ui"
+    tuiLink
+    tuiTitle
+    [style.font-size.rem]="1"
+    [style.line-height.rem]="1.25"
+>
+    Taiga UI — GitHub
+    <div
+        tuiSubtitle
+        [style.font]="'var(--tui-font-text-s)'"
+    >
+        Drop us a star!
+    </div>
+</a>
+
+<label class="flex">
+    <tui-avatar
+        size="s"
+        src="/assets/images/avatar.jpg"
+    ></tui-avatar>
+    <div tuiTitle="s">
+        <strong>Alex Inkin</strong>
+        <div tuiSubtitle>Available</div>
+    </div>
+</label>
diff --git a/projects/demo/src/modules/directives/title/examples/3/index.less b/projects/demo/src/modules/directives/title/examples/3/index.less
new file mode 100644
index 000000000000..1ac9943dc392
--- /dev/null
+++ b/projects/demo/src/modules/directives/title/examples/3/index.less
@@ -0,0 +1,14 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.flex {
+    display: flex;
+    gap: 0.5rem;
+
+    [tuiSubtitle] {
+        color: var(--tui-positive);
+    }
+}
diff --git a/projects/demo/src/modules/directives/title/examples/3/index.ts b/projects/demo/src/modules/directives/title/examples/3/index.ts
new file mode 100644
index 000000000000..726df980d172
--- /dev/null
+++ b/projects/demo/src/modules/directives/title/examples/3/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-title-example-3',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiTitleExample3 {}
diff --git a/projects/demo/src/modules/directives/title/examples/import/import-module.md b/projects/demo/src/modules/directives/title/examples/import/import-module.md
new file mode 100644
index 000000000000..1bcbc128db53
--- /dev/null
+++ b/projects/demo/src/modules/directives/title/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiTitleModule} from '@taiga-ui/layout';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiTitleModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/directives/title/examples/import/insert-template.md b/projects/demo/src/modules/directives/title/examples/import/insert-template.md
new file mode 100644
index 000000000000..d490977b31c0
--- /dev/null
+++ b/projects/demo/src/modules/directives/title/examples/import/insert-template.md
@@ -0,0 +1,16 @@
+```html
+<tui-block-status [card]="card">
+  <img
+    tuiSlot="top"
+    src="src"
+  />
+  <h4>Title</h4>
+  Description
+  <button
+    tuiButton
+    tuiItem
+  >
+    Button
+  </button>
+</tui-block-status>
+```
diff --git a/projects/demo/src/modules/directives/title/title.component.ts b/projects/demo/src/modules/directives/title/title.component.ts
new file mode 100644
index 000000000000..a71aea710c22
--- /dev/null
+++ b/projects/demo/src/modules/directives/title/title.component.ts
@@ -0,0 +1,29 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
+
+@Component({
+    selector: 'example-title',
+    templateUrl: './title.template.html',
+    changeDetection,
+})
+export class ExampleTuiTitleComponent {
+    readonly exampleModule = import('./examples/import/import-module.md?raw');
+    readonly exampleHtml = import('./examples/import/insert-template.md?raw');
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('./examples/1/index.ts?raw'),
+        HTML: import('./examples/1/index.html?raw'),
+    };
+
+    readonly example2: TuiDocExample = {
+        TypeScript: import('./examples/2/index.ts?raw'),
+        HTML: import('./examples/3/index.html?raw'),
+    };
+
+    readonly example3: TuiDocExample = {
+        TypeScript: import('./examples/3/index.ts?raw'),
+        HTML: import('./examples/3/index.html?raw'),
+        LESS: import('./examples/3/index.less?raw'),
+    };
+}
diff --git a/projects/demo/src/modules/directives/title/title.module.ts b/projects/demo/src/modules/directives/title/title.module.ts
new file mode 100644
index 000000000000..fa84c491296d
--- /dev/null
+++ b/projects/demo/src/modules/directives/title/title.module.ts
@@ -0,0 +1,31 @@
+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 {TuiTitleExample1} from './examples/1';
+import {TuiTitleExample2} from './examples/2';
+import {TuiTitleExample3} from './examples/3';
+import {ExampleTuiTitleComponent} from './title.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiTitleModule,
+        tuiGetDocModules(ExampleTuiTitleComponent),
+        TuiLinkModule,
+        TuiCheckboxModule,
+        TuiWrapperModule,
+        TuiAvatarModule,
+    ],
+    declarations: [
+        ExampleTuiTitleComponent,
+        TuiTitleExample1,
+        TuiTitleExample2,
+        TuiTitleExample3,
+    ],
+    exports: [ExampleTuiTitleComponent],
+})
+export class ExampleTuiTitleModule {}
diff --git a/projects/demo/src/modules/directives/title/title.template.html b/projects/demo/src/modules/directives/title/title.template.html
new file mode 100644
index 000000000000..93d7457089c9
--- /dev/null
+++ b/projects/demo/src/modules/directives/title/title.template.html
@@ -0,0 +1,55 @@
+<tui-doc-page
+    header="Title"
+    package="LAYOUT"
+    type="components"
+>
+    <ng-template pageTab>
+        <p>A directive for title with optional subtitle</p>
+
+        <tui-doc-example
+            id="base"
+            heading="Basic"
+            [content]="example1"
+        >
+            <tui-title-example-1></tui-title-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="sizes"
+            heading="Sizes"
+            [content]="example2"
+        >
+            <tui-title-example-2></tui-title-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="custom"
+            heading="Custom"
+            [content]="example3"
+        >
+            <tui-title-example-3></tui-title-example-3>
+        </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/avatar/avatar.template.html b/projects/demo/src/modules/experimental/avatar/avatar.template.html
index a27f4371c19f..fd48af654ba1 100644
--- a/projects/demo/src/modules/experimental/avatar/avatar.template.html
+++ b/projects/demo/src/modules/experimental/avatar/avatar.template.html
@@ -108,7 +108,7 @@
     <ng-template pageTab>
         <ol class="b-demo-steps">
             <li>
-                <p>Import module</p>
+                <p>Import module:</p>
 
                 <tui-doc-code
                     filename="myComponent.module.ts"
diff --git a/projects/demo/src/modules/experimental/badge-notification/badge-notification.template.html b/projects/demo/src/modules/experimental/badge-notification/badge-notification.template.html
index 0732d659fbb4..11523ae8e6c3 100644
--- a/projects/demo/src/modules/experimental/badge-notification/badge-notification.template.html
+++ b/projects/demo/src/modules/experimental/badge-notification/badge-notification.template.html
@@ -56,7 +56,7 @@
     <ng-template pageTab>
         <ol class="b-demo-steps">
             <li>
-                <p>Import into a module</p>
+                <p>Import module:</p>
 
                 <tui-doc-code
                     filename="myComponent.module.ts"
diff --git a/projects/demo/src/modules/experimental/badge/badge.template.html b/projects/demo/src/modules/experimental/badge/badge.template.html
index 620e2eff4d95..27d785080e39 100644
--- a/projects/demo/src/modules/experimental/badge/badge.template.html
+++ b/projects/demo/src/modules/experimental/badge/badge.template.html
@@ -139,7 +139,7 @@
     <ng-template pageTab>
         <ol class="b-demo-steps">
             <li>
-                <p>Import into a module</p>
+                <p>Import module:</p>
 
                 <tui-doc-code
                     filename="myComponent.module.ts"
diff --git a/projects/demo/src/modules/experimental/badged-content/badged-content.template.html b/projects/demo/src/modules/experimental/badged-content/badged-content.template.html
index b50ad506f838..d5ff8b84a898 100644
--- a/projects/demo/src/modules/experimental/badged-content/badged-content.template.html
+++ b/projects/demo/src/modules/experimental/badged-content/badged-content.template.html
@@ -74,7 +74,7 @@
     <ng-template pageTab>
         <ol class="b-demo-steps">
             <li>
-                <p>Import into a module</p>
+                <p>Import module:</p>
 
                 <tui-doc-code
                     filename="myComponent.module.ts"
diff --git a/projects/demo/src/modules/experimental/checkbox/checkbox.template.html b/projects/demo/src/modules/experimental/checkbox/checkbox.template.html
index 9ab3e8d55c3a..7762212a19a8 100644
--- a/projects/demo/src/modules/experimental/checkbox/checkbox.template.html
+++ b/projects/demo/src/modules/experimental/checkbox/checkbox.template.html
@@ -29,7 +29,7 @@
     <ng-template pageTab="Setup">
         <ol class="b-demo-steps">
             <li>
-                <p>Import module</p>
+                <p>Import module:</p>
 
                 <tui-doc-code
                     filename="myComponent.module.ts"
diff --git a/projects/demo/src/modules/experimental/fade/fade.template.html b/projects/demo/src/modules/experimental/fade/fade.template.html
index 9092a014ec0e..2ab59db0f316 100644
--- a/projects/demo/src/modules/experimental/fade/fade.template.html
+++ b/projects/demo/src/modules/experimental/fade/fade.template.html
@@ -89,7 +89,7 @@
     <ng-template pageTab>
         <ol class="b-demo-steps">
             <li>
-                <p>Import module</p>
+                <p>Import module:</p>
 
                 <tui-doc-code
                     filename="myComponent.module.ts"
diff --git a/projects/demo/src/modules/experimental/radio/radio.template.html b/projects/demo/src/modules/experimental/radio/radio.template.html
index edef1085e6eb..b8ded5cc53d7 100644
--- a/projects/demo/src/modules/experimental/radio/radio.template.html
+++ b/projects/demo/src/modules/experimental/radio/radio.template.html
@@ -29,7 +29,7 @@
     <ng-template pageTab="Setup">
         <ol class="b-demo-steps">
             <li>
-                <p>Import module</p>
+                <p>Import module:</p>
 
                 <tui-doc-code
                     filename="myComponent.module.ts"
diff --git a/projects/demo/src/modules/experimental/sensitive/sensitive.template.html b/projects/demo/src/modules/experimental/sensitive/sensitive.template.html
index ff9e194a4bd8..265a39c58e68 100644
--- a/projects/demo/src/modules/experimental/sensitive/sensitive.template.html
+++ b/projects/demo/src/modules/experimental/sensitive/sensitive.template.html
@@ -51,7 +51,7 @@
     <ng-template pageTab>
         <ol class="b-demo-steps">
             <li>
-                <p>Import into a module</p>
+                <p>Import module:</p>
 
                 <tui-doc-code
                     filename="myComponent.module.ts"
diff --git a/projects/demo/src/modules/experimental/toggle/toggle.template.html b/projects/demo/src/modules/experimental/toggle/toggle.template.html
index 63f674bc2972..28992747f914 100644
--- a/projects/demo/src/modules/experimental/toggle/toggle.template.html
+++ b/projects/demo/src/modules/experimental/toggle/toggle.template.html
@@ -29,7 +29,7 @@
     <ng-template pageTab="Setup">
         <ol class="b-demo-steps">
             <li>
-                <p>Import module</p>
+                <p>Import module:</p>
 
                 <tui-doc-code
                     filename="myComponent.module.ts"
diff --git a/projects/layout/components/index.ts b/projects/layout/components/index.ts
index 45b3c6d90361..8becae85e0aa 100644
--- a/projects/layout/components/index.ts
+++ b/projects/layout/components/index.ts
@@ -1 +1,2 @@
 export * from '@taiga-ui/layout/components/block-status';
+export * from '@taiga-ui/layout/components/title';
diff --git a/projects/layout/components/title/index.ts b/projects/layout/components/title/index.ts
new file mode 100644
index 000000000000..0f1893ef0d21
--- /dev/null
+++ b/projects/layout/components/title/index.ts
@@ -0,0 +1,3 @@
+export * from './title.component';
+export * from './title.directive';
+export * from './title.module';
diff --git a/projects/layout/components/title/ng-package.json b/projects/layout/components/title/ng-package.json
new file mode 100644
index 000000000000..bab5ebcdb74a
--- /dev/null
+++ b/projects/layout/components/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/layout/components/title/title.component.ts
new file mode 100644
index 000000000000..e356c5179bfa
--- /dev/null
+++ b/projects/layout/components/title/title.component.ts
@@ -0,0 +1,10 @@
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    host: {class: 'tui-title'},
+    template: '',
+    styleUrls: ['./title.style.less'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+})
+export class TuiTitleComponent {}
diff --git a/projects/layout/components/title/title.directive.ts b/projects/layout/components/title/title.directive.ts
new file mode 100644
index 000000000000..e16ab2fff036
--- /dev/null
+++ b/projects/layout/components/title/title.directive.ts
@@ -0,0 +1,24 @@
+import {Directive, Inject, Input} from '@angular/core';
+import {TUI_PLATFORM, TuiDirectiveStylesService, TuiPlatform} from '@taiga-ui/cdk';
+import {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
+
+import {TuiTitleComponent} from './title.component';
+
+@Directive({
+    selector: '[tuiTitle], [tuiSubtitle]',
+    host: {
+        '[attr.data-size]': 'size || null',
+        '[attr.data-platform]': 'platform',
+    },
+})
+export class TuiTitleDirective {
+    @Input('tuiTitle')
+    size: TuiSizeL | TuiSizeS | '' = '';
+
+    constructor(
+        @Inject(TUI_PLATFORM) readonly platform: TuiPlatform,
+        @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService,
+    ) {
+        directiveStyles.addComponent(TuiTitleComponent);
+    }
+}
diff --git a/projects/layout/components/title/title.module.ts b/projects/layout/components/title/title.module.ts
new file mode 100644
index 000000000000..dbdda1e2347a
--- /dev/null
+++ b/projects/layout/components/title/title.module.ts
@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core';
+
+import {TuiTitleComponent} from './title.component';
+import {TuiTitleDirective} from './title.directive';
+
+@NgModule({
+    declarations: [TuiTitleDirective, TuiTitleComponent],
+    exports: [TuiTitleDirective],
+})
+export class TuiTitleModule {}
diff --git a/projects/layout/components/title/title.style.less b/projects/layout/components/title/title.style.less
new file mode 100644
index 000000000000..fc78c49710f3
--- /dev/null
+++ b/projects/layout/components/title/title.style.less
@@ -0,0 +1,47 @@
+[tuiTitle] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    margin: 0;
+    font: var(--tui-font-text-m-2);
+
+    &[data-size='s'] {
+        gap: 0.125rem;
+        font: var(--tui-font-text-s);
+
+        [tuiSubtitle] {
+            font: var(--tui-font-text-xs);
+        }
+    }
+
+    &[data-size='m'] {
+        gap: 0.125rem;
+        font: var(--tui-font-heading-5);
+
+        [tuiSubtitle] {
+            font: var(--tui-font-text-m);
+        }
+    }
+
+    &[data-size='l'] {
+        gap: 0.5rem;
+        font: var(--tui-font-heading-3);
+
+        [tuiSubtitle] {
+            font: var(--tui-font-text-m);
+        }
+    }
+
+    &[data-platform='ios'],
+    &[data-platform='android'] {
+        gap: 0.25rem;
+
+        [tuiSubtitle] {
+            color: var(--tui-text-02);
+        }
+    }
+}
+
+[tuiSubtitle] {
+    font: var(--tui-font-text-s-2);
+}