Files
HugoBlox-kit/modules/blox-tailwind/blox/stats/README.md
T

2.7 KiB

Stats Block

Let your numbers tell your success story

Showcase your achievements, milestones, and key metrics with the Stats block - a powerful component that transforms dry numbers into compelling visual statements that build credibility and demonstrate your impact.

✨ Key Features

  • Bold Typography: Extra-large numbers (4xl to 6xl) that command attention
  • Three-Column Grid: Perfect layout for highlighting your top 3 metrics
  • Visual Separators: Subtle borders that organize information without clutter
  • Responsive Design: Adapts beautifully from mobile to desktop
  • Markdown Support: Rich formatting for both statistics and descriptions
  • Optional Header: Add context with title and descriptive text
  • Professional Styling: Clean, modern design that builds trust

🎯 Perfect For

  • Business Metrics: Revenue, customers served, years in business
  • Product Statistics: Downloads, users, installations, success rates
  • Company Achievements: Awards won, projects completed, team size
  • Performance Data: Uptime, response times, satisfaction scores
  • Social Proof: Followers, testimonials, reviews, case studies
  • Impact Metrics: Lives changed, money saved, time reduced

🚀 Why Choose Stats Block?

Instant Credibility: Large, prominent numbers immediately establish authority and success

Social Proof: Quantified achievements provide concrete evidence of your value

Visual Impact: Bold typography and clean layout make statistics impossible to ignore

Trust Building: Professional presentation of metrics builds confidence in your offering

📊 Psychology of Numbers

  • Cognitive Ease: Large numbers are processed faster by the human brain
  • Authority Signaling: Impressive statistics position you as an industry leader
  • Decision Shortcuts: Metrics help visitors make quick trust decisions
  • Competitive Advantage: Quantified success differentiates you from competitors

💡 Best Practices

  • Choose your three most impressive and relevant metrics
  • Use round numbers when possible (1M+ instead of 987,432)
  • Include context in descriptions ("Happy Customers", "Projects Delivered")
  • Update regularly to maintain accuracy and freshness
  • Order statistics by impact or importance

🎨 Visual Design

  • High Contrast: Bold numbers against clean backgrounds
  • Generous Spacing: Prevents overwhelming busy appearance
  • Consistent Sizing: Uniform treatment creates professional cohesion
  • Mobile-First: Stacks gracefully on smaller screens

Perfect for SaaS companies, agencies, consultants, and any business that has measurable achievements worth celebrating. Turn your success metrics into powerful marketing assets that speak louder than words.