Team Members

Team Members

Showcase your team with the .team shortcode. Each member combines a photo, name, role, an optional description, and social icons. Works in a plain grid, an overlay style with a floating name card, or a horizontal list layout.

Structure

• .team - the member wrapper (add .team-list for the horizontal row layout)
• .team-image - holds the member photo (use .rounded-6 on the <img> for rounded corners)
• .team-desc - the text block below the image
• .team-title - contains the name (<h4>) and role (<span>)
• .team-content - optional paragraph/bio text
• .bg-overlay / .bg-overlay-content - used for the overlay variant where the name card floats on the image
• .social-icon - member social links (see the Social Icons shortcode)

Grid Member

<div class="col-lg-3 col-md-6">
	<div class="team">
		<div class="team-image">
			<img src="images/team/3.jpg" alt="John Doe" class="rounded-6">
		</div>
		<div class="team-desc">
			<div class="team-title"><h4>John Doe</h4><span>CEO</span></div>
			<div class="d-flex justify-content-center mt-4">
				<a href="#" class="social-icon si-small bg-light rounded-circle h-bg-facebook">
					<i class="fa-brands fa-facebook-f"></i>
					<i class="fa-brands fa-facebook-f"></i>
				</a>
			</div>
		</div>
	</div>
</div>

Variants

Overlay: wrap the name card in .bg-overlay > .bg-overlay-content and float a .team-desc panel over the image.

<div class="team">
	<div class="team-image">
		<img src="images/team/3.jpg" alt="John Doe" class="rounded-6">
	</div>
	<div class="bg-overlay">
		<div class="bg-overlay-content justify-content-start">
			<div class="team-desc text-start bg-white bg-opacity-90 rounded w-75 p-4 mt-auto m-3">
				<div class="team-title pt-0"><h4>John Doe</h4><span>CEO</span></div>
			</div>
		</div>
	</div>
</div>

List: add .team-list and Bootstrap .row to lay the image and description side by side.

<div class="team team-list row align-items-center">
	<div class="team-image col-sm-6">
		<img src="images/team/3.jpg" alt="John Doe" class="rounded-6">
	</div>
	<div class="team-desc col-sm-6">
		<div class="team-title"><h4>John Doe</h4><span>CEO</span></div>
		<div class="team-content">
			<p>John leads our company with a clear vision and a steady hand.</p>
		</div>
	</div>
</div>

Tips

• Wrap members in Bootstrap grid columns (.col-lg-3, .col-lg-4, etc.) to build 3 or 4 column layouts.
• The list layout works well inside an .owl-carousel.team-carousel for a rotating team slider.
• Use .si-small on the social icons to keep them compact under each member.