→ 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

2.3k

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

Profile card
Profile card with images and buttons

Author:
Anonymous

1 year ago

4.2k

v.4.6
Interactive Team Member Card with Flip Effect

Author:
Reza Farhadi

7 months ago

1.4k

v.5.3
User Profile Card with Social Icons using Bootstrap 5

Author:
Anonymous

6 months ago

3.7k

v.5.3
Elegant Profile Card
showcasing user or team member profiles in a professional and visually appealing manner. The profile card includes an avatar, name, position, and a short bio, along with social media icons for easy connectivity

Author:
Prajwal Hallale

1 year ago

4.5k

v.5.3
User Profile Card with Social Icons using Bootstrap 5 (without connect button)

Author:
Ranadhir Debnath

2 weeks ago

249

v.5.3
User profile card
Responsive author card

Author:
Anonymous

5 months ago

3.2k

v.5.3
Profile Management Dashboard
profile management interface with personal information, security settings, and activity tracking in a modern design

Author:
Isaac Winslow

5 months ago

4.2k

v.5.3
User Profile Card with Bootstrap 5

Author:
Anonymous

2 months ago

761

v.5.3
User Profile Card with Bootstrap 5

Author:
Nguyen Minh

9 months ago

8k

v.5.3
Profile Management Dashboard
profile management interface with personal information, security settings, and activity tracking in a modern design

Author:
Shola Ajani

2 months ago

1.8k

v.5.3
Bootstrap user profile
User profile card made with bootstrap

Author:
Anonymous

4 months ago

2.7k

v.5.3
Author box
minimal author box with author image

Author:
Kemaya m

1 year ago

863

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent