---
title: "Team"
description: "Team members display with roles and social links."
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-team"
---

<twig:block-team
    class="my-4"
    :cols="1"
    :members="[
        {
            name: 'John Doe',
            role: 'Founder',
            image: '/img/home/derafu-dev-programmer.png',
            bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing <a href=\'https://www.example.com/\' target=\'_blank\'>elit.</a href>',
            links: [
                {
                    icon: 'fa-brands fa-linkedin',
                    text: 'LinkedIn',
                    url: 'https://www.example.com'
                },
                {
                    icon: 'fa-brands fa-github',
                    text: 'GitHub',
                    url: 'https://www.example.com'
                }
            ]
        }
    ]"
/>

<twig:block-team
    class="my-4"
    :cols="2"
    :members="[
        {
            name: 'John Doe',
            role: 'Founder',
            image: '/img/home/derafu-dev-programmer.png',
            bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            links: [
                {
                    icon: 'fa-brands fa-linkedin',
                    text: 'LinkedIn',
                    url: 'https://www.example.com'
                },
                {
                    icon: 'fa-brands fa-github',
                    text: 'GitHub',
                    url: 'https://www.example.com'
                }
            ]
        },
        {
            name: 'Jane Smith',
            role: 'Co-Founder',
            image: '/img/home/derafu-dev-programmer.png',
            bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            links: [
                {
                    icon: 'fa-brands fa-linkedin',
                    text: 'LinkedIn',
                    url: 'https://www.example.com'
                }
            ]
        }
    ]"
/>

<twig:block-team
    class="my-4"
    :cols="3"
    :members="[
        {
            name: 'John Doe',
            role: 'Founder',
            image: '/img/home/derafu-dev-programmer.png',
            bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            links: [
                {
                    icon: 'fa-brands fa-linkedin',
                    text: 'LinkedIn',
                    url: 'https://www.example.com'
                },
                {
                    icon: 'fa-brands fa-github',
                    text: 'GitHub',
                    url: 'https://www.example.com'
                }
            ]
        },
        {
            name: 'Jane Smith',
            role: 'Co-Founder',
            image: '/img/home/derafu-dev-programmer.png',
            bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            links: [
                {
                    icon: 'fa-brands fa-linkedin',
                    text: 'LinkedIn',
                    url: 'https://www.example.com'
                }
            ]
        },
        {
            name: 'Mike Johnson',
            role: 'Developer',
            image: '/img/home/derafu-dev-programmer.png',
            bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            links: [
                {
                    icon: 'fa-brands fa-github',
                    text: 'GitHub',
                    url: 'https://www.example.com'
                }
            ]
        }
    ]"
/>

<twig:block-team
    class="my-4"
    :cols="4"
    :members="[
        {
            name: 'John Doe',
            role: 'Founder',
            image: '/img/home/derafu-dev-programmer.png',
            bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            links: [
                {
                    icon: 'fa-brands fa-linkedin',
                    text: 'LinkedIn',
                    url: 'https://www.example.com'
                }
            ]
        },
        {
            name: 'Jane Smith',
            role: 'Co-Founder',
            image: '/img/home/derafu-dev-programmer.png',
            bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            links: [
                {
                    icon: 'fa-brands fa-github',
                    text: 'GitHub',
                    url: 'https://www.example.com'
                }
            ]
        },
        {
            name: 'Saul Goodman',
            role: 'HR',
            image: '/img/home/derafu-dev-programmer.png',
            bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            links: [
                {
                    icon: 'fa-brands fa-linkedin',
                    text: 'LinkedIn',
                    url: 'https://www.example.com'
                }
            ]
        },
        {
            name: 'Mike Johnson',
            role: 'Developer',
            image: '/img/home/derafu-dev-programmer.png',
            bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            links: [
                {
                    icon: 'fa-brands fa-github',
                    text: 'GitHub',
                    url: 'https://www.example.com'
                }
            ]
        }
    ]"
/>



---
Last updated on 09/09/2026