Team
Decorate your website with wide variety of team sections.
Team grid #1
HTML:
<!-- Team Section -->
<div class="container">
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick u-slick--gutters-3"
data-slides-show="2"
data-slides-scroll="1"
data-pagi-classes="text-center u-slick__pagination mt-7 mb-0"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide px-3">
<!-- Team -->
<div class="row">
<div class="col-sm-6 d-sm-flex align-items-sm-start flex-sm-column text-center text-sm-left mb-7 mb-sm-0">
<h3 class="h5 mb-4">Maria Muszynska</h3>
<span class="badge u-badge-primary badge-pill u-badge-bigger mb-3">#maria</span>
<p class="font-size-14">I am an ambitious workaholic, but apart from that, pretty simple person.</p>
<!-- Social Networks -->
<ul class="list-inline mt-auto mb-0">
<li class="list-inline-item mx-0">
<a class="u-icon u-icon--sm u-icon-secondary--air" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mx-0">
<a class="u-icon u-icon--sm u-icon-secondary--air" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mx-0">
<a class="u-icon u-icon--sm u-icon-secondary--air" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
<div class="col-sm-6">
<img class="img-fluid rounded mx-auto" src="../assets/img/350x400/img1.jpg" alt="Image Description">
</div>
</div>
<!-- End Team -->
</div>
<div class="js-slide px-3">
<!-- Team -->
<div class="row">
<div class="col-sm-6 d-sm-flex align-items-sm-start flex-sm-column text-center text-sm-left mb-7 mb-sm-0">
<h3 class="h5 mb-4">Jack Wayley</h3>
<span class="badge u-badge-primary badge-pill u-badge-bigger mb-3">#jack</span>
<p class="font-size-14">I am an ambitious workaholic, but apart from that, pretty simple person.</p>
<!-- Social Networks -->
<ul class="list-inline mt-auto mb-0">
<li class="list-inline-item mx-0">
<a class="u-icon u-icon--sm u-icon-secondary--air" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mx-0">
<a class="u-icon u-icon--sm u-icon-secondary--air" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mx-0">
<a class="u-icon u-icon--sm u-icon-secondary--air" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
<div class="col-sm-6">
<img class="img-fluid rounded mx-auto" src="../assets/img/350x400/img2.jpg" alt="Image Description">
</div>
</div>
<!-- End Team -->
</div>
<div class="js-slide px-3">
<!-- Team -->
<div class="row">
<div class="col-sm-6 d-sm-flex align-items-sm-start flex-sm-column text-center text-sm-left mb-7 mb-sm-0">
<h3 class="h5 mb-4">Emmely Jackson</h3>
<span class="badge u-badge-primary badge-pill u-badge-bigger mb-3">#emmely</span>
<p class="font-size-14">I am an ambitious workaholic, but apart from that, pretty simple person.</p>
<!-- Social Networks -->
<ul class="list-inline mt-auto mb-0">
<li class="list-inline-item mx-0">
<a class="u-icon u-icon--sm u-icon-secondary--air" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mx-0">
<a class="u-icon u-icon--sm u-icon-secondary--air" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mx-0">
<a class="u-icon u-icon--sm u-icon-secondary--air" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
<div class="col-sm-6">
<img class="img-fluid rounded mx-auto" src="../assets/img/350x400/img3.jpg" alt="Image Description">
</div>
</div>
<!-- End Team -->
</div>
<div class="js-slide px-3">
<!-- Team -->
<div class="row">
<div class="col-sm-6 d-sm-flex align-items-sm-start flex-sm-column text-center text-sm-left mb-7 mb-sm-0">
<h3 class="h5 mb-4">Mark McManus</h3>
<span class="badge u-badge-primary badge-pill u-badge-bigger mb-3">#mark</span>
<p class="font-size-14">I am an ambitious workaholic, but apart from that, pretty simple person.</p>
<!-- Social Networks -->
<ul class="list-inline mt-auto mb-0">
<li class="list-inline-item mx-0">
<a class="u-icon u-icon--sm u-icon-secondary--air" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mx-0">
<a class="u-icon u-icon--sm u-icon-secondary--air" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mx-0">
<a class="u-icon u-icon--sm u-icon-secondary--air" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
<div class="col-sm-6">
<img class="img-fluid rounded mx-auto" src="../assets/img/350x400/img4.jpg" alt="Image Description">
</div>
</div>
<!-- End Team -->
</div>
</div>
<!-- End Slick Carousel -->
</div>
<!-- End Team Section -->
CSS library:
<link rel="stylesheet" href="assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Team grid #2
Maria Muszynska
Lead Designer
Jack Wayley
CEO, Director
Emmely Jackson
Marketer
Mark McManus
Project Manager
New
We are hiring.
Send your application.
HTML:
<!-- Team Section -->
<div class="container">
<!-- Team Carousel -->
<div class="js-slick-carousel u-slick u-slick--gutters-3 mb-5"
data-slides-show="4"
data-slides-scroll="1"
data-pagi-classes="d-lg-none text-center u-slick__pagination mb-7"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="js-slide pb-4">
<!-- Team -->
<img class="img-fluid w-100 rounded" src="../assets/img/350x400/img1.jpg" alt="Image Description">
<div class="position-relative bg-white text-center rounded shadow-sm z-index-2 mt-offset-6 p-4 mx-3">
<h3 class="h6 mb-1">Maria Muszynska</h3>
<p class="font-size-14 mb-0">Lead Designer</p>
</div>
<!-- End Team -->
</div>
<div class="js-slide pb-4">
<!-- Team -->
<img class="img-fluid w-100 rounded" src="../assets/img/350x400/img2.jpg" alt="Image Description">
<div class="position-relative bg-white text-center rounded shadow-sm z-index-2 mt-offset-6 p-4 mx-3">
<h3 class="h6 mb-1">Jack Wayley</h3>
<p class="font-size-14 mb-0">CEO, Director</p>
</div>
<!-- End Team -->
</div>
<div class="js-slide pb-4">
<!-- Team -->
<img class="img-fluid w-100 rounded" src="../assets/img/350x400/img3.jpg" alt="Image Description">
<div class="position-relative bg-white text-center rounded shadow-sm z-index-2 mt-offset-6 p-4 mx-3">
<h3 class="h6 mb-1">Emmely Jackson</h3>
<p class="font-size-14 mb-0">Marketer</p>
</div>
<!-- End Team -->
</div>
<div class="js-slide pb-4">
<!-- Team -->
<img class="img-fluid w-100 rounded" src="../assets/img/350x400/img4.jpg" alt="Image Description">
<div class="position-relative bg-white text-center rounded shadow-sm z-index-2 mt-offset-6 p-4 mx-3">
<h3 class="h6 mb-1">Mark McManus</h3>
<p class="font-size-14 mb-0">Project Manager</p>
</div>
<!-- End Team -->
</div>
</div>
<!-- End Team Carousel -->
<!-- Hire Us -->
<div class="d-flex justify-content-center">
<div class="d-inline-block shadow rounded-pill p-2 pr-3">
<span class="u-label u-label--sm u-label--primary mr-1">New</span>
We are hiring.
<a href="../pages/hire-us.html">Send your application.</a>
</div>
</div>
<!-- End Hire Us -->
</div>
<!-- End Team Section -->
CSS library:
<link rel="stylesheet" href="assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Team grid #3
<div class="card-deck d-block d-md-flex">
<!-- Members -->
<div class="card mb-3 mb-5">
<div class="card-body text-center p-0">
<div class="py-4 px-6">
<!-- Team -->
<div class="mb-4">
<div class="position-relative u-lg-avatar mx-auto mb-3">
<img class="u-lg-avatar rounded-circle" src="../assets/img/100x100/img9.jpg" alt="Image Description">
<span class="u-badge u-badge--xs u-badge-border-primary u-badge-pos--bottom-left-1 rounded-circle"></span>
</div>
<a class="u-icon u-icon-warning--air u-icon--sm u-bg-transparent position-absolute-top-right-0 rounded-circle m-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
<span class="far fa-star u-icon__inner"></span>
</a>
<h2 class="h6 mb-0">
<a href="#">Patrick Garner</a>
</h2>
<a class="small" href="#">@patrickgarner</a>
</div>
<!-- End Team -->
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
<hr class="my-0">
<div class="py-4">
<a class="btn btn-sm u-btn-primary--air transition-3d-hover" href="#">
<span class="far fa-envelope mr-2"></span>
Send a Message
</a>
</div>
</div>
</div>
<!-- End Members -->
<!-- Members -->
<div class="card mb-3 mb-5">
<div class="card-body text-center p-0">
<div class="py-4 px-6">
<!-- Team -->
<div class="mb-4">
<div class="position-relative u-lg-avatar mx-auto mb-3">
<span class="u-icon u-icon-danger--air u-icon--xl rounded-circle mb-3">
<span class="u-icon__inner font-size-20">AO</span>
</span>
<span class="u-badge u-badge--xs u-badge-border-danger u-badge-pos--bottom-left-1 rounded-circle"></span>
</div>
<a class="u-icon u-icon-warning--air u-icon--sm u-bg-transparent position-absolute-top-right-0 rounded-circle m-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
<span class="far fa-star u-icon__inner"></span>
</a>
<h2 class="h6 mb-0">
<a href="#">Amanta Owens</a>
</h2>
<a class="small" href="#">@uidesginer</a>
</div>
<!-- End Team -->
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
<hr class="my-0">
<div class="py-4">
<a class="btn btn-sm u-btn-primary--air transition-3d-hover" href="#">
<span class="far fa-envelope mr-2"></span>
Send a Message
</a>
</div>
</div>
</div>
<!-- End Members -->
<!-- Members -->
<div class="card mb-3 mb-5">
<div class="card-body text-center p-0">
<div class="py-4 px-6">
<!-- Team -->
<div class="mb-4">
<div class="position-relative u-lg-avatar mx-auto mb-3">
<img class="u-lg-avatar rounded-circle" src="../assets/img/100x100/img8.jpg" alt="Image Description">
<span class="u-badge u-badge--xs u-badge-border-primary u-badge-pos--bottom-left-1 rounded-circle"></span>
</div>
<a class="u-icon u-icon-warning--air u-icon--sm u-bg-transparent position-absolute-top-right-0 rounded-circle m-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
<span class="far fa-star u-icon__inner"></span>
</a>
<h2 class="h6 mb-0">
<a href="#">Sebastian Diaz</a>
</h2>
<a class="small" href="#">@gamechanger</a>
</div>
<!-- End Team -->
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
<hr class="my-0">
<div class="py-4">
<a class="btn btn-sm u-btn-primary--air transition-3d-hover" href="#">
<span class="far fa-envelope mr-2"></span>
Send a Message
</a>
</div>
</div>
</div>
<!-- End Members -->
</div>
Team list #1
<!-- Profile Info -->
<div class="card position-relative p-3 mb-5">
<div class="row align-items-center">
<div class="col-sm-7 mb-3 mb-sm-0">
<div class="d-flex">
<!-- Avatar -->
<div class="position-relative u-lg-avatar mr-3">
<img class="u-lg-avatar rounded-circle" src="../assets/img/100x100/img9.jpg" alt="Image Description">
<span class="u-badge u-badge--xs u-badge-border-primary u-badge-pos--bottom-left-1 rounded-circle"></span>
</div>
<!-- End Avatar -->
<div class="mr-3">
<!-- User Info -->
<div class="mb-2">
<h2 class="h6 mb-0">
<a href="#">Patrick Garner</a>
</h2>
<a class="small" href="#">@patrickgarner</a>
</div>
<!-- End User Info -->
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
</div>
</div>
<div class="col-sm-5 align-self-sm-end">
<!-- Button -->
<div class="text-sm-right">
<a class="btn btn-sm u-btn-primary--air transition-3d-hover" href="#">
<span class="far fa-envelope mr-2"></span>
Send a Message
</a>
</div>
<!-- End Button -->
</div>
</div>
<!-- Add to Favorites -->
<a class="u-icon u-icon-warning--air u-icon--sm u-bg-transparent position-absolute-top-right-0 rounded-circle mt-3 mr-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
<span class="far fa-star u-icon__inner"></span>
</a>
<!-- End Add to Favorites -->
</div>
<!-- End Profile Info -->
<!-- Profile Info -->
<div class="card position-relative p-3 mb-5">
<div class="row align-items-center">
<div class="col-sm-7 mb-3 mb-sm-0">
<div class="d-flex">
<!-- Avatar -->
<div class="position-relative u-lg-avatar mr-3">
<span class="u-icon u-icon-danger--air u-icon--xl rounded-circle mb-3">
<span class="u-icon__inner font-size-20">AO</span>
</span>
<span class="u-badge u-badge--xs u-badge-border-danger u-badge-pos--bottom-left-1 rounded-circle"></span>
</div>
<!-- End Avatar -->
<div class="mr-3">
<!-- User Info -->
<div class="mb-2">
<h2 class="h6 mb-0">
<a href="#">Amanta Owens</a>
</h2>
<a class="small" href="#">@uidesginer</a>
</div>
<!-- End User Info -->
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-facebook-f u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-google u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-twitter u-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<a class="u-icon u-icon--sm u-icon-secondary--air rounded-circle" href="#">
<span class="fab fa-github u-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
</div>
</div>
<div class="col-sm-5 align-self-sm-end">
<!-- Button -->
<div class="text-sm-right">
<a class="btn btn-sm u-btn-primary--air transition-3d-hover" href="#">
<span class="far fa-envelope mr-2"></span>
Send a Message
</a>
</div>
<!-- End Button -->
</div>
</div>
<!-- Add to Favorites -->
<a class="u-icon u-icon-warning--air u-icon--sm u-bg-transparent position-absolute-top-right-0 rounded-circle mt-3 mr-3" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Add to favorites">
<span class="far fa-star u-icon__inner"></span>
</a>
<!-- End Add to Favorites -->
</div>
<!-- End Profile Info -->