Enhance your team displays with a fluid, captivating profile card featuring animated glow orbs and interactive quick actions.
1<section class="gs-stage">
2 <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
3 <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
4 <div class="gs-card">
5 <div class="gs-card-inner">
6 <div class="gs-profile-header">
7 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="gs-icon">
8 <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z"></path>
9 <path d="M0 20c0-4 8-8 12-8s12 4 12 8v2H0v-2z"></path>
10 </svg>
11 <div class="gs-profile-info">
12 <h5 class="gs-profile-name">Samantha Rivera</h5>
13 <span class="gs-profile-role">Product Designer</span>
14 </div>
15 </div>
16 <div class="gs-quick-actions">
17 <button class="btn gs-action-btn">
18 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="gs-icon">
19 <path d="M12 21L3 12h3V3h6v9h3L12 21z"></path>
20 </svg>
21 Connect
22 </button>
23 <button class="btn gs-action-btn">
24 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="gs-icon">
25 <path d="M3 6h18v2H3V6zm0 5h12v2H3v-2zm0 5h6v2H3v-2z"></path>
26 </svg>
27 Message
28 </button>
29 </div>
30 </div>
31 </div>
32</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.
24
Components
13
Views
6
Likes
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.