Team Components in Vista library

Team from Vista

<section class="bg-darkPink-900 pt-32 pb-56"> <div class="container mx-auto px-4"> <p class="uppercase text-sweetPink-400 tracking-widest text-xs mb-4">diverse and world-class</p> <div class="flex justify-between items-center flex-wrap gap-4 mb-20"> <h1 class="font-heading text-white text-4xl md:text-5xl font-bold">Meet our team</h1> <div class="flex flex-wrap items-center gap-8"> <div class="flex items-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M9.27232 5.86195L9.50687 6.42602L10.1158 6.47481L13.4188 6.73946L10.9024 8.89524L10.4387 9.29254L10.5803 9.88656L11.3486 13.1096L8.52091 11.3826L7.99968 11.0642L7.47844 11.3826L4.65075 13.1096L5.41909 9.88656L5.56069 9.29254L5.09694 8.89524L2.58054 6.73946L5.88355 6.47481L6.49248 6.42602L6.72703 5.86195L7.99968 2.80137L9.27232 5.86195ZM4.581 13.4022L4.58109 13.4019L4.581 13.4022ZM2.28065 6.76349L2.28088 6.76347L2.28065 6.76349Z" fill="#F53D6C" stroke="#F53D6C" style="fill:#F53D6C;fill:color(display-p3 0.9608 0.2392 0.4235);fill-opacity:1;stroke:#F53D6C;stroke:color(display-p3 0.9608 0.2392 0.4235);stroke-opacity:1;" stroke-width="2"></path> </svg> <p class="text-pink-500 font-semibold">We are hiring!</p> </div> <a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full"> <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-500 group-focus:to-white opacity-40 group-focus:opacity-20 rounded-full"></div> <div class="relative z-50 flex items-center py-2 px-4 bg-white group-hover:bg-opacity-80 group-focus:bg-opacity-80 rounded-full transition duration-200"> <p class="mr-2 text-pinkSecondary-900">Careers</p> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M9.43032 8.28857L9.4303 8.28856L9.42602 8.29284L6.45312 11.2657V8.20662V4.7275L8.11268 6.38706L9.42602 7.70039C9.59121 7.86558 9.58501 8.13574 9.43032 8.28857Z" fill="black" stroke="currentColor" stroke-width="2"></path> </svg> </div> </a> </div> </div> <div class="flex flex-wrap -m-4"> <div class="w-full lg:w-1/3 p-4"> <div class="relative bg-pink-500 rounded-2xl pt-7 mb-12 lg:mb-0"> <img class="mx-auto h-72 object-cover" src="vista-assets/images/team/team1.png" alt=""> <div class="absolute -bottom-12 left-4 right-4"> <div class="bg-pinkSecondary-900 rounded-xl p-4"> <p class="text-white text-lg font-semibold mb-1">David Dobryk</p> <div class="flex flex-wrap justify-between items-center gap-4"> <p class="text-white text-opacity-70 text-sm">Founder & CEO</p> <div class="flex gap-4"> <a href="#" class="inline-block opacity-50 hover:opacity-100 transition duration-200"> <img class="h-4" src="vista-assets/images/logos/twitter-x-logo.svg" alt=""> </a> <a href="#" class="inline-block opacity-50 hover:opacity-100 transition duration-200"> <img class="h-4" src="vista-assets/images/logos/linkedin-logo.svg" alt=""> </a> </div> </div> </div> </div> </div> </div> <div class="w-full lg:w-1/3 p-4"> <div class="relative bg-pink-500 rounded-2xl pt-7 mb-12 lg:mb-0"> <img class="mx-auto h-72 object-cover" src="vista-assets/images/team/team2.png" alt=""> <div class="absolute -bottom-12 left-4 right-4"> <div class="bg-pinkSecondary-900 rounded-xl p-4"> <p class="text-white text-lg font-semibold mb-1">Milena Graz</p> <div class="flex flex-wrap justify-between items-center gap-4"> <p class="text-white text-opacity-70 text-sm">Founder & CEO</p> <div class="flex gap-4"> <a href="#" class="inline-block opacity-50 hover:opacity-100 transition duration-200"> <img class="h-4" src="vista-assets/images/logos/twitter-x-logo.svg" alt=""> </a> <a href="#" class="inline-block opacity-50 hover:opacity-100 transition duration-200"> <img class="h-4" src="vista-assets/images/logos/linkedin-logo.svg" alt=""> </a> </div> </div> </div> </div> </div> </div> <div class="w-full lg:w-1/3 p-4"> <div class="relative bg-pink-500 rounded-2xl pt-7"> <img class="mx-auto h-72 object-cover" src="vista-assets/images/team/team3.png" alt=""> <div class="absolute -bottom-12 left-4 right-4"> <div class="bg-pinkSecondary-900 rounded-xl p-4"> <p class="text-white text-lg font-semibold mb-1">Mike Nelson</p> <div class="flex flex-wrap justify-between items-center gap-4"> <p class="text-white text-opacity-70 text-sm">Head of Technology</p> <div class="flex gap-4"> <a href="#" class="inline-block opacity-50 hover:opacity-100 transition duration-200"> <img class="h-4" src="vista-assets/images/logos/twitter-x-logo.svg" alt=""> </a> <a href="#" class="inline-block opacity-50 hover:opacity-100 transition duration-200"> <img class="h-4" src="vista-assets/images/logos/linkedin-logo.svg" alt=""> </a> </div> </div> </div> </div> </div> </div> </div> </div> </section>

