Elevate your dashboards with our kinetic KPI tile that features animated sparklines, gradient shifts, and captivating 3D button interactions.
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 <header class="gs-card-header">
9 <h2 class="gs-card-title">Weekly Sales Overview</h2>
10 </header>
11 <div class="gs-card-content">
12 <div class="gs-sparkline" aria-hidden="true">
13
14 <svg xmlns="http://www.w3.org/2000/svg">
15 <polyline></polyline>
16 </svg>
17 </div>
18 <div class="gs-stats">
19 <span class="gs-stat-item">
20 <strong>$24.6k</strong>
21 <small>Total Revenue</small>
22 </span>
23 <span class="gs-stat-item">
24 <strong>+12%</strong>
25 <small>Growth Rate</small>
26 </span>
27 </div>
28 </div>
29 <div class="gs-card-footer">
30 <button class="gs-action-btn">
31 <svg class="icon"><path d="M12 4l6 6-6 6"></path></svg>
32 View More
33 </button>
34 </div>
35 </div>
36 </div>
37</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.