Block Grid

{# derafu_twig:templates/pages/components/block-grid.html.twig #}

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

{% block content %}

{% set grid_item_1 %}
    <h2>Item 1</h2>
    <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada tellus velit, in fringilla turpis interdum aliquet. Donec eget neque sit amet orci gravida eleifend. Fusce aliquet <a href="https://www.example.com/" target="_blank">tempus gravida.</a></p>
{% endset %}

{% set grid_item_2 %}
    <twig:block-image
        title="What is Twig?"
        image="{{ base_path }}/img/block-hero.jpeg"
        content="<p>A small branch.</p>"
        :buttons="[
            {
                text: 'Learn about Twig',
                url: 'https://twig.symfony.com/'
            }
        ]"
    />
{% endset %}

{% set grid_item_3 %}
    <twig:block-image
        title="Lorem ipsum"
        image="{{ base_path }}/img/block-hero.jpeg"
        content="<p>Dolor sit amet</p>"
        :buttons="[
            {
                text: 'Consectetur',
                url: 'https://twig.symfony.com/'
            }
        ]"
    />
{% endset %}

{# Example 1: Grid without specified columns #}
<twig:block-grid
    class="my-4"
    :items="[
        grid_item_1,
        grid_item_2,
    ]"
/>

{# Example 2: Grid with 4 columns #}
<twig:block-grid
    class="my-4"
    cols="4"
    :items="[
        grid_item_1,
        grid_item_2,
        grid_item_3,
        grid_item_2,
    ]"
/>

{% endblock %}