Ctrl K
42 Active Shoppers
Alex Devlin
Alex Devlin Lead Store Admin

UI Elements & Component System

Production-ready design system tokens, interactive micro-interactions, and copyable code snippets.

Back to Dashboard

Buttons, Triggers & Segmented Groups

High-contrast solid, gradient, outline, icon, size variants, and state transitions

Variants & Accents

Size Hierarchy & Segmented Group

HTML Snippet 
<!-- Button Variants -->
<button class="btn btn-primary">Primary Gradient</button>
<button class="btn btn-secondary">Secondary Outline</button>
<button class="btn btn-mint">Neon Mint Solid</button>
<button class="btn btn-danger">Hot Coral Danger</button>
<button class="btn btn-cyan">Electric Cyan</button>
<button class="btn btn-amber">Solar Amber</button>
<button class="btn btn-ghost">Ghost Subtle</button>

<!-- Button with Icon -->
<button class="btn btn-primary">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
  <span>With Icon</span>
</button>

<!-- Segmented Button Group -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm">Day</button>
  <button class="btn btn-primary btn-sm">Week</button>
  <button class="btn btn-secondary btn-sm">Month</button>
</div>

Status Badges, Loyalty Tiers & Trend Chips

Animated pulsing dots, order fulfillment lifecycle tags, and metric uplift chips

Order & Inventory Status Pills

Delivered Processing Shipped Pending Review Cancelled / Refunded 6 New Orders

Customer Loyalty Tiers & Growth Trends

👑 VIP Gold Member 💎 Diamond Tier ⚡ Platinum Tier 🛡️ Silver Tier +24.8% YoY -3.2% Variance
HTML Snippet 
<!-- Status Pills with Glowing Dot -->
<span class="status-pill success"><span class="pill-dot"></span>Delivered</span>
<span class="status-pill purple"><span class="pill-dot"></span>Processing</span>
<span class="status-pill info"><span class="pill-dot"></span>Shipped</span>
<span class="status-pill warning"><span class="pill-dot"></span>Pending Review</span>
<span class="status-pill danger"><span class="pill-dot"></span>Cancelled</span>

<!-- Trend Badges -->
<span class="trend-badge up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="18 15 12 9 6 15"/></svg> +24.8% YoY</span>
<span class="trend-badge down"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg> -3.2% Variance</span>

Avatars, Online Presence & Overlapping Groups

High-resolution portraits, gradient initials, responsive sizing scale, status indicators, and grouped team stacks

Avatar Sizing Scale

Sarah
Chloe
Carlos
Elena
Alex

Live Presence States

Sophia
Marcus
Amara
David

Overlapping Team Stacks

Alex
Sophia
Marcus
Elena
Amara
+4
HTML Snippet 
<!-- Portrait Image Avatar with Online Presence -->
<div class="admin-avatar avatar-md">
  <img src="images/avatars/avatar-sophia.png" alt="Sophia" class="avatar-img">
  <span class="avatar-status-indicator online"></span>
</div>

<!-- Overlapping Avatar Stack -->
<div class="avatar-group">
  <div class="admin-avatar avatar-md"><img src="images/avatars/avatar-admin.png" alt="Alex" class="avatar-img"></div>
  <div class="admin-avatar avatar-md"><img src="images/avatars/avatar-sophia.png" alt="Sophia" class="avatar-img"></div>
  <div class="admin-avatar avatar-md"><img src="images/avatars/avatar-marcus.png" alt="Marcus" class="avatar-img"></div>
  <div class="admin-avatar avatar-md" style="background:var(--grad-primary);">+4</div>
</div>

Form Inputs, Floating Labels, Sliders & Toggles

Modern inputs, range controls with dynamic bubbles, custom switches and upload dropzone
Official invoice copies will be automatically dispatched here.
Drag and drop product images or 3D models here Supports PNG, WEBP, GLTF up to 50MB per file
HTML Snippet 
<!-- Input with Left Icon -->
<div class="input-with-icon">
  <svg class="input-icon" viewBox="0 0 24 24">...</svg>
  <input type="email" class="form-input" placeholder="admin@nuvora.store">
