Stats

A component that displays content as a stats with numbers.


Stats #1

316,000+

Qualified Instructor

1.8 Billion+

Course enrolments

41,000+

Courses in 42 languages

179,000+

Online Videos
// import node module libraries
import { Col, Row, Container } from 'react-bootstrap';
// import custom components
import StatTopBigIcon from 'components/marketing/common/stats/StatTopBigIcon';
export const Stats1Example = () => {
return (
<section className="py-8">
<Container>
<Row>
<Col lg={3} md={6} className="border-top-md border-bottom border-end-md ">
<StatTopBigIcon
title="Qualified Instructor"
value="316,000+"
iconName="award"
colorVariant="info"
/>
</Col>
<Col lg={3} md={6} className="border-top-md border-bottom border-end-lg ">
<StatTopBigIcon
title="Course enrolments"
value="1.8 Billion+"
iconName="users"
colorVariant="warning"
/>
</Col>
<Col lg={3} md={6} className="border-top-lg border-bottom border-end-md ">
<StatTopBigIcon
title="Courses in 42 languages"
value="41,000+"
iconName="tv"
colorVariant="primary"
/>
</Col>
<Col lg={3} md={6} className="border-top-lg border-bottom ">
<StatTopBigIcon
title="Online Videos"
value="179,000+"
iconName="film"
colorVariant="success"
/>
</Col>
</Row>
</Container>
</section>
)
}

Stats #2

Our core values

Geeks is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed.

20M

Learners

57K

Instructors

21K

Courses

380M

Course enrollments

// import node module libraries
import { Col, Container, Row } from 'react-bootstrap';
export const Stats2Example = () => {
const title = 'Our core values';
const description = 'Geeks is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed.';
const counters = [
{ id: 1, title: 'Learners', value: '20M' },
{ id: 2, title: 'Instructors', value: '57K' },
{ id: 3, title: 'Courses', value: '21K' },
{ id: 4, title: 'Course enrollments', value: '380M' }
];
return (
<section className='py-8'>
<Container>
<Row>
<Col md={6} sm={12} className="offset-right-md-6 mb-6">
<h2 className="display-4 mb-3 fw-bold">{title}</h2>
<p className="lead">{description}</p>
</Col>
</Row>
<Row>
{counters.map((item, index) => {
return (
<Col lg={3} md={6} sm={6} xs={6} key={index}>
<div className="border-top pt-4 mt-6 mb-5">
<h1 className="display-3 fw-bold mb-0">{item.value}</h1>
<p className="text-uppercase text-muted">{item.title}</p>
</div>
</Col>
);
})}
</Row>
</Container>
</section>
);
}

Stats #3

Revenue

$467.34

Earning this month$203.23
Students Enrollments

12,000

New this month120+
Courses Rating

4.80

Rating this month10+
// import node module libraries
import { Row, Col } from 'react-bootstrap';
// import custom components
import StatRightBadge from 'components/marketing/common/stats/StatRightBadge';
export const Stats3Example = () => {
return (
<section className="p-4 bg-light rounded-3">
<Row>
<Col lg={4} md={12} sm={12} className="mb-4 mb-lg-0">
<StatRightBadge
title="Revenue"
subtitle="Earning this month"
value="$467.34"
badgeValue="$203.23"
colorVariant="success"
/>
</Col>
<Col lg={4} md={12} sm={12} className="mb-4 mb-lg-0">
<StatRightBadge
title="Students Enrollments"
subtitle="New this month"
value="12,000"
badgeValue="120+"
colorVariant="info"
/>
</Col>
<Col lg={4} md={12} sm={12} className="mb-4 mb-lg-0">
<StatRightBadge
title="Courses Rating"
subtitle="Rating this month"
value="4.80"
badgeValue="10+"
colorVariant="warning"
/>
</Col>
</Row>
</section>
)
}

Stats #4

$3,210

Earning this month

$3,800

Account Balance

$10,800

Life Time Sales

