From 2098aa487f7f39a0c0babe860c1a42e6ec0ceef1 Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Sun, 15 Sep 2024 22:01:48 +0300
Subject: [PATCH] feat(demo): `Cell` add example with `Connected` `CardLarge`

---
 .../components/cell/examples/8/index.html     | 36 +++++++++++++++----
 .../components/cell/examples/8/index.ts       |  3 +-
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/projects/demo/src/modules/components/cell/examples/8/index.html b/projects/demo/src/modules/components/cell/examples/8/index.html
index d27e6dc0d584..0bec34f13915 100644
--- a/projects/demo/src/modules/components/cell/examples/8/index.html
+++ b/projects/demo/src/modules/components/cell/examples/8/index.html
@@ -1,3 +1,32 @@
+<tui-notification>
+    <div>
+        Can be attached as host directive:
+        <code>hostDirectives: [TuiConnected]</code>
+    </div>
+</tui-notification>
+
+<div
+    tuiCardLarge
+    tuiConnected
+    tuiSurface="elevated"
+>
+    <h3 tuiTitle="m">Inside a block</h3>
+    <button
+        *ngFor="let item of items"
+        tuiCell
+        type="button"
+    >
+        <tui-avatar
+            appearance="accent"
+            [src]="item.icon"
+        />
+        <span tuiTitle>
+            {{ item.title }}
+            <span tuiSubtitle>{{ item.subtitle }}</span>
+        </span>
+    </button>
+</div>
+
 <div tuiConnected>
     <label tuiCell>
         <tui-badged-content>
@@ -68,10 +97,3 @@
         />
     </label>
 </div>
-
-<tui-notification>
-    <div>
-        Can be attached as host directive:
-        <code>hostDirectives: [TuiConnected]</code>
-    </div>
-</tui-notification>
diff --git a/projects/demo/src/modules/components/cell/examples/8/index.ts b/projects/demo/src/modules/components/cell/examples/8/index.ts
index deeaba5d8adb..87599491cd85 100644
--- a/projects/demo/src/modules/components/cell/examples/8/index.ts
+++ b/projects/demo/src/modules/components/cell/examples/8/index.ts
@@ -50,7 +50,8 @@ export default class Example {
         {
             icon: '@tui.mail',
             title: 'Send message',
-            subtitle: 'Keep it short',
+            subtitle:
+                'Allow outgoing unusual call that can change your life in an unusual way',
         },
         {
             icon: '@tui.lock',