Info Box

Essential UI components for displaying key metrics, statistics, and status updates in a clear and engaging way.

Info boxes are essential UI components for displaying key metrics, statistics, and status updates in a clear and engaging way. They combine icons, text, and visual indicators to present information at a glance while maintaining a professional and modern appearance.

Basic Info Box

Basic info boxes provide a clean and straightforward way to display metrics. Each box combines an icon with a colored background and content area, making it perfect for highlighting key statistics or status information.

Active Users 2,845 Last 30 days
Total Orders 856 +12% this month
App Downloads 24.7K Mobile & Desktop
Customer Reviews 4.8 Average rating
Monthly Revenue $84.9K +65% vs target
Support Tickets 142 Pending resolution
Conversion Rate 3.2% Up from 2.8%
Tasks Completed 287 This week 
<div class="row g-3">
  <div class="col-md-6">
      <div class="info-box">
          <span class="info-box-icon bg-info"><i class="ri-team-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Active Users</span>
              <span class="info-box-number">2,845</span>
              <span class="info-box-more-info">Last 30 days</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box">
          <span class="info-box-icon bg-success"><i class="ri-shopping-bag-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Total Orders</span>
              <span class="info-box-number">856</span>
              <span class="info-box-more-info">+12% this month</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box">
          <span class="info-box-icon bg-warning"><i class="ri-download-cloud-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">App Downloads</span>
              <span class="info-box-number">24.7K</span>
              <span class="info-box-more-info">Mobile & Desktop</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box">
          <span class="info-box-icon bg-danger"><i class="ri-chat-3-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Customer Reviews</span>
              <span class="info-box-number">4.8</span>
              <span class="info-box-more-info">Average rating</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box">
          <span class="info-box-icon text-bg-primary"><i class="ri-wallet-3-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Monthly Revenue</span>
              <span class="info-box-number">$84.9K</span>
              <span class="info-box-more-info">+65% vs target</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box">
          <span class="info-box-icon text-bg-secondary"><i class="ri-headphone-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Support Tickets</span>
              <span class="info-box-number">142</span>
              <span class="info-box-more-info">Pending resolution</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box">
          <span class="info-box-icon text-bg-secondary"><i class="ri-line-chart-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Conversion Rate</span>
              <span class="info-box-number">3.2%</span>
              <span class="info-box-more-info">Up from 2.8%</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box">
          <span class="info-box-icon text-bg-primary"><i class="ri-calendar-check-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Tasks Completed</span>
              <span class="info-box-number">287</span>
              <span class="info-box-more-info">This week</span>
          </div>
      </div>
  </div>
</div>

Background Info Box

Background info boxes enhance visual impact with full-color backgrounds and include progress bars for showing completion rates or progress metrics. These are ideal for dashboards and analytics displays.

