Block Tabs

Tabbed content interface, with horizontal and vertical layout.

Lorem ipsum dolor sit amet

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.
Lorem ipsum dolor sit amet

Información

Contenido...

Lorem ipsum dolor sit amet

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.
Lorem ipsum dolor sit amet

Información

Contenido...

{# 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: 'Conoce más',
                url: 'https://www.example.com'
            },
            {
                text: 'Solicita un período de prueba GRATIS',
                url: 'https://www.example.com'
            }
        ]"
        image="{{ base_path }}/img/block-hero.jpeg"
    />
{% endset %}

{% set tab_content_2 %}
    <h2>Información</h2>
    <p>Contenido...</p>
{% endset %}

<twig:block-tabs
    :tabs="[
        {
            'id': 'features',
            'title': 'Características',
            'icon': 'fa-solid fa-list',
            'content': tab_content_1
        },
        {
            'id': 'info',
            'title': 'Información',
            'icon': 'fa-solid fa-info-circle',
            'content': tab_content_2
        }
    ]"
/>
<twig:block-tabs
    :tabs="[
        {
            'id': 'features2',
            'title': 'Características',
            'icon': 'fa-solid fa-list',
            'content': tab_content_1
        },
        {
            'id': 'info2',
            'title': 'Información',
            'icon': 'fa-solid fa-info-circle',
            'content': tab_content_2
        }
    ]"
    position="vertical"
    :cols="3"
/>
{% endblock %}