From 29f8a2c1c211636db6b414a1b9f3f2c16fc7172b Mon Sep 17 00:00:00 2001
From: splincode <omaxphp@yandex.ru>
Date: Fri, 27 Oct 2023 12:26:02 +0300
Subject: [PATCH] feat(experimental): add `TuiCard`

---
 projects/demo/src/assets/images/fly.svg       | 132 ++++++++++++++++++
 projects/demo/src/assets/images/google.svg    |  21 +++
 projects/demo/src/assets/images/microsoft.svg |   7 +
 projects/demo/src/assets/images/poster.svg    | 110 +++++++++++++++
 projects/demo/src/modules/app/app.routes.ts   |   8 ++
 projects/demo/src/modules/app/pages.ts        |   6 +
 .../experimental/card/card.component.ts       |  60 ++++++++
 .../modules/experimental/card/card.module.ts  |  69 +++++++++
 .../experimental/card/card.template.html      |  92 ++++++++++++
 .../experimental/card/examples/1/index.html   |  28 ++++
 .../experimental/card/examples/1/index.less   |   9 ++
 .../experimental/card/examples/1/index.ts     |  12 ++
 .../experimental/card/examples/2/index.html   |  23 +++
 .../experimental/card/examples/2/index.less   |  10 ++
 .../experimental/card/examples/2/index.ts     |  12 ++
 .../experimental/card/examples/3/index.html   |  33 +++++
 .../experimental/card/examples/3/index.less   |   9 ++
 .../experimental/card/examples/3/index.ts     |  12 ++
 .../experimental/card/examples/4/index.html   |  33 +++++
 .../experimental/card/examples/4/index.less   |   4 +
 .../experimental/card/examples/4/index.ts     |  18 +++
 .../experimental/card/examples/5/index.html   |  74 ++++++++++
 .../experimental/card/examples/5/index.less   |  82 +++++++++++
 .../experimental/card/examples/5/index.ts     |  12 ++
 .../experimental/card/examples/6/index.html   |  51 +++++++
 .../experimental/card/examples/6/index.less   |  27 ++++
 .../experimental/card/examples/6/index.ts     |  12 ++
 .../experimental/card/examples/7/index.html   |  93 ++++++++++++
 .../experimental/card/examples/7/index.less   |  36 +++++
 .../experimental/card/examples/7/index.ts     |  14 ++
 .../card/examples/import/import-module.md     |  13 ++
 .../card/examples/import/insert-template.md   |  13 ++
 projects/demo/used-icons.ts                   |   6 +-
 .../directives/card/card.component.ts         |  12 ++
 .../directives/card/card.directive.ts         |  23 +++
 .../directives/card/card.module.ts            |  10 ++
 .../directives/card/card.styles.less          |  28 ++++
 .../experimental/directives/card/index.ts     |   3 +
 .../directives/card/ng-package.json           |   8 ++
 projects/experimental/directives/index.ts     |   1 +
 40 files changed, 1224 insertions(+), 2 deletions(-)
 create mode 100644 projects/demo/src/assets/images/fly.svg
 create mode 100644 projects/demo/src/assets/images/google.svg
 create mode 100644 projects/demo/src/assets/images/microsoft.svg
 create mode 100644 projects/demo/src/assets/images/poster.svg
 create mode 100644 projects/demo/src/modules/experimental/card/card.component.ts
 create mode 100644 projects/demo/src/modules/experimental/card/card.module.ts
 create mode 100644 projects/demo/src/modules/experimental/card/card.template.html
 create mode 100644 projects/demo/src/modules/experimental/card/examples/1/index.html
 create mode 100644 projects/demo/src/modules/experimental/card/examples/1/index.less
 create mode 100644 projects/demo/src/modules/experimental/card/examples/1/index.ts
 create mode 100644 projects/demo/src/modules/experimental/card/examples/2/index.html
 create mode 100644 projects/demo/src/modules/experimental/card/examples/2/index.less
 create mode 100644 projects/demo/src/modules/experimental/card/examples/2/index.ts
 create mode 100644 projects/demo/src/modules/experimental/card/examples/3/index.html
 create mode 100644 projects/demo/src/modules/experimental/card/examples/3/index.less
 create mode 100644 projects/demo/src/modules/experimental/card/examples/3/index.ts
 create mode 100644 projects/demo/src/modules/experimental/card/examples/4/index.html
 create mode 100644 projects/demo/src/modules/experimental/card/examples/4/index.less
 create mode 100644 projects/demo/src/modules/experimental/card/examples/4/index.ts
 create mode 100644 projects/demo/src/modules/experimental/card/examples/5/index.html
 create mode 100644 projects/demo/src/modules/experimental/card/examples/5/index.less
 create mode 100644 projects/demo/src/modules/experimental/card/examples/5/index.ts
 create mode 100644 projects/demo/src/modules/experimental/card/examples/6/index.html
 create mode 100644 projects/demo/src/modules/experimental/card/examples/6/index.less
 create mode 100644 projects/demo/src/modules/experimental/card/examples/6/index.ts
 create mode 100644 projects/demo/src/modules/experimental/card/examples/7/index.html
 create mode 100644 projects/demo/src/modules/experimental/card/examples/7/index.less
 create mode 100644 projects/demo/src/modules/experimental/card/examples/7/index.ts
 create mode 100644 projects/demo/src/modules/experimental/card/examples/import/import-module.md
 create mode 100644 projects/demo/src/modules/experimental/card/examples/import/insert-template.md
 create mode 100644 projects/experimental/directives/card/card.component.ts
 create mode 100644 projects/experimental/directives/card/card.directive.ts
 create mode 100644 projects/experimental/directives/card/card.module.ts
 create mode 100644 projects/experimental/directives/card/card.styles.less
 create mode 100644 projects/experimental/directives/card/index.ts
 create mode 100644 projects/experimental/directives/card/ng-package.json