Team Members 3,590
75% Growth in Q3 2024
Monthly Revenue $84,950
65% Above Monthly Target
Support Tickets 7,842
80% Resolution Rate This Month
Conversion Rate 4.2%
88% Improvement vs Last Period
Email Campaign 15,680
92% Delivery Rate Achieved
App Downloads 89,247
78% of Monthly Goal Reached
New Registrations 2,847
95% Conversion from Signups
Project Completion 156
85% On-time Delivery Rate 
<div class="row g-3">
  <div class="col-md-6">
      <div class="info-box bg-info">
          <span class="info-box-icon"><i class="ri-team-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Team Members</span>
              <span class="info-box-number">3,590</span>
              <div class="progress">
                  <div class="progress-bar" style="width: 75%"></div>
              </div>
              <span class="progress-description">
                  75% Growth in Q3 2024
              </span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box bg-success">
          <span class="info-box-icon"><i class="ri-wallet-3-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Monthly Revenue</span>
              <span class="info-box-number">$84,950</span>
              <div class="progress">
                  <div class="progress-bar" style="width: 65%"></div>
              </div>
              <span class="progress-description">
                  65% Above Monthly Target
              </span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box bg-warning">
          <span class="info-box-icon"><i class="ri-headphone-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Support Tickets</span>
              <span class="info-box-number">7,842</span>
              <div class="progress">
                  <div class="progress-bar" style="width: 80%"></div>
              </div>
              <span class="progress-description">
                  80% Resolution Rate This Month
              </span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box bg-danger">
          <span class="info-box-icon"><i class="ri-line-chart-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Conversion Rate</span>
              <span class="info-box-number">4.2%</span>
              <div class="progress">
                  <div class="progress-bar" style="width: 88%"></div>
              </div>
              <span class="progress-description">
                  88% Improvement vs Last Period
              </span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box text-bg-primary">
          <span class="info-box-icon"><i class="ri-mail-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Email Campaign</span>
              <span class="info-box-number">15,680</span>
              <div class="progress">
                  <div class="progress-bar bg-secondary" style="width: 92%"></div>
              </div>
              <span class="progress-description">
                  92% Delivery Rate Achieved
              </span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box text-bg-secondary">
          <span class="info-box-icon"><i class="ri-download-cloud-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">App Downloads</span>
              <span class="info-box-number">89,247</span>
              <div class="progress">
                  <div class="progress-bar bg-primary" style="width: 78%"></div>
              </div>
              <span class="progress-description">
                  78% of Monthly Goal Reached
              </span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box text-bg-secondary">
          <span class="info-box-icon"><i class="ri-user-add-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">New Registrations</span>
              <span class="info-box-number">2,847</span>
              <div class="progress">
                  <div class="progress-bar bg-primary" style="width: 95%"></div>
              </div>
              <span class="progress-description">
                  95% Conversion from Signups
              </span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box text-bg-primary">
          <span class="info-box-icon"><i class="ri-calendar-check-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Project Completion</span>
              <span class="info-box-number">156</span>
              <div class="progress">
                  <div class="progress-bar bg-secondary" style="width: 85%"></div>
              </div>
              <span class="progress-description">
                  85% On-time Delivery Rate
              </span>
          </div>
      </div>
  </div>
</div>

Outline Info Box

Outline info boxes offer a lighter visual alternative with bordered styles. They maintain high readability while providing a more subtle appearance, perfect for secondary metrics or less critical information.

Email Campaigns 5,280 Sent this month
Scheduled Events 892 This month
Push Notifications 16.9K Delivered today
Pending Tasks 345 High priority
New Followers 1,247 This week
Documents 2,156 Processed
Security Scans 98.5% Clean rate
Page Load Speed 1.2s Average response 
<div class="row g-3">
  <div class="col-md-6">
      <div class="info-box info-box-outline info-box-outline-info">
          <span class="info-box-icon bg-info"><i class="ri-mail-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Email Campaigns</span>
              <span class="info-box-number">5,280</span>
              <span class="info-box-more-info">Sent this month</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box info-box-outline info-box-outline-success">
          <span class="info-box-icon bg-success"><i class="ri-calendar-check-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Scheduled Events</span>
              <span class="info-box-number">892</span>
              <span class="info-box-more-info">This month</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box info-box-outline info-box-outline-warning">
          <span class="info-box-icon bg-warning"><i class="ri-bell-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Push Notifications</span>
              <span class="info-box-number">16.9K</span>
              <span class="info-box-more-info">Delivered today</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box info-box-outline info-box-outline-danger">
          <span class="info-box-icon bg-danger"><i class="ri-list-check-2"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Pending Tasks</span>
              <span class="info-box-number">345</span>
              <span class="info-box-more-info">High priority</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box info-box-outline info-box-outline-primary">
          <span class="info-box-icon text-bg-primary"><i class="ri-user-add-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">New Followers</span>
              <span class="info-box-number">1,247</span>
              <span class="info-box-more-info">This week</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box info-box-outline info-box-outline-secondary">
          <span class="info-box-icon text-bg-secondary"><i class="ri-file-text-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Documents</span>
              <span class="info-box-number">2,156</span>
              <span class="info-box-more-info">Processed</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box info-box-outline info-box-outline-primary">
          <span class="info-box-icon text-bg-primary"><i class="ri-shield-check-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Security Scans</span>
              <span class="info-box-number">98.5%</span>
              <span class="info-box-more-info">Clean rate</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box info-box-outline info-box-outline-info">
          <span class="info-box-icon bg-info"><i class="ri-speed-up-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Page Load Speed</span>
              <span class="info-box-number">1.2s</span>
              <span class="info-box-more-info">Average response</span>
          </div>
      </div>
  </div>
