---
title: "Tabs"
description: "Tabbed content interface, with horizontal and vertical layout."
type: "docs"
category: "doc"
tags: []
authors: [Anonymous]
date: "2026-09-09"
last_update: "2026-09-09"
time_minutes: 1
draft: false
unlisted: false
url: "https://www.derafu.dev/docs/ui/twig/components/block-tabs"
---

{% 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="/img/home/derafu-dev-programmer.png"
        :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
        }
    ]"
/>



---
Last updated on 09/09/2026