Loaders & Cards
Complete collection of loaders, skeletons, spinners, and every card variant in the VBoard design system
Border Spinners
Circular spinning loaders in all sizes and color variants.
Sizes
Colors
Dual ring & Gradient
<!-- Border spinner -->
<div class="spinner
sp-border sp-md"></div>
<!-- Sizes: sp-xs | sp-sm | sp-md | sp-lg | sp-xl -->
<!-- Colors: sp-success | sp-warning | sp-danger | sp-accent | sp-purple |
sp-white -->
<!-- Dual ring -->
<div class="spinner
sp-border sp-dual sp-md"></div>
<!-- Gradient -->
<div class="sp-grad" style="width:36px;height:36px"></div>
Dot Loaders
Animated dot sequences — bounce, wave, fade, and pulse variants.
Bounce (default)
Wave
Fade & Sizes
Pulse grow
<!-- Bounce dots -->
<div class="dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<!-- Wave: add dot-wave class to parent -->
<!-- Fade: add dot-fade class to parent -->
<!-- Colors: dot-success | dot-warning | dot-danger | dot-accent |
dot-purple -->
Bar Loaders & Ripple Effects
Animated equalizer bars and pulse ripple indicators.
Equalizer bars
Ripple indicators
Orbit ring
<!-- Bars -->
<div class="bars">
<div class="bar"></div> ×
5
</div>
<!-- Ripple -->
<div class="ripple-wrap">
<div class="ripple-ring"></div> ×
3
<div class="ripple-core"></div>
</div>
Progress Bar Loaders
Determinate and indeterminate progress bars for page and data
loading states.
Indeterminate (animated)
Primary
Success
Warning
Danger
Determinate (click to reset)
Upload progress72%
Storage used45%
CPU load88%
<!-- Indeterminate -->
<div class="prog-bar
prog-indeterminate" style="height:5px">
<div class="prog-fill"></div>
</div>
<!-- Determinate -->
<div class="prog-bar">
<div class="prog-fill" style="width:72%"></div>
</div>
Skeleton Loaders
Shimmer skeleton screens for content-loading placeholder states.
User List
Blog Post
Stats
<!-- Text skeleton -->
<div class="skel skel-text
w-75"></div>
<!-- Avatar circle -->
<div class="skel
skel-avatar"></div>
<!-- Image block -->
<div class="skel
skel-img" style="height:130px"></div>
<!-- Width helpers: w-full | w-75 | w-50 | w-33 -->
Overlay & Contextual Loaders
Full-panel overlay loaders, labelled loaders, and inline button
loading states.
Panel overlay (click buttons to toggle)
Labelled loaders
Fetching user data…
Processing audio…
Basic Cards
Standard card with header, body, footer, and outline colour
variants.
Basic Card
Active
A standard card component with header, body, and footer. Use it as the foundation for most UI sections.
Outline Primary
Border-coloured outline variant. Great for selected state, alerts, or highlighted items.
Danger Outline
Use red outline cards for warnings, destructive actions, or critical notifications.
<div class="card">
<div class="card-header">...</div>
<div class="card-body">...</div>
<div class="card-footer">...</div>
</div>
<!-- Outline: card-outline-primary | card-outline-success |
card-outline-warning | card-outline-danger -->
Gradient Top Cards
Cards with coloured gradient accent bars at the top — a VBoard
signature style.
Primary
Indigo to cyan gradient top bar.
Success
Green to teal gradient top bar.
Warning
Amber to orange gradient top bar.
Danger
Red to pink gradient top bar.
Purple
Purple to pink gradient top bar.
Wide Card with Gradient Top
Gradient top cards can span multiple columns for featured or hero content sections. Add card-hover-lift to animate on hover.
<div class="card
card-top-grad ctg-primary card-hover-lift">
<div class="card-body">...</div>
</div>
<!-- ctg-primary | ctg-success | ctg-warning | ctg-danger | ctg-purple
-->
Full Gradient Cards
Cards with full gradient backgrounds — for hero banners, CTAs, and
featured content.
🚀
Indigo → Cyan
Primary gradient. Great for main CTAs and hero sections in the dashboard.
✅
Green → Cyan
Success gradient. Use for completion states, confirmed actions, and positive metrics.
👑
Purple → Pink
Premium gradient. Perfect for upgrade prompts and premium tier feature highlights.
🔥
Amber → Red
Warning gradient. High-attention messaging.
🌙
Dark → Indigo
Dark premium gradient for night-mode aesthetic.
<div class="card card-grad
card-grad-1 card-hover-lift">
<div class="card-body">...</div>
</div>
<!-- card-grad-1 (indigo–cyan) | card-grad-2 (green–cyan) | card-grad-3
(amber–red) | card-grad-4 (purple–pink) | card-grad-5 (dark–indigo) -->
Stat / KPI Cards
Dashboard metric cards with icon, value, label, trend indicator,
and mini progress bar.
Total Users
12,847
+12.5% this
month
Revenue
$48.2K
+8.3% this
month
Pending Orders
284
-3.1% this
week
Error Rate
0.8%
-0.2% improved
<div class="card
card-top-grad ctg-primary card-hover-lift">
<div class="mini-card">
<div class="mini-card-row">
<div><div class="mini-card-label">Users</div><div class="mini-card-val">12,847</div></div>
<div class="mini-card-icon
si-blue">...</div>
</div>
</div>
</div>
User / Profile Cards
Team member profile cards with cover, avatar, stats, tags and
action buttons.
JD
James Davidson
Senior Product Designer · Engineering
24
Projects
186
Tasks
4.9★
Rating
SC
Sarah Chen
Lead Developer · Engineering
38
Projects
412
Commits
4.8★
Rating
RP
Ryan Park
Marketing Manager · Marketing
17
Projects
98
Campaigns
4.7★
Rating
Pricing Cards
Subscription plan cards with feature lists, recommended badge, and
action buttons.
Starter
$0
/ month — Free forever
- Up to 3 projects
- 1 GB storage
- Community support
- Advanced analytics
- Priority support
- Custom domain
⭐ Most Popular
Pro
$29
/ month — Billed monthly
- Unlimited projects
- 100 GB storage
- Priority support
- Advanced analytics
- Custom domain
- White label
Enterprise
Custom
Contact sales for pricing
- Everything in Pro
- Unlimited storage
- Dedicated manager
- SLA guarantee
- White label
- On-premise option
Blog, Product & Notification
Cards
Ready-to-use blog posts, e-commerce products, and notification
feed cards.
Blog cards
📊
Analytics
How to Build Smarter Dashboards with Real-Time Data
Learn the key principles behind effective data visualisation
and how to surface the right metrics at the right time.
🎨
Design
Design System Principles That Scale Across Products
A deep dive into building component libraries that remain
consistent across large engineering teams.
🚀
Growth
10 Marketing Strategies That Actually Drive SaaS Growth
From content flywheel to product-led growth — a practical
guide to scaling a SaaS product in 2025.
Product cards
🎧
-20%
♡
Wireless Pro Headphones
Audio · Electronics
$79.99$99.99
⌚
NEW
♡
Smart Watch Ultra
Wearables · Fitness
$199.00
💻
HOT
♡
MacBook Stand Pro
Accessories · Workspace
$49.99$69.99
🖱️
♡
Ergonomic Mouse
Peripherals · Office
$34.99
Notification feed card
Notifications
4
new
New user registered
Emily Wilson created an account and is awaiting approval.
2 minutes ago
Payment received
$248.00 payment from Acme Corp has been processed.
15 minutes ago
Storage at 90%
You are using 4.5 GB of your 5 GB storage quota.
1 hour ago
Deployment failed
Build #1042 failed on the production pipeline. Review logs.
3 hours ago
Horizontal card
🎯
Campaign Analytics
Track your marketing campaigns in real time with advanced
attribution.
Analytics
📊
Revenue Dashboard
Visualise your MRR, ARR, churn rate and growth in one place.
Finance
🤖
AI Insights Engine
Let AI surface anomalies and growth opportunities
automatically.
AI
Card Hover Effects
Hover over each card to see lift, glow, scale, and border
highlight effects.
⬆️
Lift
Translates upward on hover
✨
Glow
Adds a purple ring glow
🔍
Scale
Scales up slightly on hover
🎯
Border
Border turns primary on hover
<div class="card
card-hover-lift">...</div>
<div class="card
card-hover-glow">...</div>
<div class="card
card-hover-scale">...</div>
<div class="card
card-hover-border">...</div>