</div>

Loading Info Box

Loading info boxes incorporate animated overlays to indicate active processes or data updates. They're essential for providing visual feedback during data fetching, synchronization, or processing operations.

Data Synchronization 8,750
78% Synchronized
Media Uploads 2,648
55% Uploaded
Cloud Backup 19.8GB
92% Completed
System Updates 56
95% Installed
Cache Refresh 4,280
67% Refreshed
File Downloads 1,547
43% Downloaded
Email Queue 892
84% Processed
Data Migration 25.4GB
72% Migrated 
<div class="row g-3">
  <div class="col-md-6">
      <div class="info-box bg-info loading">
          <span class="info-box-icon"><i class="ri-database-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Data Synchronization</span>
              <span class="info-box-number">8,750</span>
              <div class="progress">
                  <div class="progress-bar" style="width: 78%"></div>
              </div>
              <span class="progress-description">
                  78% Synchronized
              </span>
          </div>
          <div class="overlay">
              <i class="ri-loop-right-line fa-spin"></i>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box bg-success loading">
          <span class="info-box-icon"><i class="ri-upload-cloud-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Media Uploads</span>
              <span class="info-box-number">2,648</span>
              <div class="progress">
                  <div class="progress-bar" style="width: 55%"></div>
              </div>
              <span class="progress-description">
                  55% Uploaded
              </span>
          </div>
          <div class="overlay">
              <i class="ri-loop-right-line fa-spin"></i>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box bg-warning loading">
          <span class="info-box-icon"><i class="ri-cloud-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Cloud Backup</span>
              <span class="info-box-number">19.8GB</span>
              <div class="progress">
                  <div class="progress-bar" style="width: 92%"></div>
              </div>
              <span class="progress-description">
                  92% Completed
              </span>
          </div>
          <div class="overlay">
              <i class="ri-loop-right-line fa-spin"></i>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box bg-danger loading">
          <span class="info-box-icon"><i class="ri-server-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">System Updates</span>
              <span class="info-box-number">56</span>
              <div class="progress">
                  <div class="progress-bar" style="width: 95%"></div>
              </div>
              <span class="progress-description">
                  95% Installed
              </span>
          </div>
          <div class="overlay">
              <i class="ri-loop-right-line fa-spin"></i>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box text-bg-primary loading">
          <span class="info-box-icon"><i class="ri-refresh-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Cache Refresh</span>
              <span class="info-box-number">4,280</span>
              <div class="progress">
                  <div class="progress-bar bg-secondary" style="width: 67%"></div>
              </div>
              <span class="progress-description">
                  67% Refreshed
              </span>
          </div>
          <div class="overlay">
              <i class="ri-loop-right-line fa-spin"></i>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box text-bg-secondary loading">
          <span class="info-box-icon"><i class="ri-download-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">File Downloads</span>
              <span class="info-box-number">1,547</span>
              <div class="progress">
                  <div class="progress-bar bg-primary" style="width: 43%"></div>
              </div>
              <span class="progress-description">
                  43% Downloaded
              </span>
          </div>
          <div class="overlay">
              <i class="ri-loop-right-line fa-spin"></i>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box text-bg-secondary loading">
          <span class="info-box-icon"><i class="ri-mail-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Email Queue</span>
              <span class="info-box-number">892</span>
              <div class="progress">
                  <div class="progress-bar bg-primary" style="width: 84%"></div>
              </div>
              <span class="progress-description">
                  84% Processed
              </span>
          </div>
          <div class="overlay">
              <i class="ri-loop-right-line fa-spin"></i>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box text-bg-primary loading">
          <span class="info-box-icon"><i class="ri-folders-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Data Migration</span>
              <span class="info-box-number">25.4GB</span>
              <div class="progress">
                  <div class="progress-bar bg-secondary" style="width: 72%"></div>
              </div>
              <span class="progress-description">
                  72% Migrated
              </span>
          </div>
          <div class="overlay">
              <i class="ri-loop-right-line fa-spin"></i>
          </div>
      </div>
  </div>
