Can I use "Sunset Orchid Pricing Plans with Dynamic Trust Signals" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Sunset Orchid Pricing Plans with Dynamic Trust Signals — Free Cards Snippet (Bootstrap 5)

Loading…

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-card"> 6 <div class="gs-card-inner p-4"> 7 <h2 class="text-center mb-4">Choose Your Plan</h2> 8 <div class="row row-cols-1 row-cols-md-3 g-4"> 9 <div class="col"> 10 <div class="card gs-tile"> 11 <div class="card-body text-center"> 12 <h5 class="card-title">Basic</h5> 13 <p class="card-text">Perfect for individuals</p> 14 <h3>$10/mo</h3> 15 <p class="text-muted">Billed annually</p> 16 <button class="btn gs-btn" type="button">Select</button> 17 </div> 18 <div class="gs-badge"> 19 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle"> 20 <path d="M16 8a8 8 0 1 1-16 0 8 8 0 0 1 16 0zM6.173 11.672l7.073-7.072L11.127 2.6 5.354 8.373l-2.12-2.12-1.415 1.415 3.535 3.535z"></path> 21 </svg> 22 Best Value 23 </div> 24 </div> 25 </div> 26 <div class="col"> 27 <div class="card gs-tile"> 28 <div class="card-body text-center"> 29 <h5 class="card-title">Standard</h5> 30 <p class="card-text">For Small Teams</p> 31 <h3>$25/mo</h3> 32 <p class="text-muted">Billed annually</p> 33 <button class="btn gs-btn" type="button">Select</button> 34 </div> 35 <div class="gs-badge gs-popular"> 36 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill"> 37 <path d="M3.612 15.443A.5.5 0 0 1 3 15V7.59L.278 5.573a.5.5 0 0 1 .577-.816l3.086 1.975 1.16-3.583a.5.5 0 0 1 .924 0l1.16 3.583 3.086-1.975a.5.5 0 0 1 .577.816L10 7.59v7.409a.5.5 0 0 1-.61.497l-6.778-1.491z"></path> 38 </svg> 39 Most Popular 40 </div> 41 </div> 42 </div> 43 <div class="col"> 44 <div class="card gs-tile"> 45 <div class="card-body text-center"> 46 <h5 class="card-title">Premium</h5> 47 <p class="card-text">For Large Enterprises</p> 48 <h3>$50/mo</h3> 49 <p class="text-muted">Billed annually</p> 50 <button class="btn gs-btn" type="button">Select</button> 51 </div> 52 <div class="gs-badge"> 53 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trophy"> 54 <path d="M8 0a2 2 0 0 0-2 2h-.5a1.5 1.5 0 0 0-1.415 1H1v2a1 1 0 0 0 1 1h.078A5.971 5.971 0 0 0 3 7.165V8c0 .279.238.51.556.563l2.574.258a1 1 0 0 0 .87-.563h.328a1 1 0 0 0 .87.563l2.574-.258A.572.572 0 0 0 13 8v-.835a5.971 5.971 0 0 0 .922-2.835H15a1 1 0 0 0 1-1V3h-3.085a1.5 1.5 0 0 0-1.415-1H10a2 2 0 0 0-2-2zM2 3h1a.5.5 0 0 1 .5.5V5a.5.5 0 0 1-.5.5H2V3zm12 2h-1a.5.5 0 0 1-.5-.5V3.5A.5.5 0 0 1 14 3h1v2z"></path> 55 </svg> 56 Top Class 57 </div> 58 </div> 59 </div> 60 </div> 61 </div> 62 </div> 63</section>

Sunset Orchid Pricing Plans with Dynamic Trust Signals

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Cards snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection