Dive into a celestial-themed team card with neumorphic touchpoints, vibrant animated glow orbs, and intuitive action triggers—perfect for showcasing key team members with style.
1
2<section class="gs-stage">
3 <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
4 <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
5 <div class="gs-card">
6 <div class="gs-card-inner">
7 <div class="profile-header d-flex align-items-center">
8 <div class="profile-image">
9 <svg width="60" height="60" fill="none" class="lucide lucide-user profile-pic">
10 <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
11 <circle></circle>
12 </svg>
13 </div>
14 <div class="profile-info">
15 <h4 class="mb-0">Ellie Jacobs</h4>
16 <span class="role-badge">Project Manager</span>
17 </div>
18 </div>
19 <div class="profile-actions d-flex justify-content-between mt-4">
20 <button class="btn btn-action" title="Message">
21 <svg width="22" height="22" fill="none" class="lucide lucide-message-circle">
22 <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8c-.75 1.4-1.75 2.6-3 3.4A8 8 0 0 1 12 21a8.73 8.73 0 0 1-4-.9l-4 1L5 17.9a8 8 0 0 1 0-12.8A7.74 7.74 0 0 1 9 3a8.38 8.38 0 0 1 3.8.9c1.4.75 2.6 1.75 3.4 3 .75 1.5 1.05 3.2 1 4.6z"></path>
23 </svg>
24 </button>
25 <button class="btn btn-action" title="Call">
26 <svg width="22" height="22" fill="none" class="lucide lucide-phone">
27 <path d="M22 16.92v3a2 2 0 0 1-2.18 2A19.86 19.86 0 0 1 3.07 4.18 2 2 0 0 1 5 2h3a2 2 0 0 1 2 1.72 12.44 12.44 0 0 0 .36 2.42 2 2 0 0 1-.45 1.82L8.91 7.91a16 16 0 0 0 6.28 6.28l1.22-1.22a2 2 0 0 1 1.82-.45 12.44 12.44 0 0 0 2.42.36A2 2 0 0 1 22 16.92z"></path>
28 </svg>
29 </button>
30 <button class="btn btn-action" title="Email">
31 <svg width="22" height="22" fill="none" class="lucide lucide-mail">
32 <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
33 <polyline></polyline>
34 </svg>
35 </button>
36 </div>
37 </div>
38 </div>
39</section>
Bootstrap carousel with cards in 3 columns
Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.
Bootstrap 5 ecommerce product cards details template
Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
Bootstrap snippet Panels with nav tabs using HTML & CSS
Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
27
Components
110
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.