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.

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.

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 %}