Stylishly track real-time collaboration with live presence dots and typing indicators. Ideal for remote teams aiming to enhance interaction.
1
2
3<section class="gs-stage">
4 <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
5 <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
6 <div class="gs-grid-overlay" aria-hidden="true"></div>
7 <div class="gs-card">
8 <div class="gs-card-inner">
9 <header class="gs-card-header">
10 <h3 class="gs-card-title">Project Discussion Panel</h3>
11 <div class="gs-presence-dots">
12 <span class="presence-dot" style="--delay:0.1s"><span class="dot" title="Alex Johnson"></span></span>
13 <span class="presence-dot" style="--delay:0.15s"><span class="dot" title="Marie Sanders"></span></span>
14 <span class="presence-dot" style="--delay:0.2s"><span class="dot" title="Kim Wu"></span></span>
15 </div>
16 </header>
17 <div class="gs-card-content">
18 <div class="gs-chat">
19 <div class="gs-chat-line">
20 <svg width="24" height="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><circle></circle><line></line><line></line></svg>
21 <span><strong>Marie Sanders:</strong> Let's integrate the new UI components by tomorrow.</span>
22 </div>
23 <div class="gs-chat-line typing">Kim Wu is typing...</div>
24 </div>
25 <footer class="gs-card-footer">
26
27 <button class="btn btn-send">Send</button>
28 </footer>
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.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.