</div>

Interactive Info Box Examples

Interactive info boxes provide real-time updates, hover effects, and clickable actions for enhanced user engagement. These examples demonstrate dynamic content updates and responsive interactions for modern dashboard applications.

Click-through Rate 3.45% Click to refresh
Page Views 127.3K Real-time data
Avg. Session 4m 32s Updated hourly
Bounce Rate 28.7% 7-day average 
<div class="row g-3">
  <div class="col-md-6">
      <div class="info-box interactive-box" onclick="refreshMetric(this)">
          <span class="info-box-icon bg-info"><i class="ri-mouse-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Click-through Rate</span>
              <span class="info-box-number" id="ctr-rate">3.45%</span>
              <span class="info-box-more-info">Click to refresh</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box interactive-box" onclick="refreshMetric(this)">
          <span class="info-box-icon bg-success"><i class="ri-eye-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Page Views</span>
              <span class="info-box-number" id="page-views">127.3K</span>
              <span class="info-box-more-info">Real-time data</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box interactive-box" onclick="refreshMetric(this)">
          <span class="info-box-icon bg-warning"><i class="ri-time-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Avg. Session</span>
              <span class="info-box-number" id="avg-session">4m 32s</span>
              <span class="info-box-more-info">Updated hourly</span>
          </div>
      </div>
  </div>
  <div class="col-md-6">
      <div class="info-box interactive-box" onclick="refreshMetric(this)">
          <span class="info-box-icon bg-danger"><i class="ri-arrow-up-line"></i></span>
          <div class="info-box-content">
              <span class="info-box-text">Bounce Rate</span>
              <span class="info-box-number" id="bounce-rate">28.7%</span>
              <span class="info-box-more-info">7-day average</span>
          </div>
      </div>
  </div>
</div>

Accessibility Guidelines

Ensure info box components are accessible to all users by following these best practices:

  • Use semantic HTML with proper heading structure and ARIA labels
  • Provide sufficient color contrast for all text and background combinations
  • Include descriptive text for screen readers explaining metric context
  • Ensure interactive elements are keyboard navigable with proper focus indicators
  • Use ARIA live regions for dynamic content updates
  • Provide alternative text descriptions for icon meanings
  • Implement proper error messaging and loading state announcements
On this page
Quick Links
Home Docs
Admin
Admin Dashboard Example
Themes
Website Example (Classic)
Website Example (Modern)
Dog Breeder 1 (Beagle)
Dog Breeder 2 (Golden Retriever)
Dog Breeder 3 (French Bulldog)
Dog Breeder 4 (Poodle)
Dog Breeder 5 (German Shepherd)
Dog Breeder 6 (Yorkshire Terrier)
Cat Breeder 1 (Persian)
Cat Breeder 2 (Siamese)
Cat Breeder 3 (Bengal)
Cat Breeder 4 (Abyssinian)
Cat Breeder 5 (Himalayan)
HOA 1
HOA 2
HOA 3
Real Estate 1
Real Estate 2
Other
AsteroBuilder
AsteroDigital
Paanstation