Block Features Icon

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

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

{% block content %}

{# Case 4 elements (one row of 4) #}
<twig:block-features-icon
    class="my-4"
    :features="[
        {
            icon: 'fa-solid fa-cloud',
            title: 'Software as a Service',
            content: 'We are a cloud software, you need Internet access to <a href=\'https://www.example.com/\' target=\'_blank\'>use it.</a>'
        },
        {
            icon: 'fa-solid fa-money-bill',
            title: '<a href=\'https://www.example.com/\' target=\'_blank\'>Price</a> per company',
            content: 'The Plus Service price is per company. If you have 3 companies, you will need to pay for 3 Plus Services.'
        },
        {
            icon: 'fa-solid fa-arrows-left-right',
            title: 'SII Synchronization',
            content: 'Your tax documents are immediately sent to SII and we monitor their status.'
        },
        {
            icon: 'fa-solid fa-check',
            title: 'Feature 4',
            content: 'Content of feature 4.'
        }
    ]"
/>

{# Case 5 elements (row of 3 + row of 2) #}
<twig:block-features-icon
    class="my-4"
    :features="[
        {
            icon: 'fa-solid fa-cloud',
            title: 'Feature 1',
            content: 'Content 1'
        },
        {
            icon: 'fa-solid fa-money-bill',
            title: 'Feature 2',
            content: 'Content 2'
        },
        {
            icon: 'fa-solid fa-arrows-left-right',
            title: 'Feature 3',
            content: 'Content 3'
        },
        {
            icon: 'fa-solid fa-check',
            title: 'Feature 4',
            content: 'Content 4'
        },
        {
            icon: 'fa-solid fa-star',
            title: 'Feature 5',
            content: 'Content 5'
        }
    ]"
/>

{# Case 8 elements (two rows of 4) #}
<twig:block-features-icon
    class="my-4"
    :features="[
        {
            icon: 'fa-solid fa-cloud',
            title: 'Feature 1',
            content: 'Content 1'
        },
        {
            icon: 'fa-solid fa-money-bill',
            title: 'Feature 2',
            content: 'Content 2'
        },
        {
            icon: 'fa-solid fa-arrows-left-right',
            title: 'Feature 3',
            content: 'Content 3'
        },
        {
            icon: 'fa-solid fa-check',
            title: 'Feature 4',
            content: 'Content 4'
        },
        {
            icon: 'fa-solid fa-star',
            title: 'Feature 5',
            content: 'Content 5'
        },
        {
            icon: 'fa-solid fa-heart',
            title: 'Feature 6',
            content: 'Content 6'
        },
        {
            icon: 'fa-solid fa-bell',
            title: 'Feature 7',
            content: 'Content 7'
        },
        {
            icon: 'fa-solid fa-user',
            title: 'Feature 8',
            content: 'Content 8'
        }
    ]"
/>

{% endblock %}