Experience a captivating social feed card with engaging motion and a vibrant claymorphic design, offering an easy-to-use engagement rail and share options.
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-card">
7 <div class="gs-card-inner">
8 <header class="gs-card-header">
9 <div class="gs-user-info">
10 <div class="gs-user-avatar">
11 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none"><circle></circle><path d="M14.25 9A3.25 3.25 0 1 1 12 5.75 3.25 3.25 0 0 1 14.25 9zm2 7.5c-1.25 0-3.61.5-4 1.25.11-3.5 0-7-2-7s-2 3.5-2 7c-.39-.75-2.75-1.25-4-1.25a5 5 0 0 0 0 10h12a5 5 0 0 0 0-10z"></path></svg>
12 </div>
13 <div class="gs-user-details">
14 <span class="gs-user-name">Jane Doe</span>
15 <span class="gs-post-date">March 15, 2023</span>
16 </div>
17 </div>
18 </header>
19 <article class="gs-content">
20 <p>Cherishing the moments with a touch of claymorphic design. Discover how playful elements redefine the user experience. #Claymorphism #UXDesign</p>
21 </article>
22 <footer class="gs-footer">
23 <div class="gs-engagement-rail">
24 <button class="gs-btn gs-like">
25 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none"><path d="M12 21l-3-3 1.5-1.5L14.5 21l-3 3zm2.4-2h-1v-4h1a4 4 0 0 0-4-4V9.4c1.7.1 3.3 1.5 3.6 3.5 1.2-1.1 2.5-2.5 3.6-4v3c1 1.7 1 3.7 0 5.4H14.4zm-6.6-5A4 0 0 1 9.5 17c.1-1.5.8-2.9 1.5-4.1 0-.1 0-1.1 1-1.1h-3z"></path></svg>
26 <span>Like</span>
27 </button>
28 <button class="gs-btn gs-comment">
29 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none"><path d="M21 15a2 2 0 0 1 2 2v1a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3v-1a2 2 0 0 1 2-2m0 5L6 21l.72-.34a3 3 0 0 1 1.58-.52h8a3 3 0 0 1 1.58.52L20 20zM17.21 1a.995.995 0 0 1 1.71 0L21 3h0"></path></svg>
30 <span>Comment</span>
31 </button>
32 <button class="gs-btn gs-share">
33 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none"><path d="M4 12L9 8L4 4v8zm16.19-1.6a2.868 2.868 0 0 0-.14-.68M3.79 12.16a2.868 2.868 0 0 0 .14.68m0-.68L21.21 6a2.994 2.994 0 0 1 0-.16v8zm0 0h18.43"></path></svg>
34 <span>Share</span>
35 </button>
36 </div>
37 </footer>
38 </div>
39 </div>
40</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
117
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.