Explore a visually stunning bento-grid layout featuring hexagon role badges and interactive quick actions—bringing team presentation to life.
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-grid-overlay" aria-hidden="true"></div>
6 <div class="container d-flex justify-content-center">
7 <div class="row row-cols-1 row-cols-md-2 g-4">
8 <div class="col">
9 <div class="gs-card">
10 <div class="gs-card-header">
11 <div class="gs-role-badge" title="Developer">
12 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
13 <polygon></polygon>
14 <polygon></polygon>
15 </svg>
16 </div>
17 <h5 class="gs-name">Alex Johnson</h5>
18 <h6 class="gs-position">Lead Developer</h6>
19 </div>
20 <div class="gs-actions">
21 <button class="btn gs-action-btn" type="button">View Profile</button>
22 <button class="btn gs-action-btn" type="button">Message</button>
23 </div>
24 </div>
25 </div>
26 <div class="col">
27 <div class="gs-card">
28 <div class="gs-card-header">
29 <div class="gs-role-badge" title="Designer">
30 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
31 <circle></circle>
32 <line></line>
33 <line></line>
34 </svg>
35 </div>
36 <h5 class="gs-name">Samantha Lee</h5>
37 <h6 class="gs-position">UI/UX Designer</h6>
38 </div>
39 <div class="gs-actions">
40 <button class="btn gs-action-btn" type="button">View Portfolio</button>
41 <button class="btn gs-action-btn" type="button">Message</button>
42 </div>
43 </div>
44 </div>
45 <div class="col">
46 <div class="gs-card">
47 <div class="gs-card-header">
48 <div class="gs-role-badge" title="Project Manager">
49 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
50 <rect></rect>
51 <line></line>
52 <line></line>
53 <line></line>
54 <line></line>
55 </svg>
56 </div>
57 <h5 class="gs-name">Michael Tran</h5>
58 <h6 class="gs-position">Project Manager</h6>
59 </div>
60 <div class="gs-actions">
61 <button class="btn gs-action-btn" type="button">Overview</button>
62 <button class="btn gs-action-btn" type="button">Message</button>
63 </div>
64 </div>
65 </div>
66 </div>
67 </div>
68</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
147
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.