Team Uikit only
List of your team members.
Example 01
Team Member
Web Developer
Team Member
Web Developer
Team Member
Web Developer
Team Member
Web Developer
The code to generate the component is this:
<!-- team -->
<div class="row mt-5">
<!-- people -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-0 shadow">
<img src="https://source.unsplash.com/iprSslEBheg/500x350" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title mb-0">Team Member</h5>
<div class="card-text text-black-50">Web Developer</div>
</div>
</div>
</div>
<!-- /people -->
<!-- people -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-0 shadow">
<img src="https://source.unsplash.com/9UVmlIb0wJU/500x350" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title mb-0">Team Member</h5>
<div class="card-text text-black-50">Web Developer</div>
</div>
</div>
</div>
<!-- /people -->
<!-- people -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-0 shadow">
<img src="https://source.unsplash.com/gCZClCxiXts/500x350" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title mb-0">Team Member</h5>
<div class="card-text text-black-50">Web Developer</div>
</div>
</div>
</div>
<!-- /people -->
<!-- people -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-0 shadow">
<img src="https://source.unsplash.com/9VcFGAlf1lc/500x350" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title mb-0">Team Member</h5>
<div class="card-text text-black-50">Web Developer</div>
</div>
</div>
</div>
<!-- /people -->
</div>
<!-- /team -->
Example 02 - Effect Circle
Team Member
Web Developer
Team Member
Web Developer
Team Member
Web Developer
Team Member
Web DeveloperThe code to generate the component is this:
<!-- team -->
<div class="row mt-5">
<div class="col-12">
<div class="team">
<!-- people -->
<div class="people effect-circle">
<div class="layout">
<div class="photo">
<img src="https://source.unsplash.com/O3ymvT7Wf9U/424x640" class="avatar img-fluid" alt="The demo photo">
</div>
<div class="social">
<ul>
<li><a href="" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<div class="description">
<h3>Team Member</h3>
<strong>Web Developer</strong>
</div>
</div>
<!-- /people -->
<!-- people -->
<div class="people effect-circle">
<div class="layout">
<div class="photo">
<img src="https://source.unsplash.com/Tg6rUjg6q8g/424x640" class="avatar img-fluid" alt="The demo photo">
</div>
<div class="social">
<ul>
<li><a href="" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<div class="description">
<h3>Team Member</h3>
<strong>Web Developer</strong>
</div>
</div>
<!-- /people -->
<!-- people -->
<div class="people effect-circle">
<div class="layout">
<div class="photo">
<img src="https://source.unsplash.com/yMdI_y-zfzs/424x640" class="avatar img-fluid" alt="The demo photo">
</div>
<div class="social">
<ul>
<li><a href="" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<div class="description">
<h3>Team Member</h3>
<strong>Web Developer</strong>
</div>
</div>
<!-- /people -->
<!-- people -->
<div class="people effect-circle">
<div class="layout">
<div class="photo">
<img src="https://source.unsplash.com/6LkwAXWgYO0/424x640" class="avatar img-fluid" alt="The demo photo">
</div>
<div class="social">
<ul>
<li><a href="" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<div class="description">
<h3>Team Member</h3>
<strong>Web Developer</strong>
</div>
</div>
<!-- /people -->
</div>
</div>
</div>
<!-- /team -->
Example 03 - Zoom
Team Member
Web Developer
Team Member
Web Developer
Team Member
Web Developer
Team Member
Web DeveloperThe code to generate the component is this:
<!-- team -->
<div class="row mt-5">
<div class="col-12">
<div class="team">
<!-- people -->
<div class="people effect-circle zoom-photo">
<div class="layout">
<div class="photo">
<img src="https://source.unsplash.com/NJLXMkK7hyM/424x640" class="avatar img-fluid" alt="The demo photo">
</div>
<div class="social">
<ul>
<li><a href="" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<div class="description">
<h3>Team Member</h3>
<strong>Web Developer</strong>
</div>
</div>
<!-- /people -->
<!-- people -->
<div class="people effect-circle zoom-photo">
<div class="layout">
<div class="photo">
<img src="https://source.unsplash.com/cruUfe5g1Zk/424x640" class="avatar img-fluid" alt="The demo photo">
</div>
<div class="social">
<ul>
<li><a href="" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<div class="description">
<h3>Team Member</h3>
<strong>Web Developer</strong>
</div>
</div>
<!-- /people -->
<!-- people -->
<div class="people effect-circle zoom-photo">
<div class="layout">
<div class="photo">
<img src="https://source.unsplash.com/0g0POg7YYr0/424x640" class="avatar img-fluid" alt="The demo photo">
</div>
<div class="social">
<ul>
<li><a href="" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<div class="description">
<h3>Team Member</h3>
<strong>Web Developer</strong>
</div>
</div>
<!-- /people -->
<!-- people -->
<div class="people effect-circle zoom-photo">
<div class="layout">
<div class="photo">
<img src="https://source.unsplash.com/eOC_7rRnSBg/424x640" class="avatar img-fluid" alt="The demo photo">
</div>
<div class="social">
<ul>
<li><a href="" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<div class="description">
<h3>Team Member</h3>
<strong>Web Developer</strong>
</div>
</div>
<!-- /people -->
</div>
</div>
</div>
<!-- /team -->
Example 04 - Zoom and rotate
Team Member
Web Developer
Team Member
Web Developer
Team Member
Web Developer
Team Member
Web DeveloperThe code to generate the component is this:
<!-- team -->
<div class="row mt-5">
<div class="col-12">
<div class="team">
<!-- people -->
<div class="people effect-circle zoom-rotate-photo">
<div class="layout">
<div class="photo">
<img src="https://source.unsplash.com/QZRAaYfmvA8/424x640" class="avatar img-fluid" alt="The demo photo">
</div>
<div class="social">
<ul>
<li><a href="" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<div class="description">
<h3>Team Member</h3>
<strong>Web Developer</strong>
</div>
</div>
<!-- /people -->
<!-- people -->
<div class="people effect-circle zoom-rotate-photo">
<div class="layout">
<div class="photo">
<img src="https://source.unsplash.com/MQ9U2GFnnDc/424x640" class="avatar img-fluid" alt="The demo photo">
</div>
<div class="social">
<ul>
<li><a href="" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<div class="description">
<h3>Team Member</h3>
<strong>Web Developer</strong>
</div>
</div>
<!-- /people -->
<!-- people -->
<div class="people effect-circle zoom-rotate-photo">
<div class="layout">
<div class="photo">
<img src="https://source.unsplash.com/r9lTXKNtq7I/424x640" class="avatar img-fluid" alt="The demo photo">
</div>
<div class="social">
<ul>
<li><a href="" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<div class="description">
<h3>Team Member</h3>
<strong>Web Developer</strong>
</div>
</div>
<!-- /people -->
<!-- people -->
<div class="people effect-circle zoom-rotate-photo">
<div class="layout">
<div class="photo">
<img src="https://source.unsplash.com/cCKmXQT_lvI/424x640" class="avatar img-fluid" alt="The demo photo">
</div>
<div class="social">
<ul>
<li><a href="" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li><a href="" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
<div class="description">
<h3>Team Member</h3>
<strong>Web Developer</strong>
</div>
</div>
<!-- /people -->
</div>
</div>
</div>
<!-- /team -->