Block Tabs

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

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

{% block content %}

{% set tab_content_1 %}
    <twig:block-text-image
        title="Lorem ipsum dolor sit amet"
        content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet commodo odio. Mauris sagittis consequat quam interdum laoreet. Vivamus pretium pellentesque ligula, eget euismod turpis maximus sed."
        :buttons="[
            {
                text: 'Learn more',
                url: 'https://www.example.com'
            },
            {
                text: 'Request a FREE trial period',
                url: 'https://www.example.com'
            }
        ]"
        image="{{ base_path }}/img/block-hero.jpeg"
        :insideTabs="true"
    />
{% endset %}

{% set tab_content_2 %}
    <h2>Information</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet commodo odio. Mauris sagittis consequat quam interdum laoreet. Vivamus pretium pellentesque ligula, eget euismod turpis maximus sed....</p>
{% endset %}

<twig:block-tabs
    class="my-4"
    :tabs="[
        {
            id: 'features',
            title: 'Features',
            icon: 'fa-solid fa-list',
            content: tab_content_1
        },
        {
            id: 'info',
            title: 'Information',
            icon: 'fa-solid fa-info-circle',
            content: tab_content_2
        }
    ]"
/>

<twig:block-tabs
    class="my-4"
    position="vertical"
    :withShadow="true"
    :cols="3"
    :tabs="[
        {
            id: 'features2',
            title: 'hello',
            icon: 'fa-solid fa-list',
            content: tab_content_1
        },
        {
            id: 'info2',
            title: 'Information',
            icon: 'fa-solid fa-info-circle',
            content: tab_content_2
        }
    ]"
/>

{% endblock %}