Cards Bootstrap 5Free+ CSS
Experience a seamless checkout with our stylized Aurora Mint card. Infused with lush gradients and animations, it ensures trust and clarity.
0 views0 downloads
gosnippets.com/preview/aurora-mint-e-commerce-checkout-card-with-trust-badges
Source Code
1<section class="gs-stage">
2 <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
3 <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
4 <div class="gs-grid-overlay" aria-hidden="true"></div>
5 <div class="gs-card">
6 <div class="gs-card-inner">
7 <h2 class="gs-title">Checkout</h2>
8 <p class="gs-info">You are moments away from owning your dream product.
9 Proceed with secure checkout and shop with confidence!</p>
10 <div class="gs-product">
11 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="gs-product-icon">
12 <path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 110-16 8 8 0 010 16z"></path>
13 <path d="M15.707 10.293a1 1 0 00-1.414 0l-2.586 2.586-0.586-0.586a1 1 0 00-1.414 1.414l1.293 1.293a1 1 0 001.414 0l3.293-3.293a1 1 0 000-1.414z"></path>
14 </svg>
15 <span class="gs-product-name">Product Name</span>
16 </div>
17 <div class="gs-trust-badges">
18 <div class="gs-badge" title="Secure Payments">
19 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
20 <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
21 </svg>
22 </div>
23 <div class="gs-badge" title="Trusted Store">
24 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor">
25 <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 21.913C6.324 21.913 1.087 16.676 1.087 11S6.324 0.087 12 0.087 22.913 5.324 22.913 11 17.676 21.913 12 21.913z"></path>
26 <path d="M9.536 12.88l-3.056-3.056.952-.952 2.104 2.104L16.52 7.024l.952.952-8.036 8.036z"></path>
27 </svg>
28 </div>
29 </div>
30 <button class="gs-btn">Proceed to Pay</button>
31 </div>
32 </div>
33</section>More Cards snippets
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.
CardsView →
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.
CardsView →
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.
CardsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.