Experience e-commerce elegance with this molten copper inspired product card, featuring vibrant animations and assurance-enhancing trust badges.
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="gs-card">
7 <div class="gs-card-inner">
8 <div class="gs-product-image">
9 <svg xmlns="http://www.w3.org/2000/svg" height="80" width="80" fill="currentColor">
10 <path d="M12 7V3c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1s1-.45 1-1zm10.61 6.13c-2.71-3.1-6.61-3.69-9.31-1.02C7.64 5.35 3.75 5.94 1.05 9.07c-.33.38-.39.94-.14 1.37.25.43.73.58 1.17.42l.03-.01c1.94-.68 3.68-.37 4.91 1 .72.74 1.16 1.68 1.22 2.63.14 1.92-.07 3.66-1.11 5.47l-.09.15-.55-.29c-.23-.12-.51-.1-.72.1L3 21.46c-.37.36-.38.95-.01 1.32.06.06.15.05.22 0 2.47-1.43 4.85-1.83 7.18-.25 3.06 2.16 7.07 1.68 9.31-1.02l1.09 1.25c.42.47 1.16.48 1.58 0 .42-.47.42-1.2 0-1.67-.18-.2-6.19-6.9-9.11-10.65-.08-.1-.22-.12-.32-.05C11.63 13.27 9 16.5 8.03 16.35c-1.47-.23-1.71-2.4-.3-4.53C9.38 8.36 14.96 7 17.22 7h.01c2.25 0 7.84 1.36 9.9 4.82.4.63.43 1.47.09 2.17-.25.51-.77.83-1.3 1.13-.03-.04-.07-.07-.1-.11l-3.87-5.06c-.17-.21-.51-.21-.67 0z"></path>
11 </svg>
12 </div>
13 <div class="gs-product-details">
14 <h2 class="gs-product-title">Dynamic Smartphone</h2>
15 <p class="gs-product-description">Unleash power and style with the latest smartphone technology. Now with enhanced features and stunning design.</p>
16 <p class="gs-product-price">$999.00</p>
17 <button class="gs-buy-btn">Buy Now</button>
18 </div>
19 <div class="gs-trust-badges">
20 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
21 <path d="M12 2a8.463 8.463 0 0 0-5.861 2.266 9.969 9.969 0 0 0-3.163 6.002A8.04 8.04 0 0 0 12 22a8.013 8.013 0 0 0 9.001-5.19 7.956 7.956 0 0 0-4.055-9.486A8.12 8.12 0 0 0 12 2zm0 17c-4 0-7.43-2.907-8-6.708l-.002-.079a7.042 7.042 0 0 1 2.908-5.68C7.094 5.144 9.464 4 12 4c2.55 0 4.926 1.15 6.095 2.54a9.01 9.01 0 0 1 1.754 4.174A8.947 8.947 0 0 1 12 19z"></path>
22 </svg>
23 <span>Secure Payment</span>
24 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
25 <path d="M12 17c1.104 0 2-.891 2-2h2a4 4 0 0 1-8 0h2c0 1.109.889 2 2 2zM4 12c0-.456.207-.796.5-1 .293-.204.672-.344 1.105-.344.892 0 1.639.682 1.946 1.404.084.195.305.34.551.34h1.984c.23 0 .421-.15.482-.355.13-.436.387-.820.689-1.095.197-.178.432-.274.681-.274.086 0 .161.006.24.017A3 3 0 0 1 20 12a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3c-.295 0-.581.036-.866.102C17.33 7.735 14.564 6 11.51 6 8.378 6 5.66 8.472 5.062 11.506 4.376 11.398 4 11.212 4 12zM22 13a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-1zm-2-1a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-1zm-4 1a1 1 0 1 0-2 0v10a1 1 0 0 0 2 0V13zm-6 1a1 1 0 1 0-2 0v6a1 1 0 0 0 2 0v-6zm-4 2a1 1 0 1 0-2 0v4a1 1 0 0 0 2 0v-4zm18-2v2a7 7 0 0 0-14 0v-2a8 8 0 0 1 14 0z"></path>
26 </svg>
27 <span>Free Shipping</span>
28 </div>
29 </div>
30 </div>
31</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
57
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.