Home

Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Soft UI Dashboard Soft UI Design System Asteria Dashboard Riva Dashboard Tailwind Chakra UI Dashboard Motion Landing Library Argon Dashboard AdminKit Soft UI Dashboard Tailwind
All 561
Forms 12
Charts 21
Navbars 38
Sidebars 26
Typography 41
Components 51
Tables 34
Cards 63
Cards Section 37
Testimonials 13
Teams Section 11
Faq 4
Headers 36
Blogs 11
Contacts Section 9
Profiles Section 13
Charts Section 7
Tables Section 15
Contents 13
Projects Section 14
Stats 7
Logo Areas 6
Authentication 10
Contact Us 5
Features 19
Pricing 7
Teams 9
Call To Actions 13
Http Codes 2

Teams Section - All Examples

Discover 11 Teams Section examples available in Loopple

Section Teams Social

Asteria Dashboard View Theme

Section Teams Simple

Asteria Dashboard View Theme 
<div class="row removable">
    <div class="col-xl-3 col-md-6 drop-zone">
        <div class="card mb-4 draggable" draggable="true">
            <!-- Card body -->
            <div class="card-body p-3">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60" class="avatar avata-sm">
                    </div>
                    <div class="ms-3">
                        <span class="h6 font-weight-bold mb-0">Alex Mirrial</span>
                        <h6 class="card-title text-capitalize text-muted text-sm mb-0">CEO</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 drop-zone">
        <div class="card mb-4 draggable" draggable="true">
            <!-- Card body -->
            <div class="card-body p-3">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="https://images.unsplash.com/photo-1485893086445-ed75865251e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" class="avatar avata-sm">
                    </div>
                    <div class="ms-3">
                        <span class="h6 font-weight-bold mb-0">Miriam Silfon</span>
                        <h6 class="card-title text-muted text-sm mb-0">Back-End Developer</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 drop-zone">
        <div class="card mb-4 draggable" draggable="true">
            <!-- Card body -->
            <div class="card-body p-3">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="https://images.unsplash.com/photo-1564061170517-d3907caa96ea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8ODF8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" class="avatar avata-sm">
                    </div>
                    <div class="ms-3">
                        <span class="h6 font-weight-bold mb-0">Alexis Thomson</span>
                        <h6 class="card-title text-muted text-sm mb-0">UI Designer</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 drop-zone">
        <div class="card mb-4 draggable" draggable="true">
            <!-- Card body -->
            <div class="card-body p-3">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="https://images.unsplash.com/photo-1529068755536-a5ade0dcb4e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTR8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" class="avatar avata-sm">
                    </div>
                    <div class="ms-3">
                        <span class="h6 font-weight-bold mb-0">Maxim Illias</span>
                        <h6 class="card-title text-muted text-sm mb-0">Java Developer</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

Teams Contact

Riva Dashboard Tailwind View Theme

Teams Section Members

Riva Dashboard Tailwind View Theme 
<div class="relative flex-[1_auto] flex flex-col break-words min-w-0 bg-clip-border rounded-[.95rem] border border-dashed border-stone-200 bg-white mb-5 draggable">
    <!-- card body  -->
    <div class="flex-auto block py-8 px-9">
        <div>
        <div class="mb-9">
            <h1 class="mb-2 text-[1.75rem] font-semibold text-dark">Our Executive Team</h1>
            <span class="text-[1.15rem] font-medium text-muted">
            Meet our talented team, a dynamic group of experts driven by passion and innovation.
            </span>
        </div>
        <div class="flex flex-wrap w-full">
            <div class="flex flex-col mr-5 text-center mb-11 lg:mr-16">
            <div class="inline-block mb-4 relative shrink-0 rounded-[.95rem]">
                <img class="inline-block shrink-0 rounded-[.95rem] w-[10px] h-[150px]"
                src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/avatars/avatar11.jpg" alt="avarat image">
            </div>
            <div class="text-center">
                <a href="javascript:void(0)"
                class="text-dark font-semibold hover:text-primary text-[1.25rem] transition-colors duration-200 ease-in-out">Samantha Reynolds</a>
                <span class="block font-medium text-muted">Marketing Manager</span>
            </div>
            </div>
            <div class="flex flex-col mr-5 text-center mb-11 lg:mr-16">
            <div class="inline-block mb-4 relative shrink-0 rounded-[.95rem]">
                <img class="inline-block shrink-0 rounded-[.95rem] w-[150px] h-[150px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/avatars/avatar2.jpg"
                alt="avarat image">
            </div>
            <div class="text-center">
                <a href="javascript:void(0)"
                class="text-dark font-semibold hover:text-primary text-[1.25rem] transition-colors duration-200 ease-in-out">Benjamin Martinez</a>
                <span class="block font-medium text-muted">Sales Executive</span>
            </div>
            </div>
            <div class="flex flex-col mr-5 text-center mb-11 lg:mr-16">
            <div class="inline-block mb-4 relative shrink-0 rounded-[.95rem]">
                <img class="inline-block shrink-0 rounded-[.95rem] w-[150px] h-[150px]" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/avatars/avatar5.jpg"
                alt="avarat image">
            </div>
            <div class="text-center">
                <a href="javascript:void(0)"
                class="text-dark font-semibold hover:text-primary text-[1.25rem] transition-colors duration-200 ease-in-out">Emily Turner</a>
                <span class="block font-medium text-muted">Customer Support</span>
            </div>
            </div>
            <div class="flex flex-col mr-5 text-center mb-11 lg:mr-16">
            <div class="inline-block mb-4 relative shrink-0 rounded-[.95rem]">
                <img class="inline-block shrink-0 rounded-[.95rem] w-[150px] h-[150px]"
                src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/avatars/avatar24.jpg" alt="avarat image">
            </div>
            <div class="text-center">
                <a href="javascript:void(0)"
                class="text-dark font-semibold hover:text-primary text-[1.25rem] transition-colors duration-200 ease-in-out">Jason Anderson</a>
                <span class="block font-medium text-muted">Development Engineer</span>
            </div>
            </div>
            <div class="flex flex-col mr-5 text-center mb-11 lg:mr-16">
            <div class="inline-block mb-4 relative shrink-0 rounded-[.95rem]">
                <img class="inline-block shrink-0 rounded-[.95rem] w-[150px] h-[150px]"
                src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/riva-dashboard-tailwind/img/avatars/avatar23.jpg" alt="avarat image">
            </div>
            <div class="text-center">
                <a href="javascript:void(0)"
                class="text-dark font-semibold hover:text-primary text-[1.25rem] transition-colors duration-200 ease-in-out">Olivia Carter</a>
                <span class="block font-medium text-muted">Creative Director</span>
            </div>
            </div>
        </div>
        </div>
    </div>
