Info Box Components

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.

Design Tip: For optimal visual hierarchy, use consistent icon styles and color schemes across related info boxes. Consider using contrasting colors for different data categories to improve scanability.

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.

Basic Info Box Examples
Loading...

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.

Background Info Box Examples
Loading...

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.

Outline Info Box Examples
Loading...

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.

Loading Info Box Examples
Loading...

On this page


Copyright © 2025 Your Company. All rights reserved.

Version 1.0.4