Sharjah Design System نظام الشارقة للتصميم
Sharjah Design System نظام الشارقة للتصميم
عربي Government of Sharjah
Home
Typography Color system Iconography Layout and spacing Input & fields Buttons Responsive Accessibility Design tokens Content design
Get started UI Components Templates UI Kit
Roadmap

Links

Home Getting Started UI Kit

Guidelines

Typography Color system Iconography
Buttons Responsive Design Tokens

Results

Search the site for “”

Statistics

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.
Previous Stepper Next Templates