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

<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>