File: templates/shells/bbs-menu/main-menu-cards.twig

{# Card grid menu variant for BBS shell #}
{% set menuItems = bbs_menu_items %}
<div class="row row-cols-2 row-cols-md-3 g-3">
    {% for item in menuItems %}
    <div class="col">
        <a href="{{ item.url | e }}" class="text-decoration-none{% if item.url == '/files' %} file-menu-link{% endif %}">
            <div class="card h-100 text-center bbs-menu-card" style="cursor:pointer;">
                <div class="card-body py-4">
                    <div class="mb-2">
                        <span class="badge bg-primary fs-6">{{ item.key | upper | e }}</span>
                    </div>
                    <i class="fas fa-{{ item.icon | default('circle') | e }} fa-2x text-primary mb-2{% if item.url == '/files' %} file-menu-icon{% endif %}"></i>
                    <h6 class="card-title mb-0">{{ item.label | e }}</h6>
                </div>
            </div>
        </a>
    </div>
    {% endfor %}
</div>
<div class="mt-3 text-muted small text-center d-none d-md-block">
    <i class="fas fa-keyboard me-1"></i> {{ t('ui.bbs_menu.press_highlighted_key', {}, locale, ['common']) }} &bull; <kbd>Q</kbd> / <kbd>Esc</kbd> {{ t('ui.bbs_menu.returns_to_menu', {}, locale, ['common']) }}
</div>
<div class="mt-3 text-muted small text-center d-md-none">
    {{ t('ui.bbs_menu.tap_card_to_navigate', {}, locale, ['common']) }}
</div>