diff --git a/projects/demo/src/assets/images/fly.svg b/projects/demo/src/assets/images/fly.svg
new file mode 100644
index 0000000000000..1988adad5fec2
--- /dev/null
+++ b/projects/demo/src/assets/images/fly.svg
@@ -0,0 +1,132 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="89" height="78" viewBox="0 0 89 78" fill="none">
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M6.07434 0.285645V7.43229L0.314331 8.49896L0.741008 1.35231L6.07434 0.285645Z"
+        fill="url(#paint0_linear_150_2514)"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.741 20.979L3.72766 28.339L6.28765 38.579L23.6743 32.6057L16.741 20.979Z"
+        fill="#116EC3"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M62.0743 31.5389L35.301 44.9789L0.314331 8.49893L8.421 5.72559L62.0743 31.5389Z"
+        fill="url(#paint1_linear_150_2514)"
+    />
+    <path
+        d="M4.68768 38.6856C3.08768 38.4722 1.59434 36.8722 0.847678 34.7389C0.421011 33.5655 0.314357 32.2856 0.527691 31.2189C0.741024 29.8322 1.48768 28.8722 2.55435 28.5522C2.98102 28.4456 3.40769 28.3389 3.94102 28.4455C5.54102 28.6589 7.03434 30.2589 7.78101 32.3922C8.20768 33.5655 8.31435 34.8455 8.10101 35.9122C7.88768 37.2989 7.14102 38.2589 6.07435 38.5789C5.64769 38.6855 5.22102 38.7922 4.68768 38.6856Z"
+        fill="url(#paint2_linear_150_2514)"
+    />
+    <path
+        d="M5.61649 37.2983C6.7821 36.8836 7.13471 34.8826 6.40408 32.8289C5.67345 30.7752 4.13625 29.4465 2.97064 29.8612C1.80503 30.2759 1.45239 32.2769 2.18302 34.3306C2.91365 36.3843 4.45087 37.713 5.61649 37.2983Z"
+        fill="#116EC3"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M101.008 41.3522C101.008 41.3522 50.4477 62.5789 41.9144 65.7789C33.381 68.9789 20.3677 71.4322 14.821 71.2189C9.27436 71.0056 7.14103 70.5789 6.6077 68.3389C6.2877 66.8456 9.06103 63.5389 12.4744 59.3789C13.1144 58.6322 13.6477 57.8856 14.2877 57.2456C14.9277 56.3922 15.5677 55.6456 16.2077 54.7922C20.901 48.7122 25.381 45.9389 27.8344 44.5522C30.2877 43.1656 93.1144 19.3789 93.1144 19.3789L101.008 41.3522Z"
+        fill="url(#paint3_linear_150_2514)"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M26.661 60.4456C26.661 60.4456 22.0743 61.7256 19.5143 61.7256C17.061 61.7256 14.2877 61.7256 12.581 59.5923C12.4743 59.4856 12.4743 59.4856 12.3677 59.3789C13.0077 58.6323 13.541 57.8856 14.181 57.2456C14.3943 57.7789 14.9277 58.3123 16.2077 58.6323C19.301 59.4856 23.9944 58.3123 23.9944 58.3123L26.661 60.4456Z"
+        fill="#0E5BA2"
+    />
+    <path
+        d="M88.8477 35.8054C88.3144 35.9121 87.9944 35.5921 87.9944 35.0587L88.101 33.7788C88.101 33.2454 88.6344 32.8188 89.061 32.7121C89.5944 32.6054 89.9144 32.9254 89.9144 33.4587L89.8077 34.7387C89.8077 35.1654 89.381 35.6987 88.8477 35.8054Z"
+        fill="#1985D4"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M81.4877 57.2456L65.1677 69.6189L68.4744 82.8456L84.7944 75.1656C88.8477 73.2456 92.6877 71.1123 96.3144 68.5523L101.114 65.2456L81.4877 57.2456Z"
+        fill="#116EC3"
+    />
+    <path
+        d="M66.4476 83.0589C64.3143 82.7389 62.3943 80.7122 61.3276 77.9389C60.7943 76.3389 60.581 74.7389 60.901 73.2455C61.221 71.5389 62.181 70.2589 63.5676 69.7255C64.101 69.5122 64.741 69.5122 65.381 69.5122C67.5143 69.8322 69.4343 71.8589 70.501 74.6322C71.0343 76.2322 71.2476 77.8322 70.9276 79.3255C70.6076 81.0322 69.6476 82.3122 68.261 82.8455C67.7276 83.1655 67.0876 83.1655 66.4476 83.0589Z"
+        fill="url(#paint4_linear_150_2514)"
+    />
+    <path
+        d="M67.6445 81.1736C69.1987 80.6207 69.6902 78.0127 68.7424 75.3484C67.7945 72.6841 65.7662 70.9726 64.2121 71.5255C62.6579 72.0784 62.1664 74.6864 63.1143 77.3507C64.0621 80.0149 66.0904 81.7265 67.6445 81.1736Z"
+        fill="#116EC3"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M48.6343 54.899L129.381 79.859L136.208 74.739L78.5009 41.7791L48.6343 54.899Z"
+        fill="url(#paint5_linear_150_2514)"
+    />
+    <defs>
+        <linearGradient
+            id="paint0_linear_150_2514"
+            x1="2.63156"
+            y1="-1.93387"
+            x2="3.76073"
+            y2="10.5454"
+            gradientUnits="userSpaceOnUse"
+        >
+            <stop stop-color="#91C4E9" />
+            <stop offset="1" stop-color="#2C82CD" />
+        </linearGradient>
+        <linearGradient
+            id="paint1_linear_150_2514"
+            x1="-77.9369"
+            y1="13.9513"
+            x2="57.7505"
+            y2="29.4142"
+            gradientUnits="userSpaceOnUse"
+        >
+            <stop stop-color="#93C5E9" />
+            <stop offset="1" stop-color="#2C82CD" />
+        </linearGradient>
+        <linearGradient
+            id="paint2_linear_150_2514"
+            x1="-0.417166"
+            y1="17.3765"
+            x2="4.84876"
+            y2="35.4423"
+            gradientUnits="userSpaceOnUse"
+        >
+            <stop stop-color="#95C6EA" />
+            <stop offset="1" stop-color="#2C82CD" />
+        </linearGradient>
+        <linearGradient
+            id="paint3_linear_150_2514"
+            x1="42.835"
+            y1="28.0233"
+            x2="57.1742"
+            y2="60.5904"
+            gradientUnits="userSpaceOnUse"
+        >
+            <stop stop-color="#95C6EA" />
+            <stop offset="1" stop-color="#2C82CD" />
+        </linearGradient>
+        <linearGradient
+            id="paint4_linear_150_2514"
+            x1="38.0422"
+            y1="38.4376"
+            x2="65.0193"
+            y2="75.1364"
+            gradientUnits="userSpaceOnUse"
+        >
+            <stop stop-color="#DEDEDE" />
+            <stop offset="1" stop-color="#12A4E5" />
+        </linearGradient>
+        <linearGradient
+            id="paint5_linear_150_2514"
+            x1="113.325"
+            y1="25.7025"
+            x2="80.2716"
+            y2="87.5962"
+            gradientUnits="userSpaceOnUse"
+        >
+            <stop stop-color="#94C6EA" />
+            <stop offset="1" stop-color="#2C82CD" />
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/projects/demo/src/assets/images/google.svg b/projects/demo/src/assets/images/google.svg
new file mode 100644
index 0000000000000..5aa789c3bdbd5
--- /dev/null
+++ b/projects/demo/src/assets/images/google.svg
@@ -0,0 +1,21 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 32 32"
+    width="80"
+    height="80"
+>
+    <defs>
+        <path
+            id="A"
+            d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"
+        />
+    </defs>
+    <clipPath id="B"><use xlink:href="#A" /></clipPath>
+    <g transform="matrix(.727273 0 0 .727273 -.954545 -1.45455)">
+        <path d="M0 37V11l17 13z" clip-path="url(#B)" fill="#fbbc05" />
+        <path d="M0 11l17 13 7-6.1L48 14V0H0z" clip-path="url(#B)" fill="#ea4335" />
+        <path d="M0 37l30-23 7.9 1L48 0v48H0z" clip-path="url(#B)" fill="#34a853" />
+        <path d="M48 48L17 24l-4-3 35-10z" clip-path="url(#B)" fill="#4285f4" />
+    </g>
+</svg>
diff --git a/projects/demo/src/assets/images/microsoft.svg b/projects/demo/src/assets/images/microsoft.svg
new file mode 100644
index 0000000000000..ef62a38deb1e9
--- /dev/null
+++ b/projects/demo/src/assets/images/microsoft.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23" height="80" width="80">
+    <path fill="#f3f3f3" d="M0 0h23v23H0z" />
+    <path fill="#f35325" d="M1 1h10v10H1z" />
+    <path fill="#81bc06" d="M12 1h10v10H12z" />
+    <path fill="#05a6f0" d="M1 12h10v10H1z" />
+    <path fill="#ffba08" d="M12 12h10v10H12z" />
+</svg>
diff --git a/projects/demo/src/assets/images/poster.svg b/projects/demo/src/assets/images/poster.svg
new file mode 100644
index 0000000000000..cc064eaab47a2
--- /dev/null
+++ b/projects/demo/src/assets/images/poster.svg
@@ -0,0 +1,110 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="93" height="113" viewBox="0 0 93 113" fill="none">
+    <path
+        d="M39.1055 104.565V19.7131H78.2109V104.565C59.765 90.96 59.942 119.506 39.1055 104.565Z"
+        fill="url(#paint0_linear_150_927)"
+    />
+    <path
+        d="M39.1055 104.565V19.7131H78.2109V104.565C59.765 90.96 59.942 119.506 39.1055 104.565Z"
+        fill="url(#paint1_linear_150_927)"
+        fill-opacity="0.5"
+    />
+    <path
+        d="M78.2108 116.223V31.3711H117.316V116.223C99.9033 133.931 83.9906 123.601 78.2108 116.223Z"
+        fill="url(#paint2_linear_150_927)"
+    />
+    <path
+        d="M78.2108 116.223V31.3711H117.316V116.223C99.9033 133.931 83.9906 123.601 78.2108 116.223Z"
+        fill="url(#paint3_linear_150_927)"
+        fill-opacity="0.72"
+    />
+    <path
+        d="M0 84.5987V0.529297H39.1055V85.3808C21.8991 103.377 5.47477 92.8182 0 84.5987Z"
+        fill="url(#paint4_linear_150_927)"
+    />
+    <path
+        d="M0 84.5987V0.529297H39.1055V85.3808C21.8991 103.377 5.47477 92.8182 0 84.5987Z"
+        fill="url(#paint5_linear_150_927)"
+        fill-opacity="0.3"
+        style="mix-blend-mode: overlay"
+    />
+    <rect y="0.529297" width="117.316" height="94.6764" fill="url(#paint6_linear_150_927)" />
+    <defs>
+        <linearGradient
+            id="paint0_linear_150_927"
+            x1="59.0271"
+            y1="19.7131"
+            x2="101.595"
+            y2="77.9562"
+            gradientUnits="userSpaceOnUse"
+        >
+            <stop stop-color="#4FBDB2" />
+            <stop offset="1" stop-color="#00858D" />
+        </linearGradient>
+        <linearGradient
+            id="paint1_linear_150_927"
+            x1="39.1055"
+            y1="72.5394"
+            x2="78.2109"
+            y2="72.5394"
+            gradientUnits="userSpaceOnUse"
+        >
+            <stop stop-color="white" />
+            <stop offset="0.385417" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+            id="paint2_linear_150_927"
+            x1="98.1325"
+            y1="31.3711"
+            x2="143.965"
+            y2="90.5552"
+            gradientUnits="userSpaceOnUse"
+        >
+            <stop stop-color="#4FBDB2" />
+            <stop offset="1" stop-color="#00858D" />
+        </linearGradient>
+        <linearGradient
+            id="paint3_linear_150_927"
+            x1="78.2108"
+            y1="87.3435"
+            x2="117.316"
+            y2="87.3435"
+            gradientUnits="userSpaceOnUse"
+        >
+            <stop stop-color="white" />
+            <stop offset="0.385417" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+            id="paint4_linear_150_927"
+            x1="19.9217"
+            y1="0.5293"
+            x2="65.8076"
+            y2="59.7273"
+            gradientUnits="userSpaceOnUse"
+        >
+            <stop stop-color="#4FBDB2" />
+            <stop offset="1" stop-color="#00858D" />
+        </linearGradient>
+        <linearGradient
+            id="paint5_linear_150_927"
+            x1="-1.06106e-06"
+            y1="56.5543"
+            x2="39.1055"
+            y2="56.5543"
+            gradientUnits="userSpaceOnUse"
+        >
+            <stop stop-color="white" />
+            <stop offset="0.385417" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+            id="paint6_linear_150_927"
+            x1="59.765"
+            y1="33.3779"
+            x2="59.765"
+            y2="95.253"
+            gradientUnits="userSpaceOnUse"
+        >
+            <stop stop-color="#58C0BE" />
+            <stop offset="1" stop-color="#58C0BE" stop-opacity="0" />
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/projects/demo/src/modules/app/app.routes.ts b/projects/demo/src/modules/app/app.routes.ts
index a64a3d7077315..e61849d25e4f3 100644
--- a/projects/demo/src/modules/app/app.routes.ts
+++ b/projects/demo/src/modules/app/app.routes.ts
@@ -256,6 +256,14 @@ export const ROUTES: Routes = [
             title: `Toggle `,
         },
     },
