Immerse users in a sleek and stylish product display, enhanced with captivating animations and reassuring 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="product-header">
9 <svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-tag">
10 <path stroke-width="1.5" d="M9.212 9.212l5.586 5.586m1.414-5.586l5.586 5.586M21 11a9 9 0 11-18 0 9 9 0 0118 0z"></path>
11 </svg>
12 <h2 class="product-name">Nordic Slate Backpack</h2>
13 <span class="product-price">$129.99</span>
14 </div>
15 <div class="product-details">
16 <p class="product-description">Experience unmatched comfort and style with this ergonomic and sustainable backpack, perfect for urban explorers.</p>
17 </div>
18 <div class="trust-badges">
19 <span class="badge"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-shield">
20 <path stroke-width="1.5" d="M12 5v14m-6 7H6c1.38 0 2.626-.356 3.684-.967.711-.425 1.278-1.037 1.579-1.736.3-.699.469-1.487.469-2.297 0-3.299 2.701-6 6-6s6 2.671 6 6C19.692 19.293 17.285 23 14.5 23c-.51 0-1.006-.037-1.5-.107m10.5-8.893c0 5.525-4.475 10-10 10S4 19.525 4 14C4 13 4 0 4 0s3.5 3.5 8 3.5 8-3.5 8-3.5v13.893z"></path>
21 </svg> Secure Purchase</span>
22 <span class="badge"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-award">
23 <path stroke-width="1.5" d="M12 6.253v3.905m0 0V18l-3 1.882L9 15.254a9.006 9.006 0 108.485-8.484M9 6.253a9 9 0 010 10.485M15 6.253a9.001 9.001 0 01-3-1.885"></path>
24 </svg> Satisfaction Guarantee</span>
25 </div>
26 </div>
27 </div>
28</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
1.1k
Views
6
Likes
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.