Block Big Boxes

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

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

{% block content %}

<twig:block-boxes
    class="my-4"
    cols="1"
    :boxes="[
        {
            icon: 'fa-solid fa-search',
            title: 'Lorem ipsum dolor sit amet',
            content: 'Lorem ipsum dolor sit amet, consectetur <a href=\'https://www.example.com/\' target=\'_blank\'>adipiscing elit.</a>',
            buttonText: 'Lorem ipsum',
            buttonUrl: '#'
        }
    ]"
/>

<twig:block-boxes
    class="my-4"
    :boxes="[
        {
            icon: 'fa-solid fa-search',
            title: 'Lorem ipsum dolor sit amet',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            buttonText: 'Lorem ipsum',
            buttonUrl: '#'
        },
        {
            icon: 'fa-solid fa-file',
            title: 'Lorem ipsum dolor sit amet',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            buttonText: 'Lorem ipsum',
        }
    ]"
/>

<twig:block-boxes
    class="my-4"
    cols="3"
    :boxes="[
        {
            icon: 'fa-solid fa-search',
            title: 'Lorem ipsum dolor sit amet',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        },
        {
            icon: 'fa-solid fa-file',
            title: 'Lorem ipsum dolor sit amet',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            buttonText: 'Lorem ipsum',
            buttonUrl: '#'
        },
        {
            icon: 'fa-solid fa-file',
            title: 'Lorem ipsum dolor sit amet',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            buttonText: 'Lorem ipsum',
            buttonUrl: '#'
        }
    ]"
/>

{% endblock %}