Teams Card Component

560 ViewsFreeFrontend.dev

This code snippet makes it easy to create a section on your website to showcase the people who make up your team. Each card includes a photo, name, and job title of each team member. It’s a great way to personalize your website and give visitors a glimpse into the people behind your brand.

<section class="py-5">
	<div class="container">
		<div class="row justify-content-center text-center mb-2 mb-lg-4">
			<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
				<span class="text-muted">Our Team</span>
				<h2 class="display-5 fw-bold">Meet the Team</h2>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4 mb-lg-0 mb-4">
				<div class="card text-white border-0 justify-content-end position-relative">
					<img class="img-fluid" src="https://freefrontend.dev/assets/square.png">
					<div class="position-absolute bottom-0 w-100 p-2 p-lg-4 bg-dark" style="--bs-bg-opacity: .3;">
						<h5 class="fw-bold">John Doe</h5>
						<div>
							Programmer
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-4 mb-lg-0 mb-4">
				<div class="card text-white border-0 justify-content-end position-relative">
					<img class="img-fluid" src="https://freefrontend.dev/assets/square.png">
					<div class="position-absolute bottom-0 w-100 p-2 p-lg-4 bg-dark" style="--bs-bg-opacity: .3;">
						<h5 class="fw-bold">John Doe</h5>
						<div>
							Graphic Designer
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card text-white border-0 justify-content-end position-relative">
					<img class="img-fluid" src="https://freefrontend.dev/assets/square.png">
					<div class="position-absolute bottom-0 w-100 p-2 p-lg-4 bg-dark" style="--bs-bg-opacity: .3;">
						<h5 class="fw-bold">John Doe</h5>
						<div>
							HR Manager
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

Related Code Examples

Teams Card Component

This code snippet makes it easy to create a section on your website to showcase the people who make up […]

Teams Card Snippet

This code snippet provides an easy way to create and showcase your team members with beautiful cards built with Bootstrap. […]

Team Member Code Block

This code snippet allows you to quickly and easily showcase a single team member on your website. You can include […]

Team Member Code Snippet

This code snippet is perfect for showcasing a single team member on your website. It displays a brief bio description […]

Meet the Team Template

This code snippet provides a quick and easy way to create a Meet the Team section for your website. It […]

Teams Example

This code snippet gives you a Meet the Team example that you can use to showcase two team members side […]