Small Box

Small boxes are versatile UI components designed to showcase key metrics, statistics, and important data points in a visually appealing and easily digestible format. Each box features an icon, metric value, descriptive text, and an optional action link, making them perfect for dashboards and summary views.

Design Tips:
  • Use consistent colors to represent similar types of metrics (e.g., green for success, blue for information)
  • Include trend indicators or badges to show changes over time
  • Keep labels concise and meaningful
  • Use appropriate icons that clearly represent the metric type

Basic Metric Boxes

Basic metric boxes display important statistics with contextual colors, icons, and trend indicators. Each box includes a main value, descriptive text, and a link to more detailed information. The background colors help users quickly identify different types of metrics.

Basic Metric Box Examples
Loading...

Loading States

Loading states provide visual feedback when data is being fetched or updated. The overlay with a spinning icon and descriptive text helps users understand that the content is being refreshed, enhancing the user experience during data loading.

Loading State Examples
Loading...

Gradient Styles

Gradient-styled boxes add a modern and visually appealing touch to your metrics display. These boxes use carefully chosen color combinations to create depth and visual hierarchy while maintaining readability and professional appearance.

Gradient Style Examples
Loading...

On this page


Copyright © 2025 Your Company. All rights reserved.

Version 1.0.4