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.
- 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.
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.
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.