// import node module libraries
import { Col, Row } from 'react-bootstrap';
// import custom components
import StatTopIcon from 'components/marketing/common/stats/StatTopIcon';
export const Stats4Example = () => {
return (
<section className="p-4 bg-light rounded-3">
<Row>
<Col lg={4} md={12} sm={12} className="mb-4 mb-lg-0">
<StatTopIcon
title="Earning this month"
value="$3,210"
iconName="folder"
colorVariant="primary"
progress={65}
/>
</Col>
<Col lg={4} md={12} sm={12} className="mb-4 mb-lg-0">
<StatTopIcon
title="Account Balance"
value="$3,800"
iconName="shopping-bag"
colorVariant="danger"
progress={65}
/>
</Col>
<Col lg={4} md={12} sm={12}>
<StatTopIcon
title="Life Time Sales"
value="$10,800"
iconName="send"
colorVariant="warning"
progress={65}
/>
</Col>
</Row>
</section>
);
}

Stats #5

TOTAL POSTS

2,000

100 Last 30 Days
ASSETS

367

300+ Media Object
USERS

13,234

1.5k in 30Days
COMMENTS

120

20+ Comments
// import node module libraries
import { Col, Row } from 'react-bootstrap';
import { mdiAccountMultiple, mdiImageMultiple, mdiMessageReplyText, mdiTextBoxMultiple } from '@mdi/js';
// import custom components
import StatRightBGIcon from 'components/dashboard/common/stats/StatRightBGIcon';
export const Stats5 = () => {
return (
<section className="p-4 bg-light rounded-3">
<Row>
<Col xl={3} lg={6} md={12} sm={12}>
<StatRightBGIcon
title="TOTAL POSTS"
value="2,000"
summary="100 Last 30 Days"
iconName={mdiTextBoxMultiple}
iconColorVariant="primary"
classValue="mb-4"
/>
</Col>
<Col xl={3} lg={6} md={12} sm={12}>
<StatRightBGIcon
title="ASSETS"
value="367"
summary="300+ Media Object"
iconName={mdiImageMultiple}
iconColorVariant="warning"
classValue="mb-4"
/>
</Col>
<Col xl={3} lg={6} md={12} sm={12}>
<StatRightBGIcon
title="USERS"
value="13,234"
summary="1.5k in 30Days"
iconName={mdiAccountMultiple}
iconColorVariant="success"
classValue="mb-4"
/>
</Col>
<Col xl={3} lg={6} md={12} sm={12}>
<StatRightBGIcon
title="COMMENTS"
value="120"
summary="20+ Comments"
iconName={mdiMessageReplyText}
iconColorVariant="info"
classValue="mb-4"
/>
</Col>
</Row>
</section>
);
}

Stats #6

SALES

$10,800

+20.9$Number of sales
COURSES

2,456

120+Number of pending
STUDENTS

1,22,456

+1200Students
INSTRUCTOR

22,786

+200Instructor
// import node module libraries
import { Row, Col } from 'react-bootstrap';
// import custom components
import StatRightIcon from 'components/dashboard/common/stats/StatRightIcon';
export const Stats6 = () => {
return (
<section className="p-4 bg-light rounded-3">
<Row>
<Col xl={3} lg={6} md={12} sm={12}>
<StatRightIcon
title="SALES"
value="$10,800"
summary="Number of sales"
summaryValue="+20.9$"
summaryIcon="up"
showSummaryIcon
iconName="shopping-bag"
iconColorVariant="primary"
classValue="mb-4"
/>
</Col>
<Col xl={3} lg={6} md={12} sm={12}>
<StatRightIcon
title="COURSES"
value="2,456"
summary="Number of pending"
summaryValue="120+"
summaryIcon="down"
iconName="book-open"
iconColorVariant="primary"
classValue="mb-4"
/>
</Col>
<Col xl={3} lg={6} md={12} sm={12}>
<StatRightIcon
title="STUDENTS"
value="1,22,456"
summary="Students"
summaryValue="+1200"
summaryIcon="up"
showSummaryIcon
iconName="users"
iconColorVariant="primary"
classValue="mb-4"
/>
</Col>
<Col xl={3} lg={6} md={12} sm={12}>
<StatRightIcon
title="INSTRUCTOR"
value="22,786"
summary="Instructor"
summaryValue="+200"
summaryIcon="up"
showSummaryIcon
iconName="user-check"
iconColorVariant="primary"
classValue="mb-4"
/>
</Col>
</Row>
</section>
);
}
Buy Now