fix

tests/flex-card/product-list-item.php

@@ -0,0 +1,49 @@
+<?php
+
+
+?>
+
+<div class="flex-card aspect-ratio flex-list-item">
+    <div class="flex-card__section">
+        <div class="flex-card__content">
+            <div class="flex-card__body-shell aspect-ratio">
+                <div class="flex-card__body">
+                    <div class="flex-card__picture">
+                        <div class="kit-picture" style="background-image: url(<?=$item['image_preview']?>)">
+
+                        </div>
+                    </div>
+                    <div class="flex-card__title">
+                        <div class="kit-line-clamp">
+                            <?=$item['name']?>
+                        </div>
+                    </div>
+                    <div class="flex-card__props"></div>
+                </div>
+
+            </div>
+            <div class="flex-card__header">
+                <div class="flex-list flex-list--ticket">
+                    <?
+                    foreach ($item['tickets'] as $ticket) {
+                        ?>
+                        <div class="flex-list-item">
+                            <div class="ticket-item <?=$ticket['code']?>">
+                                <div class="kit-line-clamp"><?=$ticket['name']?></div>
+                            </div>
+                        </div>
+                        <?
+                    }
+                    ?>
+                </div>
+            </div>
+            <div class="flex-card__footer"></div>
+            <div class="flex-card__hover">
+                <div class="flex-card__hover-content">
+                    <?=$item['hover']?>
+                </div>
+            </div>
+            <div class="flex-card__border"></div>
+        </div>
+    </div>
+</div>

tests/flex-card/product-list.php

@@ -0,0 +1,65 @@
+
+
+<head>
+    <script src="chat.js"></script>
+    <link href="./../../assets/flex-kit/flex-kit.css" rel="stylesheet">
+    <style  type="text/css">
+        .section-product-list {
+            --col-count: 4;
+
+        }
+        .section-product-list .flex-card {
+            --kit-color-content: #FFF;
+            --aspect-ratio: calc(200 / 250);
+        }
+        .section-product-list .flex-card__picture {
+            flex-grow: 1;
+        }
+        .flex-card__hover {
+            text-align: center;
+            color: grey;
+            font-size: 0.8em;
+        }
+    </style>
+
+</head>
+<?
+
+$items = array_fill(0, 40, [
+    'id' => 1,
+    'name' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit  Ab accusamus aliquid, consequuntur corporis ducimus',
+    'hover' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit  Ab accusamus aliquid, consequuntur corporis ducimus',
+    'image_preview' => './product.svg',
+    'image_detail' => '',
+    'text_preview' => 'asdas asdas dasdasd',
+    'tickets' => [
+        [
+            'code' => 'news',
+            'name' => 'Новинка'
+        ],
+        [
+            'code' => 'discount',
+            'name' => 'Скидка'
+        ]
+    ]
+]);
+
+?>
+<body>
+    <div class="kit-wrapper">
+        <section class="section-product-list">
+
+            <div>
+                <h1>Каталог</h1>
+            </div>
+
+            <div class="flex-list flex-card-list--list-">
+                <?foreach($items as $item) {?>
+                        <?
+                        include "product-list-item.php";
+                        ?>
+                <?}?>
+            </div>
+        </section>
+    </div>
+</body>