→ Isaac Winslow
→ Professional Staff Profile Cards with So...

Professional Staff Profile Cards with Social Integration

This bootstrap css example is contributed by Isaac Winslow, on 24-Nov-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Author box, User information

Tags: Profile

Author Isaac Winslow

4.8k

v.5.3

Fork Fullscreen

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-4 col-md-6">
            <div class="team-card bg-white h-100">
                <div class="position-relative">
                    <img src="https://xsgames.co/randomusers/assets/avatars/female/3.jpg" alt="Team Member" class="img-fluid w-100">
                    <div class="overlay position-absolute bottom-0 start-0 w-100 p-4 text-white">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h4 class="mb-1">Sarah Anderson</h4>
                                <p class="mb-2 text-white-50">Senior UI/UX Designer</p>
                                <div class="d-flex gap-2 flex-wrap mb-3">
                                    <span class="expertise-badge px-3 py-1">Figma</span>
                                    <span class="expertise-badge px-3 py-1">Adobe XD</span>
                                    <span class="expertise-badge px-3 py-1">Sketch</span>
                                </div>
                            </div>
                            <div class="social-icons d-flex gap-2">
                                <a href="#" class="text-white"><i class="fab fa-linkedin-in"></i></a>
                                <a href="#" class="text-white"><i class="fab fa-twitter"></i></a>
                                <a href="#" class="text-white"><i class="fab fa-dribbble"></i></a>
                            </div>
                        </div>
                        <p class="mb-0 fs-6">Passionate about creating intuitive and beautiful user experiences that
                            solve real-world problems.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples