Block Card Grid

Grid layout for multiple cards.

Twig

Twig

Es una ramita.

Twig

Es una ramita.
Twig es una ramita
Twig

Twig

Es una ramita.
Twig

Twig

Es una ramita.
Twig

Twig

Es una ramita.
Twig

Twig

Es una ramita.
Twig

Twig

Es una ramita.
Twig

Twig

Es una ramita.
Twig

Twig

Es una ramita.
Twig

Twig

Es una ramita.
Twig

Twig

Es una ramita.
Twig

Twig

Es una ramita.
{# derafu_twig:templates/pages/components/block-card-grid.html.twig #}

{% extends 'layouts/default.html.twig' %}

{% block content %}
<twig:block-card-grid
    :cards="[
        {
            image: '../../img/block-hero.jpeg',
            title: 'Twig',
            description: 'Es una ramita.',
            button_text: 'Aprende sobre Twig',
            button_url: 'https://twig.symfony.com'
        },
        {
            title: 'Twig',
            description: 'Es una ramita.',
            button_text: 'Aprende sobre Twig',
            button_url: 'https://twig.symfony.com'
        },
        {
            image: '../../img/block-hero.jpeg',
            description: 'Twig es una ramita'
        }
    ]"
    :cols="3"
/>

<twig:block-card-grid
    :cards="[
        {
            image: '../../img/block-hero.jpeg',
            title: 'Twig',
            description: 'Es una ramita.',
            button_text: 'Aprende sobre Twig',
            button_url: 'https://twig.symfony.com'
        },
        {
            image: '../../img/block-hero.jpeg',
            title: 'Twig',
            description: 'Es una ramita.',
            button_text: 'Aprende sobre Twig',
            button_url: 'https://twig.symfony.com'
        },
        {
            image: '../../img/block-hero.jpeg',
            title: 'Twig',
            description: 'Es una ramita.',
            button_text: 'Aprende sobre Twig',
        },
        {
            image: '../../img/block-hero.jpeg',
            title: 'Twig',
            description: 'Es una ramita.',
            button_text: 'Aprende sobre Twig',
            button_url: 'https://twig.symfony.com'
        }
    ]"
    :cols="4"

/>

<twig:block-card-grid
    :cards="[
        {
            image: '../../img/block-hero.jpeg',
            title: 'Twig',
            description: 'Es una ramita.',
            button_text: 'Aprende sobre Twig',
            button_url: 'https://twig.symfony.com',
            offset: 4
        }
    ]"

    :cols="3"
/>
<twig:block-card-grid
    :cards="[
        {
            image: '../../img/block-hero.jpeg',
            title: 'Twig',
            description: 'Es una ramita.',
            button_text: 'Aprende sobre Twig',
            button_url: 'https://twig.symfony.com'
        },
        {
            image: '../../img/block-hero.jpeg',
            title: 'Twig',
            description: 'Es una ramita.',
            button_text: 'Aprende sobre Twig',
            button_url: 'https://twig.symfony.com'
        },
        {
            image: '../../img/block-hero.jpeg',
            title: 'Twig',
            description: 'Es una ramita.',
            button_text: 'Aprende sobre Twig',
            button_url: 'https://twig.symfony.com'
        },
        {
            image: '../../img/block-hero.jpeg',
            title: 'Twig',
            description: 'Es una ramita.',
            button_text: 'Aprende sobre Twig',
            button_url: 'https://twig.symfony.com'
        },
        {
            image: '../../img/block-hero.jpeg',
            title: 'Twig',
            description: 'Es una ramita.',
            button_text: 'Aprende sobre Twig',
            button_url: 'https://twig.symfony.com',
            offset: 4
        }
    ]"

    :cols="3"
/>
{% endblock %}