</div>

<!-- Floating Label Input -->
<div class="floating-form-group">
  <input type="text" class="floating-input" placeholder=" ">
  <label class="floating-label">Product Title</label>
</div>

<!-- Switch Wrap -->
<label class="switch-wrap">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
  <span>Enable Feature</span>
</label>

Alert Callouts, Notifications & Dynamic Toasts

Dismissible status message banners and programmatic toast alerts
Success Operation: Product catalog synchronized across all global CDN edge locations without downtime.
Inventory Warning: 3 SKUs have dipped below the safety re-order threshold (10 units remaining).
Payment Gateway Alert: Sandbox testing mode is currently enabled for checkout payments.

Programmatic Toast Dispatchers

HTML / JavaScript 
<!-- Dismissible Alert Box -->
<div class="alert-box success">
  <svg viewBox="0 0 24 24">...</svg>
  <div><strong>Success:</strong> Action executed successfully.</div>
  <button class="alert-close" onclick="this.parentElement.remove()">×</button>
</div>

<!-- Programmatic Toast Call (JS) -->
AdminToast.show('Fulfillment Complete', 'Order #98214 dispatched.', 'success');

Data Tables & Responsive Pagination

High-contrast table layout with sorting headers, avatar cells, and page selectors
Customer Product Ordered Date Amount Status Actions
Sophia
Sophia Reynolds sophia.r@outlook.com
Aurora ANC Headphones
 Sep 28, 2026 $147.00 Processing
Marcus
Marcus Vance marcus.v@techcorp.io
Pulse Fit Smartwatch S2
 Sep 28, 2026 $83.00 Shipped
Elena
Elena Rostova elena.rostova@gmail.com
Bouclé Curved Accent Chair
 Sep 28, 2026 $219.00 Pending
Showing 1–10 of 148 entries
…
HTML Snippet 
<!-- Data Table Container -->
<div class="admin-table-wrap">
  <table class="admin-table">
    <thead>
      <tr>
        <th>Customer</th>
        <th>Date</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sophia Reynolds</td>
        <td>Sep 28, 2026</td>
        <td><span class="status-pill purple">Processing</span></td>
      </tr>
    </tbody>
  </table>
</div>

Workflow Stepper, Breadcrumbs & Progress Gauges

Fulfillment wizard pipeline, breadcrumb hierarchy, and category allocation meters

Breadcrumb Trail

Multi-Step Workflow Stepper

✓
1. Cart Items
✓
2. Shipping
3
3. Payment
4
4. Review

Dynamic Multi-Segment Allocation Bar

🟣 Electronics 45% 🟢 Home 30% 🔴 Fashion 15% 🔵 Beauty 10%

Full-Width Animated Telemetry Progress Bars (Top-Aligned Labels)

Tier 1 Organic Conversion Velocity
$54,815 (78.4%)
Goal Monthly Revenue Milestone Target
$124,580 / $150,000 (83.1%)
HTML Snippet 
<!-- Workflow Stepper -->
<div class="wizard-stepper">
  <div class="step-node completed">
    <div class="step-circle">&#10003;</div>
    <span class="step-name">1. Cart</span>
  </div>
  <div class="step-node active">
    <div class="step-circle">2</div>
    <span class="step-name">2. Payment</span>
  </div>
  <div class="step-node">
    <div class="step-circle">3</div>
    <span class="step-name">3. Review</span>
  </div>
</div>

Tabs, Collapsible Accordions & Interactive Tooltips

Underlined navigation tabs, FAQ drawer accordions, and 4-directional hover tooltips

Rounded Container Capsule Tabs (.time-pill-group / .tab-container)

Underline Navigation Tabs

General Overview Inventory Logs Billing & Tax Security Audit

Collapsible Accordion

How do real-time stock thresholds trigger alerts?
When inventory hits ≤ 10 units, the system automatically triggers a background alert badge and logs the shortage into the admin notification center.
Can discounts be targeted by customer tier?
Yes, promo codes can restrict redemptions strictly to VIP or Gold members via the Discounts Engine.

Hover Tooltip Triggers