+    {
+        path: `experimental/card`,
+        loadChildren: async () =>
+            (await import(`../experimental/card/card.module`)).ExampleTuiCardModule,
+        data: {
+            title: `Card`,
+        },
+    },
     {
         path: `experimental/badge`,
         loadChildren: async () =>
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index 95838a0c6e0b0..fb464a7d2121b 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -939,6 +939,12 @@ export const pages: TuiDocPages = [
         keywords: `amount, money, деньги, сумма, количество, cash, копейки, рубли, доллары, евро`,
         route: `/experimental/amount`,
     },
+    {
+        section: `Experimental`,
+        title: `Card`,
+        keywords: `card, block, карточка, блок`,
+        route: `/experimental/card`,
+    },
     // Charts
     {
         section: `Charts`,
diff --git a/projects/demo/src/modules/experimental/card/card.component.ts b/projects/demo/src/modules/experimental/card/card.component.ts
new file mode 100644
index 0000000000000..9cdbd48c8d1f7
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/card.component.ts
@@ -0,0 +1,60 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+
+@Component({
+    selector: 'example-card',
+    templateUrl: './card.template.html',
+    changeDetection,
+})
+export class ExampleTuiCardComponent {
+    readonly exampleModule: TuiRawLoaderContent = import(
+        './examples/import/import-module.md?raw'
+    );
+
+    readonly exampleHtml: TuiRawLoaderContent = import(
+        './examples/import/insert-template.md?raw'
+    );
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('./examples/1/index.ts?raw'),
+        HTML: import('./examples/1/index.html?raw'),
+        LESS: import('./examples/1/index.less?raw'),
+    };
+
+    readonly example2: TuiDocExample = {
+        TypeScript: import('./examples/2/index.ts?raw'),
+        HTML: import('./examples/2/index.html?raw'),
+        LESS: import('./examples/2/index.less?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'),
+    };
+
+    readonly example4: TuiDocExample = {
+        TypeScript: import('./examples/4/index.ts?raw'),
+        HTML: import('./examples/4/index.html?raw'),
+        LESS: import('./examples/4/index.less?raw'),
+    };
+
+    readonly example5: TuiDocExample = {
+        TypeScript: import('./examples/5/index.ts?raw'),
+        HTML: import('./examples/5/index.html?raw'),
+        LESS: import('./examples/5/index.less?raw'),
+    };
+
+    readonly example6: TuiDocExample = {
+        TypeScript: import('./examples/6/index.ts?raw'),
+        HTML: import('./examples/6/index.html?raw'),
+        LESS: import('./examples/6/index.less?raw'),
+    };
+
+    readonly example7: TuiDocExample = {
+        TypeScript: import('./examples/7/index.ts?raw'),
+        HTML: import('./examples/7/index.html?raw'),
+        LESS: import('./examples/7/index.less?raw'),
+    };
+}
diff --git a/projects/demo/src/modules/experimental/card/card.module.ts b/projects/demo/src/modules/experimental/card/card.module.ts
new file mode 100644
index 0000000000000..03b46dc17687c
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/card.module.ts
@@ -0,0 +1,69 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {tuiGetDocModules} from '@taiga-ui/addon-doc';
+import {TuiRippleModule} from '@taiga-ui/addon-mobile';
+import {
+    TuiHintModule,
+    TuiNotificationModule,
+    TuiScrollbarModule,
+    TuiSvgModule,
+} from '@taiga-ui/core';
+import {
+    TuiAutoColorModule,
+    TuiAvatarModule,
+    TuiAvatarStackModule,
+    TuiBadgeModule,
+    TuiCardModule,
+    TuiFadeModule,
+    TuiFallbackSrcModule,
+    TuiInitialsModule,
+    TuiSurfaceModule,
+    TuiThumbnailCardModule,
+    TuiTitleModule,
+} from '@taiga-ui/experimental';
+
+import {ExampleTuiCardComponent} from './card.component';
+import {TuiCardExample1} from './examples/1';
+import {TuiCardExample2} from './examples/2';
+import {TuiCardExample3} from './examples/3';
+import {TuiCardExample4} from './examples/4';
+import {TuiCardExample5} from './examples/5';
+import {TuiCardExample6} from './examples/6';
+import {TuiCardExample7} from './examples/7';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiAvatarStackModule,
+        TuiAutoColorModule,
+        TuiInitialsModule,
+        TuiNotificationModule,
+        TuiFallbackSrcModule,
+        TuiFadeModule,
+        TuiCardModule,
+        TuiSurfaceModule,
+        TuiSvgModule,
+        TuiBadgeModule,
+        TuiTitleModule,
+        TuiAvatarModule,
+        TuiScrollbarModule,
+        TuiHintModule,
+        FormsModule,
+        TuiRippleModule,
+        TuiThumbnailCardModule,
+        tuiGetDocModules(ExampleTuiCardComponent),
+    ],
+    declarations: [
+        ExampleTuiCardComponent,
+        TuiCardExample1,
+        TuiCardExample2,
+        TuiCardExample3,
+        TuiCardExample4,
+        TuiCardExample5,
+        TuiCardExample6,
+        TuiCardExample7,
+    ],
+    exports: [ExampleTuiCardComponent],
+})
+export class ExampleTuiCardModule {}
diff --git a/projects/demo/src/modules/experimental/card/card.template.html b/projects/demo/src/modules/experimental/card/card.template.html
new file mode 100644
index 0000000000000..ac6714c7e620e
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/card.template.html
@@ -0,0 +1,92 @@
+<tui-doc-page
+    header="Card"
+    package="EXPERIMENTAL"
+    type="components"
+>
+    <ng-template pageTab="Medium">
+        <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="avatar"
+            heading="Avatar and text"
+            [content]="example1"
+        >
+            <tui-card-example-1></tui-card-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="icon"
+            heading="Icon"
+            [content]="example2"
+        >
+            <tui-card-example-2></tui-card-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="badge"
+            heading="Badge"
+            [content]="example3"
+        >
+            <tui-card-example-3></tui-card-example-3>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="stacking"
+            heading="Stacking"
+            [content]="example4"
+        >
+            <tui-card-example-4></tui-card-example-4>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="customization"
+            heading="Customization"
+            [content]="example5"
+            [fullsize]="true"
+        >
+            <tui-card-example-5></tui-card-example-5>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="long-text"
+            heading="Long text"
+            [content]="example6"
+        >
+            <tui-card-example-6></tui-card-example-6>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="selectable"
+            heading="Selectable"
+            [content]="example7"
+        >
+            <tui-card-example-7></tui-card-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="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/card/examples/1/index.html b/projects/demo/src/modules/experimental/card/examples/1/index.html
new file mode 100644
index 0000000000000..f5ebe33cc50bf
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/1/index.html
@@ -0,0 +1,28 @@
+<div tuiCard>
+    <tui-avatar
+        src="tuiIconStarLarge"
+        class="star"
+    ></tui-avatar>
+
+    <h2 tuiTitle>
+        Title
+        <span tuiSubtitle>Subtitle</span>
+    </h2>
+</div>
+
+<div tuiCard>
+    <h2
+        tuiTitle
+        [style.margin-top]="'auto'"
+    >
+        Title
+        <span tuiSubtitle>Subtitle</span>
+    </h2>
+</div>
+
+<div tuiCard>
+    <h2 tuiTitle>
+        Title
+        <span tuiSubtitle>Subtitle</span>
+    </h2>
+</div>
diff --git a/projects/demo/src/modules/experimental/card/examples/1/index.less b/projects/demo/src/modules/experimental/card/examples/1/index.less
new file mode 100644
index 0000000000000..3d03013a23116
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/1/index.less
@@ -0,0 +1,9 @@
+:host {
+    display: flex;
+    gap: 1rem;
+}
+
+.star {
+    background: rgb(66, 139, 250);
+    color: #fff;
+}
diff --git a/projects/demo/src/modules/experimental/card/examples/1/index.ts b/projects/demo/src/modules/experimental/card/examples/1/index.ts
new file mode 100644
index 0000000000000..23507b802fdb1
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/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-card-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiCardExample1 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/2/index.html b/projects/demo/src/modules/experimental/card/examples/2/index.html
new file mode 100644
index 0000000000000..4afc0e55c8092
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/2/index.html
@@ -0,0 +1,23 @@
+<div tuiCard>
+    <tui-svg
+        src="tuiIconPlusSquareLarge"
+        class="plus"
+    ></tui-svg>
+
+    <h2 tuiTitle>
+        Title
+        <span tuiSubtitle>Subtitle</span>
+    </h2>
+</div>
+
+<div tuiCard>
+    <h2 tuiTitle>
+        Title
+        <span tuiSubtitle>Subtitle</span>
+    </h2>
+
+    <tui-svg
+        src="tuiIconPlusSquareLarge"
+        class="plus"
+    ></tui-svg>
+</div>
diff --git a/projects/demo/src/modules/experimental/card/examples/2/index.less b/projects/demo/src/modules/experimental/card/examples/2/index.less
new file mode 100644
index 0000000000000..a64425e31fb0c
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/2/index.less
@@ -0,0 +1,10 @@
+:host {
+    display: flex;
+    gap: 1rem;
+}
+
+.plus {
+    background: #428bfa;
+    color: #fff;
+    border-radius: 5px;
+}
diff --git a/projects/demo/src/modules/experimental/card/examples/2/index.ts b/projects/demo/src/modules/experimental/card/examples/2/index.ts
new file mode 100644
index 0000000000000..b315df7805b19
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/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-card-example-2',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiCardExample2 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/3/index.html b/projects/demo/src/modules/experimental/card/examples/3/index.html
new file mode 100644
index 0000000000000..47b480a672ff0
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/3/index.html
@@ -0,0 +1,33 @@
+<div tuiCard>
+    <div>
+        <tui-badge
+            appearance="custom"
+            size="s"
+            class="badge"
+        >
+            <tui-svg src="tuiIconTarget"></tui-svg>
+            10 %
+        </tui-badge>
+    </div>
+
+    <h2 tuiTitle>
+        Title
+        <span tuiSubtitle>Subtitle</span>
+    </h2>
+</div>
+
+<div tuiCard>
+    <h2 tuiTitle>
+        Title
+        <span tuiSubtitle>Subtitle</span>
+    </h2>
+
+    <tui-badge
+        appearance="custom"
+        size="s"
+        class="badge"
+    >
+        <tui-svg src="tuiIconTarget"></tui-svg>
+        10 %
+    </tui-badge>
+</div>
diff --git a/projects/demo/src/modules/experimental/card/examples/3/index.less b/projects/demo/src/modules/experimental/card/examples/3/index.less
new file mode 100644
index 0000000000000..4af2c3fa311a4
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/3/index.less
@@ -0,0 +1,9 @@
+:host {
+    display: flex;
+    gap: 1rem;
+}
+
+.badge {
+    background: #aff218;
+    color: #333;
+}
diff --git a/projects/demo/src/modules/experimental/card/examples/3/index.ts b/projects/demo/src/modules/experimental/card/examples/3/index.ts
new file mode 100644
index 0000000000000..3c8dc8148c086
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/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-card-example-3',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiCardExample3 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/4/index.html b/projects/demo/src/modules/experimental/card/examples/4/index.html
new file mode 100644
index 0000000000000..80edf46d4e3dc
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/4/index.html
@@ -0,0 +1,33 @@
+<div tuiCard>
+    <tui-avatar-stack direction="left">
+        <tui-avatar
+            *ngFor="let url of urls"
+            size="s"
+            [round]="true"
+            [src]="url | tuiFallbackSrc: 'tuiIconUserLarge' | async"
+            [style.background]="url | tuiAutoColor"
+        ></tui-avatar>
+    </tui-avatar-stack>
+
+    <h2 tuiTitle>
+        Title
+        <span tuiSubtitle>Subtitle</span>
+    </h2>
+</div>
+
+<div tuiCard>
+    <h2 tuiTitle>
+        Title
+        <span tuiSubtitle>Subtitle</span>
+    </h2>
+
+    <tui-avatar-stack direction="left">
+        <tui-avatar
+            *ngFor="let url of urls"
+            size="s"
+            [round]="true"
+            [src]="url | tuiFallbackSrc: 'tuiIconUserLarge' | async"
+            [style.background]="url | tuiAutoColor"
+        ></tui-avatar>
+    </tui-avatar-stack>
+</div>
diff --git a/projects/demo/src/modules/experimental/card/examples/4/index.less b/projects/demo/src/modules/experimental/card/examples/4/index.less
new file mode 100644
index 0000000000000..e8c357f08e0d2
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/4/index.less
@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+    gap: 1rem;
+}
diff --git a/projects/demo/src/modules/experimental/card/examples/4/index.ts b/projects/demo/src/modules/experimental/card/examples/4/index.ts
new file mode 100644
index 0000000000000..5157061138ba2
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/4/index.ts
@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-example-4',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiCardExample4 {
+    readonly urls = [
+        'https://avatars.githubusercontent.com/u/11832552',
+        'https://avatars.githubusercontent.com/u/10106368',
+        'https://avatars.githubusercontent.com/u/46284632',
+    ];
+}
diff --git a/projects/demo/src/modules/experimental/card/examples/5/index.html b/projects/demo/src/modules/experimental/card/examples/5/index.html
new file mode 100644
index 0000000000000..ba4057a0a4e69
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/5/index.html
@@ -0,0 +1,74 @@
+<div
+    tuiCard
+    tuiSurface
+    class="poster"
+>
+    <h2 tuiTitle>
+        Poster
+        <span tuiSubtitle>Cinema, concerts, theaters and sports up to 25%</span>
+    </h2>
+
+    <tui-badge
+        appearance="custom"
+        size="s"
+        class="badge"
+    >
+        <tui-svg src="tuiIconTarget"></tui-svg>
+        10 %
+    </tui-badge>
+</div>
+
+<div
+    tuiCard
+    tuiSurface
+    class="fly"
+>
+    <h2 tuiTitle>Flights</h2>
+
+    <tui-badge
+        appearance="custom"
+        size="s"
+        class="badge"
+    >
+        <tui-svg src="tuiIconTarget"></tui-svg>
+        10 %
+    </tui-badge>
+</div>
+
+<div
+    tuiCard
+    tuiSurface
+    class="google"
+>
+    <h2 tuiTitle>
+        Google
+        <span tuiSubtitle>-2.7%</span>
+    </h2>
+
+    <tui-badge
+        appearance="custom"
+        size="s"
+        class="money"
+    >
+        $ 3,605.2
+    </tui-badge>
+</div>
+
+<div
+    tuiCard
+    tuiSurface
+    class="microsoft"
+>
+    <h2 tuiTitle>
+        Microsoft
+        <span tuiSubtitle>-12.44%</span>
+    </h2>
+
+    <tui-badge
+        appearance="custom"
+        size="s"
+        class="money"
+    >
+        $ 1,095.3
+    </tui-badge>
+</div>
diff --git a/projects/demo/src/modules/experimental/card/examples/5/index.less b/projects/demo/src/modules/experimental/card/examples/5/index.less
new file mode 100644
index 0000000000000..a055ed7f61c1b
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/5/index.less
@@ -0,0 +1,82 @@
+:host {
+    display: flex;
+    gap: 1.2rem;
+    min-width: 40.625rem;
+}
+
+.badge {
+    background: #aff218;
+    color: #333;
+}
+
+.money {
+    background: #ffdd2d;
+    color: #333;
+}
+
+.poster[data-surface] {
+    background: rgb(88, 192, 190);
+    padding: 0.75rem;
+    color: #fff;
+    width: 13.9375rem;
+    height: 8rem;
+
+    [tuiSubtitle] {
+        color: #fff;
+    }
+
+    &:after {
+        background: url(/assets/images/poster.svg) bottom right no-repeat;
+    }
+
+    &:hover:after {
+        transform: scale(1.1);
+    }
+}
+
+.fly[data-surface] {
+    background: rgb(101, 174, 234);
+    padding: 0.75rem;
+    color: #fff;
+    width: 8rem;
+    height: 8rem;
+
+    &:after {
+        background: url(/assets/images/fly.svg) bottom right no-repeat;
+    }
+
+    &:hover:after {
+        transform: scale(1.1);
+    }
+}
+
+.google[data-surface],
+.microsoft[data-surface] {
+    padding: 0.75rem;
+    background: var(--tui-base-02);
+    height: 8rem;
+
+    &:hover:after {
+        transform: scale(1.1);
+    }
+}
+
+.google[data-surface] {
+    [tuiSubtitle] {
+        color: red;
+    }
+
+    &:after {
+        background: url(/assets/images/google.svg) bottom right no-repeat;
+    }
+}
+
+.microsoft[data-surface] {
+    [tuiSubtitle] {
+        color: #00b92d;
+    }
+
+    &:after {
+        background: url(/assets/images/microsoft.svg) bottom right no-repeat;
+    }
+}
diff --git a/projects/demo/src/modules/experimental/card/examples/5/index.ts b/projects/demo/src/modules/experimental/card/examples/5/index.ts
new file mode 100644
index 0000000000000..afb2647958fc5
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/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-card-example-5',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiCardExample5 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/6/index.html b/projects/demo/src/modules/experimental/card/examples/6/index.html
new file mode 100644
index 0000000000000..be76949bab81b
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/6/index.html
@@ -0,0 +1,51 @@
+<div tuiCard>
+    <h2
+        tuiTitle
+        [style.max-width]="'100%'"
+    >
+        <tui-scrollbar [hidden]="true">
+            <b
+                tuiFade
+                tuiScrollable
+                class="fade"
+            >
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+            </b>
+        </tui-scrollbar>
+
+        <span tuiSubtitle>
+            <tui-scrollbar>
+                <span
+                    tuiFade="vertical"
+                    tuiScrollable
+                    class="fade-vertical"
+                    [style.height]="'80px'"
+                >
+                    It is a long established fact that a reader will be distracted by the readable content of a page
+                    when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
+                    distribution of letters, as opposed to using 'Content here, content here', making it look like
+                    readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their
+                    default model text.
+                </span>
+            </tui-scrollbar>
+        </span>
+    </h2>
+</div>
+
+<div tuiCard>
+    <h2 tuiTitle>Text without fade out when overflow content</h2>
+
+    <p
+        #text
+        tuiHintDirection="top"
+        class="nowrap"
+        [style.max-width]="'100%'"
+        [tuiHint]="tooltip"
+    >
+        It is a long established fact that a reader will be distracted by the readable content of a page when looking at
+        its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
+        opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing
+        packages and web page editors now use Lorem Ipsum as their default model text.
+    </p>
+    <ng-template #tooltip>{{ text.innerText }}</ng-template>
+</div>
diff --git a/projects/demo/src/modules/experimental/card/examples/6/index.less b/projects/demo/src/modules/experimental/card/examples/6/index.less
new file mode 100644
index 0000000000000..cab0ab6341aa2
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/6/index.less
@@ -0,0 +1,27 @@
+@import 'taiga-ui-local';
+
+:host {
+    display: flex;
+    gap: 1rem;
+}
+
+.fade {
+    .scrollbar-hidden();
+    width: 100%;
+    height: 2rem;
+    white-space: nowrap;
+    overflow: auto;
+}
+
+.fade-vertical {
+    .scrollbar-hidden();
+    height: 6rem;
+    overflow: auto;
+}
+
+.nowrap {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin: 0;
+}
diff --git a/projects/demo/src/modules/experimental/card/examples/6/index.ts b/projects/demo/src/modules/experimental/card/examples/6/index.ts
new file mode 100644
index 0000000000000..02cfb02190e15
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/6/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-card-example-6',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiCardExample6 {}
diff --git a/projects/demo/src/modules/experimental/card/examples/7/index.html b/projects/demo/src/modules/experimental/card/examples/7/index.html
new file mode 100644
index 0000000000000..8358ba85e32f8
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/7/index.html
@@ -0,0 +1,93 @@
+<div
+    tuiCard
+    tuiSurface
+    class="surface"
+    (click)="currentIndex = 0"
+>
+    <tui-svg
+        src="tuiIconGooglePay"
+        tuiSlot="top"
+    ></tui-svg>
+    <tui-scrollbar>
+        <div
+            tuiFade
+            tuiScrollable
+            class="card-list"
+        >
+            <tui-thumbnail-card
+                iconLeft="tuiIconLock"
+                paymentSystem="mastercard"
+                size="m"
+            >
+                4572
+            </tui-thumbnail-card>
+
+            <tui-thumbnail-card
+                iconLeft="tuiIconLock"
+                paymentSystem="mir"
+                size="m"
+                class="mir"
+            >
+                6733
+            </tui-thumbnail-card>
+
+            <tui-thumbnail-card
+                paymentSystem="visa"
+                size="m"
+                class="visa"
+            >
+                5212
+            </tui-thumbnail-card>
+        </div>
+    </tui-scrollbar>
+
+    <input
+        tuiSurfaceLayer
+        type="radio"
+        class="selected"
+        [ngModel]="currentIndex"
+        [value]="0"
+    />
+    <div
+        tuiRipple
+        tuiSurfaceLayer
+        [style.background-color]="'#fff6c7'"
+    ></div>
+</div>
+
+<div
+    tuiCard
+    tuiSurface
+    class="surface"
+    (click)="currentIndex = 1"
+>
+    <tui-svg src="tuiIconApplePay"></tui-svg>
+    <tui-scrollbar>
+        <div
+            tuiFade
+            tuiScrollable
+            class="card-list"
+        >
+            <tui-thumbnail-card
+                paymentSystem="mir"
+                size="m"
+                class="mir"
+            >
+                2222
+            </tui-thumbnail-card>
+        </div>
+    </tui-scrollbar>
+
+    <input
+        tuiSurfaceLayer
+        type="radio"
+        class="selected"
+        [ngModel]="currentIndex"
+        [value]="1"
+    />
+    <div
+        tuiRipple
+        tuiSurfaceLayer
+        [style.background-color]="'#d5f6df'"
+    ></div>
+</div>
diff --git a/projects/demo/src/modules/experimental/card/examples/7/index.less b/projects/demo/src/modules/experimental/card/examples/7/index.less
new file mode 100644
index 0000000000000..301c79580594b
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/7/index.less
@@ -0,0 +1,36 @@
+@import 'taiga-ui-local';
+
+:host {
+    display: flex;
+    gap: 1rem;
+}
+
+.surface[data-surface],
+.surface[data-surface] {
+    width: 6.5rem;
+    height: 6.5rem;
+    padding: 0.75rem;
+    background: var(--tui-base-02);
+    cursor: pointer;
+}
+
+.selected {
+    z-index: 1;
+    color: var(--tui-primary);
+    pointer-events: none;
+}
+
+.mir {
+    background: #2b9aff linear-gradient(110deg, transparent 70%, #0780ff 71%, #db028b 100%);
+}
+
+.visa {
+    background: linear-gradient(45deg, #ffaa00d1, #ffaa00), url(/assets/taiga-ui/icons/tuiIconStarLarge.svg);
+}
+
+.card-list {
+    display: flex;
+    flex-direction: row;
+    width: max-content;
+    gap: 0.25rem;
+}
diff --git a/projects/demo/src/modules/experimental/card/examples/7/index.ts b/projects/demo/src/modules/experimental/card/examples/7/index.ts
new file mode 100644
index 0000000000000..51b13f52b0404
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/7/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-card-example-7',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiCardExample7 {
+    currentIndex = 0;
+}
diff --git a/projects/demo/src/modules/experimental/card/examples/import/import-module.md b/projects/demo/src/modules/experimental/card/examples/import/import-module.md
new file mode 100644
index 0000000000000..b8f6dc443ad01
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/import/import-module.md
@@ -0,0 +1,13 @@
+```ts
+import {NgModule} from '@angular/core';
+import {TuiCardModule} from '@taiga-ui/experimental';
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiCardModule,
+  ],
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/experimental/card/examples/import/insert-template.md b/projects/demo/src/modules/experimental/card/examples/import/insert-template.md
new file mode 100644
index 0000000000000..25593713373aa
--- /dev/null
+++ b/projects/demo/src/modules/experimental/card/examples/import/insert-template.md
@@ -0,0 +1,13 @@
+```html
+<div tuiCard>
+  <tui-avatar
+    class="star"
+    src="tuiIconStarLarge"
+  ></tui-avatar>
+
+  <h2 tuiTitle>
+    Title
+    <span tuiSubtitle>Subtitle</span>
+  </h2>
+</div>
+```
diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts
index bba27fa2dd953..5a4dc91696a69 100644
--- a/projects/demo/used-icons.ts
+++ b/projects/demo/used-icons.ts
@@ -102,6 +102,10 @@ export const TUI_USED_ICONS = [
     `tuiIconBox`,
     `tuiIconLock`,
     `tuiIconUsers`,
+    `tuiIconPlusSquareLarge`,
+    `tuiIconTarget`,
+    `tuiIconGooglePay`,
+    `tuiIconApplePay`,
     `tuiIconArrowDownLeft`,
     `tuiIconArrowUpRight`,
     `tuiIconSmileLarge`,
@@ -129,8 +133,6 @@ export const TUI_USED_ICONS = [
     `tuiIconRuPay`,
     `tuiIconUzcard`,
     `tuiIconVerve`,
-    `tuiIconApplePay`,
-    `tuiIconGooglePay`,
     `tuiIconSamsungPay`,
     `tuiIconWorldPay`,
     `tuiIconAliPay`,
diff --git a/projects/experimental/directives/card/card.component.ts b/projects/experimental/directives/card/card.component.ts
new file mode 100644
index 0000000000000..dca82b00b1167
--- /dev/null
+++ b/projects/experimental/directives/card/card.component.ts
@@ -0,0 +1,12 @@
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    template: '',
+    styleUrls: ['./card.styles.less'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    host: {
+        class: 'tui-card',
+    },
+})
+export class TuiCardComponent {}
diff --git a/projects/experimental/directives/card/card.directive.ts b/projects/experimental/directives/card/card.directive.ts
new file mode 100644
index 0000000000000..6505dd6a536f6
--- /dev/null
+++ b/projects/experimental/directives/card/card.directive.ts
@@ -0,0 +1,23 @@
+import {Directive, Inject, Input} from '@angular/core';
+import {TuiDirectiveStylesService} from '@taiga-ui/cdk';
+import {TuiSizeL} from '@taiga-ui/core';
+
+import {TuiCardComponent} from './card.component';
+
+@Directive({
+    selector: '[tuiCard]',
+    host: {
+        tuiCard: '',
+        '[attr.data-size]': 'size || "m"',
+    },
+})
+export class TuiCardDirective {
+    @Input('tuiCard')
+    size: TuiSizeL | '' = 'm';
+
+    constructor(
+        @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService,
+    ) {
+        directiveStyles.addComponent(TuiCardComponent);
+    }
+}
diff --git a/projects/experimental/directives/card/card.module.ts b/projects/experimental/directives/card/card.module.ts
new file mode 100644
index 0000000000000..a84215615cd15
--- /dev/null
+++ b/projects/experimental/directives/card/card.module.ts
@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core';
+
+import {TuiCardComponent} from './card.component';
+import {TuiCardDirective} from './card.directive';
+
+@NgModule({
+    declarations: [TuiCardComponent, TuiCardDirective],
+    exports: [TuiCardComponent, TuiCardDirective],
+})
+export class TuiCardModule {}
diff --git a/projects/experimental/directives/card/card.styles.less b/projects/experimental/directives/card/card.styles.less
new file mode 100644
index 0000000000000..dfc827ee2e513
--- /dev/null
+++ b/projects/experimental/directives/card/card.styles.less
@@ -0,0 +1,28 @@
+@import 'taiga-ui-local';
+
+[tuiCard] {
+    .clearbtn();
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    background: var(--tui-base-02);
+    border-radius: 0.75rem;
+    box-sizing: border-box;
+    padding: 0.75rem;
+    gap: 0.75rem;
+    flex-direction: column;
+    text-decoration: none;
+
+    &[data-size='m'] {
+        width: 8.75rem;
+        height: 8.75rem;
+    }
+
+    [tuiTitle] {
+        font-weight: bold;
+    }
+
+    [tuiSubtitle] {
+        color: var(--tui-text-01);
+    }
+}
diff --git a/projects/experimental/directives/card/index.ts b/projects/experimental/directives/card/index.ts
new file mode 100644
index 0000000000000..740875b12861d
--- /dev/null
+++ b/projects/experimental/directives/card/index.ts
@@ -0,0 +1,3 @@
+export * from './card.component';
+export * from './card.directive';
+export * from './card.module';
diff --git a/projects/experimental/directives/card/ng-package.json b/projects/experimental/directives/card/ng-package.json
new file mode 100644
index 0000000000000..bab5ebcdb74a1
--- /dev/null
+++ b/projects/experimental/directives/card/ng-package.json
@@ -0,0 +1,8 @@
+{
+    "lib": {
+        "entryFile": "index.ts",
+        "styleIncludePaths": [
+            "../../../core/styles"
+        ]
+    }
+}
diff --git a/projects/experimental/directives/index.ts b/projects/experimental/directives/index.ts
index f7a099c4fdd9f..531b8feb1e453 100644
--- a/projects/experimental/directives/index.ts
+++ b/projects/experimental/directives/index.ts
@@ -1,3 +1,4 @@
+export * from '@taiga-ui/experimental/directives/card';
 export * from '@taiga-ui/experimental/directives/cell';
 export * from '@taiga-ui/experimental/directives/fade';
 export * from '@taiga-ui/experimental/directives/sensitive';