kit/tests/card/block.php

<?php require($_SERVER['DOCUMENT_ROOT']. '/bitrix/modules/main/include/prolog_before.php');?>
<?php
use Bitrix\Main\Page\Asset;
/**
 * @var $APPLICATION
 */
if(\Bitrix\Main\Loader::includeModule('wt.core')) {
    app()->service()->assets()->setPlugins([
        'kit:config',
        'kit:flex-kit',
        'kit:flex-kit/item',
        'kit:core',
        'kit:bsCore',
        'kit:collapse',
        'kit:site',
        'kit:toolkit',
        'kit:theme',
    ])->render();
}
Asset::getInstance()->addString('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
$APPLICATION->ShowHead();

?>
<style  type="text/css">
    :root {
        --width-wrapper: 1600px;
    }
    .card-flex-list--block {
        --col-count: 5;
        --gap: 0px;
    }
    @media (max-width: 1200px) {
        .card-flex-list--block {
            --col-count: 5;
        }
    }
    @media (max-width: 1000px) {
        .card-flex-list--block {
            --col-count: 4;
        }
        .card-flex-list--block .flex-list-item {
            --col-span: 1 !important;
        }
    }
    @media (max-width: 800px) {
        .card-flex-list--block {
            --col-count: 3;
        }
    }
    @media (max-width: 500px) {
        .card-flex-list--block {
            --col-count: 2;
        }
    }
    @media (max-width: 320px) {
        .card-flex-list--block {
            --col-count: 1;
        }
    }
    .section-product-list .flex-card {
        --kit-color-content: #FFF;
        --aspect-ratio: calc(200 / 250);
        --aspect-ratio: 1;
    }
    .section-product-list .flex-card__picture {
        flex-grow: 1;
    }
    .flex-card__picture img {
        object-fit: cover;
    }
    .flex-card__hover {
        color: grey;
        font-size: 0.8em;
    }
</style>
<?php

$items = array_fill(0, 20, [
    '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://placehold.co/200">',
    '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" style>
            <?php
            foreach($items as $i =>$item) {
                $colSpan = match ($i){
                    0, 3 => 2,
                    1, 7 => 3,
                    14 => 5,
                    default => 1,
                }?>
                <div class="flex-list-item" style="--col-span: <?=$colSpan?>;">
                    <?php
                    echo app()->service()->templater()->get('kit:card/block', $item);
                    ?>
                </div>
            <?php }?>
        </div>

        <div class="flex-list card-flex-list card-flex-list--block flex-aspect-ratio" style="--gap: 50px;">
            <?php
            foreach($items as $i =>$item) {
                $colSpan = match ($i){
                    0, 3 => 2,
                    1, 7 => 3,
                    14 => 5,
                    default => 1,
                }?>
                <div class="flex-list-item" style="--col-span: <?=$colSpan?>;">
                    <?php
                    echo '<div><div style="background-color: #0a7ddd;border: 1px solid;width: 100%;height: 100%;"></div></div>';
                    ?>
                </div>
            <?php }?>
        </div>
    </section>
</div>