</div>

Section Teams Simple

Argon Dashboard View Theme 
<div class="row removable">
    <div class="col-xl-3 col-md-6 drop-zone">
        <div class="card card-stats draggable" draggable="true">
            <!-- Card body -->
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" class="avatar avata-sm rounded-circle">
                    </div>
                    <div class="ml-3">
                        <span class="h4 font-weight-bold mb-0">Alex Mirrial</span>
                        <h6 class="card-title text-uppercase text-muted mb-0">CEO</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 drop-zone">
        <div class="card card-stats draggable" draggable="true">
            <!-- Card body -->
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" class="avatar avata-sm rounded-circle">
                    </div>
                    <div class="ml-3">
                        <span class="h4 font-weight-bold mb-0">Miriam Jockson</span>
                        <h6 class="card-title text-uppercase text-muted mb-0">CTO</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 drop-zone">
        <div class="card card-stats draggable" draggable="true">
            <!-- Card body -->
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" class="avatar avata-sm rounded-circle">
                    </div>
                    <div class="ml-3">
                        <span class="h4 font-weight-bold mb-0">Alice Kambell</span>
                        <h6 class="card-title text-uppercase text-muted mb-0">Full-Stack Developer</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 drop-zone">
        <div class="card card-stats draggable" draggable="true">
            <!-- Card body -->
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" class="avatar avata-sm rounded-circle">
                    </div>
                    <div class="ml-3">
                        <span class="h4 font-weight-bold mb-0">Johanna Sielle</span>
                        <h6 class="card-title text-uppercase text-muted mb-0">Front-End Developer</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Section Teams Contact

Argon Dashboard View Theme

Section Teams Social Links

Argon Dashboard View Theme

Section Teams Simple

Soft UI Dashboard View Theme 
<div class="row removable">
    <div class="col-xl-3 col-md-6 drop-zone mb-4">
        <div class="card draggable">
            <!-- Card body -->
            <div class="card-body p-3">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/bruce-mars.jpg" class="avatar avata-sm">
                    </div>
                    <div class="ms-3">
                        <span class="h6 font-weight-bold mb-0">Alex Mirrial</span>
                        <h6 class="card-title text-capitalize text-muted text-sm mb-0">CEO</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 drop-zone mb-4">
        <div class="card draggable">
            <!-- Card body -->
            <div class="card-body p-3">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-1.jpg" class="avatar avata-sm">
                    </div>
                    <div class="ms-3">
                        <span class="h6 font-weight-bold mb-0">Miriam Silfon</span>
                        <h6 class="card-title text-muted text-sm mb-0">Back-End Developer</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 drop-zone mb-4">
        <div class="card draggable">
            <!-- Card body -->
            <div class="card-body p-3">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-2.jpg" class="avatar avata-sm">
                    </div>
                    <div class="ms-3">
                        <span class="h6 font-weight-bold mb-0">Alexis Thomson</span>
                        <h6 class="card-title text-muted text-sm mb-0">UI Designer</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 drop-zone mb-4">
        <div class="card draggable">
            <!-- Card body -->
            <div class="card-body p-3">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-3.jpg" class="avatar avata-sm">
                    </div>
                    <div class="ms-3">
                        <span class="h6 font-weight-bold mb-0">Maxim Illias</span>
                        <h6 class="card-title text-muted text-sm mb-0">Java Developer</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Section Teams Social Image Right

Soft UI Dashboard View Theme

Section Teams Social

Soft UI Dashboard View Theme