HTML Snippet 
<!-- Rounded Container Capsule Tabs -->
<div class="time-pill-group">
  <button class="time-pill-btn active">Overview</button>
  <button class="time-pill-btn">Fulfillment</button>
  <button class="time-pill-btn">Inventory</button>
</div>

<!-- Tooltip Trigger -->
<button class="btn btn-secondary" data-tooltip="Tooltip info text here">Hover Me</button>

WowDash Color Palette & Master Typography System

WowDash official token colors, Inter typography scale, and JetBrains Mono code tags
Primary Emerald #059669 (--primary-600)
Success Mint #16A34A (--success)
Warning Amber #FF9F29 (--warning)
Danger Red #DC2626 (--danger)
Info Cyan #06B6D4 (--info)
Royal Purple #8B5CF6 (--purple)

Typography Scale & Font Weights

H1 Display Heading (Inter 700 · 24px)

h1 / .page-title

H2 Section Header (Inter 700 · 18px)

h2 / .section-title

H3 Card Header (Inter 600 · 16px)

h3 / .card-title

Body Regular: Fast e-commerce fulfillment with real-time analytics telemetry. (Inter 400 · 14px)

p / .text-body
SKU: NUV-9024-X #ORD-2026-98214 JetBrains Mono (500 · 12px)
code / .sku-pill
CSS Typography & Tokens 
/* WowDash Design Tokens */
:root {
  --f-display: 'Inter', system-ui, -apple-system, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  --primary-600: #059669;
  --success: #16A34A;
  --warning: #FF9F29;
  --danger: #DC2626;
  --info: #06B6D4;
  --purple: #8B5CF6;
}

/* Typography Hierarchy */
h1 { font-family: var(--f-display); font-size: 24px; font-weight: 700; }
h2 { font-family: var(--f-display); font-size: 18px; font-weight: 700; }
h3 { font-family: var(--f-display); font-size: 16px; font-weight: 600; }
p  { font-family: var(--f-body); font-size: 14px; font-weight: 400; }
code { font-family: var(--f-mono); font-size: 12px; font-weight: 500; }

Authentication & Access Gateways

Live password strength computation and enterprise authentication gateways
Open Login ↗ Open Register ↗

Password Strength Calculator

Enter password

Enterprise SSO Triggers

HTML Snippet 
<!-- Password Strength Meter -->
<div class="strength-meter">
  <div class="strength-bars">
    <div class="strength-bar-seg active-strong"></div>
    <div class="strength-bar-seg active-strong"></div>
    <div class="strength-bar-seg active-strong"></div>
  </div>
  <div class="strength-text">Strong & secure key</div>
</div>

Metric KPI Cards & Telemetry Gauges

High-contrast executive stat tiles with neon icon containers, trend chips, and sparklines
+18.4%
Gross Revenue
$128,450.00
+$4,230 vs prior 30-day cycle
+12.6%
Processed Orders
1,492
99.4% on-time fulfillment rate
+8.2%
Active Customers
8,640
432 new members registered today
-1.4%
Cart Abandonment
18.2%
-0.8% improvement from last week
HTML Snippet 
<!-- KPI Metric Card -->
<div class="metric-card">
  <div class="metric-top">
    <div class="metric-icon-box violet">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">...</svg>
    </div>
    <span class="trend-badge up">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">...</svg> +18.4%
    </span>
  </div>
  <div class="metric-value-block">
    <span class="metric-label">Gross Revenue</span>
    <div class="metric-value">$128,450.00</div>
    <span class="metric-subtext">+$4,230 vs prior period</span>
  </div>
</div>

Modal Dialogs, Popovers & Action Prompts

Backdrop-blurred focused modals with accessibility esc key binding and action triggers

Interactive Dialog & Confirmation Sandbox

Test the glassmorphic custom confirmation popup (AdminConfirm) with danger icons, item tags, and keyboard ESC dismissal alongside full standard modals.