Team from Vista

<section class="position-relative py-12 py-lg-24 pb-xl-32 bg-danger-dark">
  <div class="container">
    <div class="mw-xs mw-md-lg mx-auto mw-md-5xl">
      <div class="row mb-20 align-items-end">
        <div class="col-md-7 mb-10 mb-md-0">
          <div><span class="badge mb-3 text-danger-light text-uppercase" style="letter-spacing: 1.44px;">diverse and world-class</span>
            <h3 class="font-heading mb-0">Meet our team</h3>
          </div>
        </div>
        <div class="col-md-5">
          <div class="d-flex align-items-center justify-content-end">
            <div class="d-flex me-8 align-items-center">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.27232 5.86195L9.50687 6.42602L10.1158 6.47481L13.4188 6.73946L10.9024 8.89524L10.4387 9.29254L10.5803 9.88656L11.3486 13.1096L8.52091 11.3826L7.99968 11.0642L7.47844 11.3826L4.65075 13.1096L5.41909 9.88656L5.56069 9.29254L5.09694 8.89524L2.58054 6.73946L5.88355 6.47481L6.49248 6.42602L6.72703 5.86195L7.99968 2.80137L9.27232 5.86195ZM4.581 13.4022L4.58109 13.4019L4.581 13.4022ZM2.28065 6.76349L2.28088 6.76347L2.28065 6.76349Z" fill="#F53D6C" stroke="#F53D6C" style="fill:#F53D6C;fill:color(display-p3 0.9608 0.2392 0.4235);fill-opacity:1;stroke:#F53D6C;stroke:color(display-p3 0.9608 0.2392 0.4235);stroke-opacity:1;" stroke-width="2"></path>
              </svg><span class="ms-2 text-danger fw-semibold">We are hiring!</span>
            </div><a class="btn py-0 d-inline-flex align-items-center text-danger-dark btn-light border-2 border-secondary border-opacity-25" href="#"><span class="me-2 lh-lg">Careers</span>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.43032 8.28862L9.4303 8.2886L9.42602 8.29289L6.45312 11.2658V8.20666V4.72754L8.11268 6.3871L9.42602 7.70044C9.59121 7.86563 9.58501 8.13579 9.43032 8.28862Z" fill="black" stroke="#2E0F17" style="fill:black;fill-opacity:1;stroke:#2E0F17;stroke:color(display-p3 0.1794 0.0598 0.0891);stroke-opacity:1;" stroke-width="2"></path>
              </svg></a>
          </div>
        </div>
      </div>
      <div class="mw-xs mx-auto mw-lg-none">
        <div class="row">
          <div class="col-lg-4 mb-16 mb-lg-0">
            <div class="position-relative d-flex align-items-end pt-9 bg-danger rounded-2 overflow-hidden" style="height: 316px;"><img class="img-fluid d-block w-100" src="vista-assets/images/team/team1.png" alt=""></div>
            <div class="position-relative mx-4 mt-n8 bg-danger-dark rounded-2">
              <div class="position-relative p-4 bg-secondary bg-opacity-10 rounded-2">
                <div><span class="d-block fs-7 fw-semibold">David Dobryk</span><span class="fs-9 text-white text-opacity-50">Founder &amp; CEO</span></div>
                <div class="position-absolute bottom-0 end-0 m-4"><a class="btn me-2 p-0 border-0 bg-transparent btn-outline-secondary" href="#">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12.1362 1.5H14.3416L9.52357 7.00667L15.1916 14.5H10.7529L7.2769 9.95533L3.29957 14.5H1.0929L6.24624 8.61L0.80957 1.5H5.35957L8.50157 5.654L12.1362 1.5ZM11.3622 13.18H12.5842L4.69624 2.75067H3.3849L11.3622 13.18Z" fill="currentColor"></path>
                    </svg></a><a class="btn p-0 border-0 bg-transparent btn-outline-secondary" href="#">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.1849 1.33334C13.5778 1.33334 13.9546 1.48943 14.2324 1.76726C14.5103 2.04509 14.6663 2.42191 14.6663 2.81483V13.1852C14.6663 13.5781 14.5103 13.9549 14.2324 14.2328C13.9546 14.5106 13.5778 14.6667 13.1849 14.6667H2.81449C2.42158 14.6667 2.04476 14.5106 1.76692 14.2328C1.48909 13.9549 1.33301 13.5781 1.33301 13.1852V2.81483C1.33301 2.42191 1.48909 2.04509 1.76692 1.76726C2.04476 1.48943 2.42158 1.33334 2.81449 1.33334H13.1849ZM12.8145 12.8148V8.8889C12.8145 8.24845 12.5601 7.63423 12.1072 7.18137C11.6543 6.7285 11.0401 6.47408 10.3997 6.47408C9.77005 6.47408 9.03671 6.85927 8.68116 7.43705V6.61483H6.61449V12.8148H8.68116V9.16297C8.68116 8.5926 9.14042 8.12594 9.71079 8.12594C9.98583 8.12594 10.2496 8.2352 10.4441 8.42968C10.6386 8.62416 10.7478 8.88793 10.7478 9.16297V12.8148H12.8145ZM4.20708 5.45186C4.53713 5.45186 4.85366 5.32075 5.08704 5.08737C5.32042 4.85399 5.45153 4.53747 5.45153 4.20742C5.45153 3.51853 4.89597 2.95557 4.20708 2.95557C3.87507 2.95557 3.55666 3.08746 3.32189 3.32222C3.08712 3.55699 2.95523 3.87541 2.95523 4.20742C2.95523 4.89631 3.51819 5.45186 4.20708 5.45186ZM5.23671 12.8148V6.61483H3.18486V12.8148H5.23671Z" fill="currentColor"></path>
                    </svg></a></div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 mb-16 mb-lg-0">
            <div class="position-relative d-flex align-items-end pt-9 bg-danger rounded-2 overflow-hidden" style="height: 316px;"><img class="img-fluid d-block w-100" src="vista-assets/images/team/team2.png" alt=""></div>
            <div class="position-relative mx-4 mt-n8 bg-danger-dark rounded-2">
              <div class="position-relative p-4 bg-secondary bg-opacity-10 rounded-2">
                <div><span class="d-block fs-7 fw-semibold">Milena Graz</span><span class="fs-9 text-white text-opacity-50">Founder &amp; CMO</span></div>
                <div class="position-absolute bottom-0 end-0 m-4"><a class="btn me-2 p-0 border-0 bg-transparent btn-outline-secondary" href="#">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12.1362 1.5H14.3416L9.52357 7.00667L15.1916 14.5H10.7529L7.2769 9.95533L3.29957 14.5H1.0929L6.24624 8.61L0.80957 1.5H5.35957L8.50157 5.654L12.1362 1.5ZM11.3622 13.18H12.5842L4.69624 2.75067H3.3849L11.3622 13.18Z" fill="currentColor"></path>
                    </svg></a><a class="btn p-0 border-0 bg-transparent btn-outline-secondary" href="#">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.1849 1.33334C13.5778 1.33334 13.9546 1.48943 14.2324 1.76726C14.5103 2.04509 14.6663 2.42191 14.6663 2.81483V13.1852C14.6663 13.5781 14.5103 13.9549 14.2324 14.2328C13.9546 14.5106 13.5778 14.6667 13.1849 14.6667H2.81449C2.42158 14.6667 2.04476 14.5106 1.76692 14.2328C1.48909 13.9549 1.33301 13.5781 1.33301 13.1852V2.81483C1.33301 2.42191 1.48909 2.04509 1.76692 1.76726C2.04476 1.48943 2.42158 1.33334 2.81449 1.33334H13.1849ZM12.8145 12.8148V8.8889C12.8145 8.24845 12.5601 7.63423 12.1072 7.18137C11.6543 6.7285 11.0401 6.47408 10.3997 6.47408C9.77005 6.47408 9.03671 6.85927 8.68116 7.43705V6.61483H6.61449V12.8148H8.68116V9.16297C8.68116 8.5926 9.14042 8.12594 9.71079 8.12594C9.98583 8.12594 10.2496 8.2352 10.4441 8.42968C10.6386 8.62416 10.7478 8.88793 10.7478 9.16297V12.8148H12.8145ZM4.20708 5.45186C4.53713 5.45186 4.85366 5.32075 5.08704 5.08737C5.32042 4.85399 5.45153 4.53747 5.45153 4.20742C5.45153 3.51853 4.89597 2.95557 4.20708 2.95557C3.87507 2.95557 3.55666 3.08746 3.32189 3.32222C3.08712 3.55699 2.95523 3.87541 2.95523 4.20742C2.95523 4.89631 3.51819 5.45186 4.20708 5.45186ZM5.23671 12.8148V6.61483H3.18486V12.8148H5.23671Z" fill="currentColor"></path>
                    </svg></a></div>
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="position-relative d-flex align-items-end pt-9 bg-danger rounded-2 overflow-hidden" style="height: 316px;"><img class="img-fluid d-block w-100" src="vista-assets/images/team/team3.png" alt=""></div>
            <div class="position-relative mx-4 mt-n8 bg-danger-dark rounded-2">
              <div class="position-relative p-4 bg-secondary bg-opacity-10 rounded-2">
                <div><span class="d-block fs-7 fw-semibold">Mike Nelson</span><span class="fs-9 text-white text-opacity-50">Head of Technology</span></div>
                <div class="position-absolute bottom-0 end-0 m-4"><a class="btn me-2 p-0 border-0 bg-transparent btn-outline-secondary" href="#">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12.1362 1.5H14.3416L9.52357 7.00667L15.1916 14.5H10.7529L7.2769 9.95533L3.29957 14.5H1.0929L6.24624 8.61L0.80957 1.5H5.35957L8.50157 5.654L12.1362 1.5ZM11.3622 13.18H12.5842L4.69624 2.75067H3.3849L11.3622 13.18Z" fill="currentColor"></path>
                    </svg></a><a class="btn p-0 border-0 bg-transparent btn-outline-secondary" href="#">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.1849 1.33334C13.5778 1.33334 13.9546 1.48943 14.2324 1.76726C14.5103 2.04509 14.6663 2.42191 14.6663 2.81483V13.1852C14.6663 13.5781 14.5103 13.9549 14.2324 14.2328C13.9546 14.5106 13.5778 14.6667 13.1849 14.6667H2.81449C2.42158 14.6667 2.04476 14.5106 1.76692 14.2328C1.48909 13.9549 1.33301 13.5781 1.33301 13.1852V2.81483C1.33301 2.42191 1.48909 2.04509 1.76692 1.76726C2.04476 1.48943 2.42158 1.33334 2.81449 1.33334H13.1849ZM12.8145 12.8148V8.8889C12.8145 8.24845 12.5601 7.63423 12.1072 7.18137C11.6543 6.7285 11.0401 6.47408 10.3997 6.47408C9.77005 6.47408 9.03671 6.85927 8.68116 7.43705V6.61483H6.61449V12.8148H8.68116V9.16297C8.68116 8.5926 9.14042 8.12594 9.71079 8.12594C9.98583 8.12594 10.2496 8.2352 10.4441 8.42968C10.6386 8.62416 10.7478 8.88793 10.7478 9.16297V12.8148H12.8145ZM4.20708 5.45186C4.53713 5.45186 4.85366 5.32075 5.08704 5.08737C5.32042 4.85399 5.45153 4.53747 5.45153 4.20742C5.45153 3.51853 4.89597 2.95557 4.20708 2.95557C3.87507 2.95557 3.55666 3.08746 3.32189 3.32222C3.08712 3.55699 2.95523 3.87541 2.95523 4.20742C2.95523 4.89631 3.51819 5.45186 4.20708 5.45186ZM5.23671 12.8148V6.61483H3.18486V12.8148H5.23671Z" fill="currentColor"></path>
                    </svg></a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Team Components by Shuffle

Choose from 30 variations of Team UI components. Presented here are variants available in Vista library.

You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Team UI components, code and our visual editor. Try the demo for free!

Redirecting to PayPal

Supporting tools

Plans

Team Components in Vista library

Framework

UI Library

Components

Team from Vista

Team from Vista

Team Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Why the Lifetime License price is changing

New in your Lifetime License

AI Agent

Multi-AI Designer

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

UI Components

Extensions

Support

Company

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Team Components in Vista library

Framework

UI Library

Components

Team from Vista

Team from Vista

Team Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Products

UI Components

Extensions

Support

Company