Team Sections

Team block components for displaying team members in a horizontal card layout with images and social links, or a centered grid layout with rounded avatars.

Default Team Cards

Blade code

<x-fwb.blocks.marketing.team-cards />

Custom Team Cards with Slot Content

Meet Our Leadership

The people behind the product who make everything possible.

Bonnie Avatar

Jane Smith

CEO & Founder

Jane leads the company vision and strategy.

John Avatar

John Doe

CTO

John drives the technical direction of the platform.

Blade code

<x-fwb.blocks.marketing.team-cards
    title="Meet Our Leadership"
    description="The people behind the product who make everything possible."
>
    <div class="items-center bg-gray-50 rounded-lg shadow sm:flex dark:bg-gray-800 dark:border-gray-700">
        <a href="#">
            <img class="w-full rounded-lg sm:rounded-none sm:rounded-l-lg" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png" alt="Bonnie Avatar">
        </a>
        <div class="p-5">
            <h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
                <a href="#">Jane Smith</a>
            </h3>
            <span class="text-gray-500 dark:text-gray-400">CEO & Founder</span>
            <p class="mt-3 mb-4 font-light text-gray-500 dark:text-gray-400">Jane leads the company vision and strategy.</p>
        </div>
    </div>
    <div class="items-center bg-gray-50 rounded-lg shadow sm:flex dark:bg-gray-800 dark:border-gray-700">
        <a href="#">
            <img class="w-full rounded-lg sm:rounded-none sm:rounded-l-lg" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png" alt="John Avatar">
        </a>
        <div class="p-5">
            <h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
                <a href="#">John Doe</a>
            </h3>
            <span class="text-gray-500 dark:text-gray-400">CTO</span>
            <p class="mt-3 mb-4 font-light text-gray-500 dark:text-gray-400">John drives the technical direction of the platform.</p>
        </div>
    </div>
</x-fwb.blocks.marketing.team-cards>

Default Team Grid

Blade code

<x-fwb.blocks.marketing.team-grid />

Custom Team Grid with Slot Content

Our Engineers

Meet the talented engineers who build and maintain our platform every day.

Alice Avatar

Alice Johnson

Lead Engineer

Bob Avatar

Bob Williams

Senior Developer

Blade code

<x-fwb.blocks.marketing.team-grid
    title="Our Engineers"
    description="Meet the talented engineers who build and maintain our platform every day."
>
    <div class="text-center text-gray-500 dark:text-gray-400">
        <img class="mx-auto mb-4 w-36 h-36 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png" alt="Alice Avatar">
        <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
            <a href="#">Alice Johnson</a>
        </h3>
        <p>Lead Engineer</p>
    </div>
    <div class="text-center text-gray-500 dark:text-gray-400">
        <img class="mx-auto mb-4 w-36 h-36 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png" alt="Bob Avatar">
        <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
            <a href="#">Bob Williams</a>
        </h3>
        <p>Senior Developer</p>
    </div>
</x-fwb.blocks.marketing.team-grid>

Component Properties

Team Cards x-fwb.blocks.marketing.team-cards

Prop Type Default Description
title string Our Team The section heading text.
description string Explore the whole collection of... The paragraph text below the heading.
slot slot - Default slot for custom team member cards. When empty, four default team members are displayed in a horizontal card layout with image, name, role, bio, and social links.

Team Grid x-fwb.blocks.marketing.team-grid

Prop Type Default Description
title string Our team The section heading text.
description string Explore the whole collection of... The paragraph text below the heading.
slot slot - Default slot for custom team member entries. When empty, four default members are displayed in a centered grid with rounded avatars, names, roles, and social links.