HTML / JS Snippet 
<!-- Modal Backdrop & Dialog -->
<div class="modal-backdrop" id="demoModal" style="display:none;" onclick="if(event.target===this)closeDemoModal()">
  <div class="admin-modal" style="max-width:500px;">
    <div class="modal-header">
      <h3 class="modal-title">Confirm System Action</h3>
      <button class="modal-close-btn" onclick="closeDemoModal()">&times;</button>
    </div>
    <div class="modal-body">
      <p>Are you sure you want to execute this global catalog synchronization?</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="closeDemoModal()">Cancel</button>
      <button class="btn btn-primary" onclick="executeAction()">Confirm & Proceed</button>
    </div>
  </div>
</div>

Activity Timeline & Event Audit Stream

Vertical event sequence with status nodes, timestamps, metadata pills, and dispatch logs
Order #ORD-2026-98214 Payment Settled 10 mins ago
Customer Sophia Reynolds completed payment of $349.00 USD via Apple Pay (Stripe Token tok_1Nw842).
Automated Fraud & Inventory Verification 24 mins ago
Risk Score: 0.02 (Low Risk). Reserved 1 unit from US West Hub (Bay 4 · Rack A).
Courier Tracking Label Dispatched 1 hour ago
FedEx Ground tracking label generated: TRK-9842019-US by Alex Devlin.
HTML Snippet 
<!-- Vertical Activity Timeline Stream -->
<div class="timeline-stream">
  <div class="timeline-item">
    <div class="timeline-node success">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
    </div>
    <div class="timeline-content-box">
      <div class="timeline-header">
        <span class="timeline-title">Payment Settled</span>
        <span class="timeline-time">10 mins ago</span>
      </div>
      <div class="timeline-body">Order #ORD-2026-98214 authorized via Apple Pay.</div>
    </div>
  </div>
</div>

Surfaces, Glassmorphic Cards & Bento Widgets

Translucent backdrop-blur cards, glowing accent borders, and executive summary widgets
Real-time Telemetry 60 Hz Feed
$48,920.00
Gross Settled Hourly Run-Rate
Edge Network Uptime 99.998% SLA
18 Global Nodes
All regions responding under 18ms latency
HTML / CSS Snippet 
<!-- Glassmorphic Stat Card -->
<div class="glass-stat-card">
  <div class="stat-top">
    <span class="stat-label">Real-time Telemetry</span>
    <span class="status-pill success"><span class="pill-dot"></span>Live</span>
  </div>
  <div class="metric-value">$48,920.00</div>
  <div class="admin-progress-bar" style="height:6px;">
    <div class="progress-fill mint" style="width:78%;"></div>
  </div>
</div>

<!-- Glow Gradient Card -->
<div class="glow-gradient-card">
  <span class="stat-label">Edge Network Uptime</span>
  <div class="metric-value">18 Global Nodes</div>
</div>

Dropdowns, Context Menus & Action Popovers

High-contrast dropdown panels with icons, keyboard shortcuts, dividers, and destructive actions

Custom Filter Selectors

HTML Snippet 
<!-- Action Dropdown Menu -->
<div class="admin-dropdown-menu">
  <a href="#" class="dropdown-item">
    <div class="dropdown-item-left">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">...</svg>
      <span>Edit Item</span>
    </div>
    <span class="dropdown-shortcut">⌘E</span>
  </a>
  <div class="dropdown-divider"></div>
  <a href="#" class="dropdown-item danger">
    <div class="dropdown-item-left">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">...</svg>
      <span>Delete Item</span>
    </div>
    <span class="dropdown-shortcut">⌫</span>
  </a>
</div>

Empty States & Zero-Data Placeholders

Clean zero-data cards with call-to-action buttons for empty tables, searches, and queues
No Orders in Dispatch Queue
All customer orders have been successfully fulfilled and handed over to carrier couriers.
Manual Order
Stock Levels Optimal
No SKUs are currently below the reorder threshold. Multi-warehouse hubs are operating at full capacity.
Inspect Warehouse Bays
HTML Snippet 
<!-- Empty State Component -->
<div class="empty-state-card">
  <div class="empty-state-icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">...</svg>
  </div>
  <div class="empty-state-title">No Orders in Dispatch Queue</div>
  <div class="empty-state-desc">All customer orders have been successfully fulfilled.</div>
  <button class="btn btn-primary btn-sm">Create Order</button>
</div>