kit/tests/card/block.php

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<?php
/**
 * @var $APPLICATION
 */
if(\Bitrix\Main\Loader::includeModule('wt.core')) {
    app()->service()->assets()->setPlugins([
        'kit:config',
        'kit:flex-kit',
        'kit:core',
        'kit:bsCore',
        'kit:collapse',
        'kit:site',
        'kit:toolkit',
        'kit:theme',
    ])->render();
}
$APPLICATION->ShowHead();

?>
<style  type="text/css">
    :root {
        --width-wrapper: 1600px;
    }
    .card-flex-list--block {
        --col-count: 5;
    }
    @media (max-width: 1200px) {
        .card-flex-list--block {
            --col-count: 5;
        }
    }
    @media (max-width: 1000px) {
        .card-flex-list--block {
            --col-count: 4;
        }
    }
    @media (max-width: 800px) {
        .card-flex-list--block {
            --col-count: 3;
        }
    }
    @media (max-width: 500px) {
        .card-flex-list--block {
            --col-count: 2;
        }
    }
    .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>
<?php

$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',
    'picture' => '<img src="https://imgholder.ru/200x200/">',
    'text_preview' => 'asdas asdas dasdasd',
    'tickets' => [
        [
            'code' => 'news',
            'name' => 'Новинка'
        ],
        [
            'code' => 'discount',
            'name' => 'Скидка'
        ]
    ]
]);
/**
 * @todo card list
 */
?>
<div class="kit-wrapper">
    <section class="section-product-list">
        <div>
            <h1>Каталог</h1>
        </div>
        <div class="flex-list card-flex-list card-flex-list--block">
            <?php
            foreach($items as $item) {?>
                <div class="flex-list-item">
                    <?php
                    echo app()->service()->templater()->get('kit:card/block', $item);
                    ?>
                </div>
            <?php }?>
        </div>
    </section>
</div>