diff --git a/projects/demo/src/modules/experimental/card-large/card-large.component.ts b/projects/demo/src/modules/experimental/card-large/card-large.component.ts index 3f5e26530aeb..50fc0f02eb90 100644 --- a/projects/demo/src/modules/experimental/card-large/card-large.component.ts +++ b/projects/demo/src/modules/experimental/card-large/card-large.component.ts @@ -70,4 +70,9 @@ export class ExampleTuiCardLargeComponent { readonly example12: TuiDocExample = { HTML: import('./examples/12/index.html?raw'), }; + + readonly example13: TuiDocExample = { + HTML: import('./examples/13/index.html?raw'), + LESS: import('./examples/11/index.less?raw'), + }; } diff --git a/projects/demo/src/modules/experimental/card-large/card-large.module.ts b/projects/demo/src/modules/experimental/card-large/card-large.module.ts index 46fba2415423..81de990b779c 100644 --- a/projects/demo/src/modules/experimental/card-large/card-large.module.ts +++ b/projects/demo/src/modules/experimental/card-large/card-large.module.ts @@ -46,6 +46,7 @@ import {TuiCardLargeExample9} from './examples/9'; import {TuiCardLargeExample10} from './examples/10'; import {TuiCardLargeExample11} from './examples/11'; import {TuiCardLargeExample12} from './examples/12'; +import {TuiCardLargeExample13} from './examples/13'; @NgModule({ imports: [ @@ -94,6 +95,7 @@ import {TuiCardLargeExample12} from './examples/12'; TuiCardLargeExample10, TuiCardLargeExample11, TuiCardLargeExample12, + TuiCardLargeExample13, ], exports: [ExampleTuiCardLargeComponent], }) diff --git a/projects/demo/src/modules/experimental/card-large/card-large.template.html b/projects/demo/src/modules/experimental/card-large/card-large.template.html index 3d32f4ccdf21..d364de7eedcd 100644 --- a/projects/demo/src/modules/experimental/card-large/card-large.template.html +++ b/projects/demo/src/modules/experimental/card-large/card-large.template.html @@ -62,18 +62,17 @@ @@ -101,6 +100,15 @@ > + + + + diff --git a/projects/demo/src/modules/experimental/card-large/examples/13/index.html b/projects/demo/src/modules/experimental/card-large/examples/13/index.html new file mode 100644 index 000000000000..72cf5200e8c3 --- /dev/null +++ b/projects/demo/src/modules/experimental/card-large/examples/13/index.html @@ -0,0 +1,33 @@ +
+
+

+ Title + Subtitle +

+
+ +
+ +
+ +
+ +
+
diff --git a/projects/demo/src/modules/experimental/card-large/examples/13/index.less b/projects/demo/src/modules/experimental/card-large/examples/13/index.less new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/projects/demo/src/modules/experimental/card-large/examples/13/index.ts b/projects/demo/src/modules/experimental/card-large/examples/13/index.ts new file mode 100644 index 000000000000..d837ec84a2ae --- /dev/null +++ b/projects/demo/src/modules/experimental/card-large/examples/13/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-large-example-13', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCardLargeExample13 {} diff --git a/projects/demo/src/modules/experimental/card-large/examples/8/index.html b/projects/demo/src/modules/experimental/card-large/examples/8/index.html index da48ec4b2c26..8e8d0b88102a 100644 --- a/projects/demo/src/modules/experimental/card-large/examples/8/index.html +++ b/projects/demo/src/modules/experimental/card-large/examples/8/index.html @@ -2,11 +2,10 @@ tuiCardLarge tuiSurface="elevated" > -
-

Title

-
- -
+
Title
Description
- - +
-
-

Title

-
- - Some text - -
- -
+
+ +
+ Title +
Description
+
+
+
diff --git a/projects/demo/src/modules/experimental/card-large/examples/8/index.less b/projects/demo/src/modules/experimental/card-large/examples/8/index.less index 2ea2cb93864c..dc3140046ad7 100644 --- a/projects/demo/src/modules/experimental/card-large/examples/8/index.less +++ b/projects/demo/src/modules/experimental/card-large/examples/8/index.less @@ -1,6 +1,5 @@ :host { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; - width: 30rem; + display: flex; + flex-direction: column; + gap: 2rem; } diff --git a/projects/demo/src/modules/experimental/card-large/examples/9/index.html b/projects/demo/src/modules/experimental/card-large/examples/9/index.html index 72cf5200e8c3..da48ec4b2c26 100644 --- a/projects/demo/src/modules/experimental/card-large/examples/9/index.html +++ b/projects/demo/src/modules/experimental/card-large/examples/9/index.html @@ -3,22 +3,40 @@ tuiSurface="elevated" >
-

+

Title

+
+ +
+ +
Title - Subtitle - +
Description
+
+
+ + + +
+
+

Title

-
- -
+ Some text