The Statistics component presents numerical information, key performance indicators (KPIs), and measurable insights in a clear and visually engaging format. It helps users quickly understand important data, identify trends, and compare values across government services. The Sharjah Design System provides six layout variants to accommodate different content types while maintaining consistency across digital experiences.
When to Use
Highlight key figures and achievements
Display organizational metrics and KPIs
Present reports and performance summaries
Showcase statistical insights and research data
Support dashboards and data-driven pages
Statistics should always communicate meaningful information that supports user understanding and decision-making.
Anatomy
Section title
Section description (optional)
Numerical value
Label or metric title
Supporting description (optional)
Icon (optional)
Chart or visualization (optional)
Action link (optional)
Interaction Behavior
Statistics are primarily informational.
Links and actions should be clearly distinguishable.
Charts should provide tooltips or additional context where applicable.
Hover states should only be applied to interactive elements.
Accessibility Guidelines
Present numbers as text rather than images.
Ensure sufficient colour contrast between values and backgrounds.
Do not rely solely on colour to communicate meaning.
Provide descriptive labels for charts and data visualizations.
Ensure all interactive elements are keyboard accessible.
Responsive Behavior
Statistics should reflow into responsive grid layouts.
Cards stack vertically on smaller screens.
Charts resize proportionally while maintaining readability.
Numerical values should remain prominent across all devices.
Use of Cookies by this site is just to guarantee Ease of Access and better user experience while browsing. Continuation of your browsing acknowledges your approval for Terms and Conditions of this site and its use of Cookies.
Privacy Policy
