Stats Section
The Stats Section is a versatile component for showcasing key metrics, accomplishments, or any numerical data in an elegant grid layout. It's designed to highlight important statistics with clear visual hierarchy, making them stand out on your landing page.
- 150+projects
- Over 150 projects successfully delivered.
- 9team members
- Our core team consists of 9 experts.
- 300+freelancers
- We collaborate with 300+ creative freelancers.
- 25+awards
- Recognized with 25+ awards and featured in industry publications.
- 10+years experience
- Bringing 10+ years of design experience to every project.
- $25B+revenue
- Our work has contributed to over $25 billion in revenue.
Usage
Import the component:
import { LandingStatsSection } from '@/components/landing/stats/LandingStatsSection';
Basic implementation:
<LandingStatsSection
stats={[
{ value: '150+', label: 'projects', description: 'Over 150 projects successfully delivered.' },
{ value: '9', label: 'team members', description: 'Our core team consists of 9 experts.' },
{ value: '300+', label: 'freelancers', description: 'We collaborate with 300+ creative freelancers.' }
]}
/>
Examples
With Title and Description
Our Achievements
We take pride in our accomplishments and the impact we've made across various projects and industries.
- 150+projects
- Over 150 projects successfully delivered.
- 9team members
- Our core team consists of 9 experts.
- 300+freelancers
- We collaborate with 300+ creative freelancers.
Without Borders
- 150+
- Over 150 projects successfully delivered.
- 9team members
- Our core team consists of 9 experts.
- 300+freelancers
- We collaborate with 300+ creative freelancers.
With Background
- 150+projects
- Over 150 projects successfully delivered.
- 9team members
- Our core team consists of 9 experts.
- 300+freelancers
- We collaborate with 300+ creative freelancers.
- 25+awards
- Recognized with 25+ awards and featured in industry publications.
With Background Glow
- 150+projects
- Over 150 projects successfully delivered.
- 9team members
- Our core team consists of 9 experts.
- 300+freelancers
- We collaborate with 300+ creative freelancers.
- 25+awards
- Recognized with 25+ awards and featured in industry publications.
Different Column Layouts
It's possible to use different column layouts for desktop and mobile screens. For example, you can use 4 columns on desktop and 1 column on mobile.
- 150+projects
- Projects delivered in the last 12 months.
- 9designers
- That are part of our team.
- 30+devs
- Developers that we work with.
- 25+awards
- Industry awards since 2010.
Individual Stat Items
You can also use LandingStatItem directly for more control:
- 150+projects
- Over 150 projects successfully delivered.
- 9team members
- Our core team consists of 9 experts.
- 300+freelancers
- We collaborate with 300+ creative freelancers.
API Reference
LandingStatsSection Props
| Prop Name | Prop Type | Required | Default |
|---|---|---|---|
| stats | Array<{ value: string; label?: string; description: string }> | Yes | [] |
| className | string | No | '' |
| innerClassName | string | No | '' |
| title | string | No | undefined |
| titleComponent | React.ReactNode | No | undefined |
| description | string | React.ReactNode | No | undefined |
| descriptionComponent | React.ReactNode | No | undefined |
| variant | 'primary' | 'secondary' | 'default' | No | 'default' |
| withBackground | boolean | No | false |
| withBackgroundGlow | boolean | No | false |
| backgroundGlowVariant | 'primary' | 'secondary' | No | 'primary' |
| columnsDesktop | 2 | 3 | 4 | No | 3 |
| columnsMobile | 1 | 2 | No | 1 |
| hasBorders | boolean | No | true |
| textPosition | 'center' | 'left' | No | 'center' |
| children | React.ReactNode | No | undefined |
LandingStatItem Props
| Prop Name | Prop Type | Required | Default |
|---|---|---|---|
| value | string | Yes | - |
| description | string | Yes | - |
| label | string | No | undefined |
| className | string | No | '' |
| variant | 'primary' | 'secondary' | No | 'primary' |
| hasBorder | boolean | No | true |
Stats Object Interface
interface StatItem {
value: string;
label?: string;
description: string;
}
More Examples
For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.
Also see:
- About Section component
- Testimonial Grid component
- Product Feature component