extends ../_layout/default.pug
block styles
link(href='node_modules/@coreui/chartjs/dist/css/coreui-chartjs.css', rel='stylesheet')
block scripts
script(src='node_modules/chart.js/dist/chart.umd.js')
script(src='node_modules/@coreui/chartjs/dist/js/coreui-chartjs.js')
script(src='node_modules/@coreui/utils/dist/umd/index.js')
script(src='js/widgets.js')
block breadcrumb
+breadcrumb(
[
{ href: '#', label: 'Home'},
{ label: 'Components'},
{ label: 'Widgets'}
]
)
block view
.card.mb-4
.card-header
string Widgets
.card-body
+example()
.row.g-4
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card.text-white.bg-primary
.card-body.pb-0.d-flex.justify-content-between.align-items-start
div
.fs-4.fw-semibold 26K
span.fs-6.fw-normal (-12.4%
svg.icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-bottom")
| )
div Users
.dropdown
button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
svg.icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-options")
|
.dropdown-menu.dropdown-menu-end
a.dropdown-item(href='#') Action
a.dropdown-item(href='#') Another action
a.dropdown-item(href='#') Something else here
.c-chart-wrapper.mt-3.mx-3(style='height:70px;')
canvas#card-chart1.chart(height='70')
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card.text-white.bg-info
.card-body.pb-0.d-flex.justify-content-between.align-items-start
div
.fs-4.fw-semibold $6.200
span.fs-6.fw-normal (40.9%
svg.icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-top")
| )
div Income
.dropdown
button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
svg.icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-options")
.dropdown-menu.dropdown-menu-end
a.dropdown-item(href='#') Action
a.dropdown-item(href='#') Another action
a.dropdown-item(href='#') Something else here
.c-chart-wrapper.mt-3.mx-3(style='height:70px;')
canvas#card-chart2.chart(height='70')
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card.text-white.bg-warning
.card-body.pb-0.d-flex.justify-content-between.align-items-start
div
.fs-4.fw-semibold 2.49%
span.fs-6.fw-normal (84.7%
svg.icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-top")
| )
div Conversion Rate
.dropdown
button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
svg.icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-options")
.dropdown-menu.dropdown-menu-end
a.dropdown-item(href='#') Action
a.dropdown-item(href='#') Another action
a.dropdown-item(href='#') Something else here
.c-chart-wrapper.mt-3(style='height:70px;')
canvas#card-chart3.chart(height='70')
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card.text-white.bg-danger
.card-body.pb-0.d-flex.justify-content-between.align-items-start
div
.fs-4.fw-semibold 44K
span.fs-6.fw-normal (-23.6%
svg.icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-arrow-bottom")
| )
div Sessions
.dropdown
button.btn.btn-transparent.text-white.p-0(type='button', data-coreui-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
svg.icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-options")
.dropdown-menu.dropdown-menu-end
a.dropdown-item(href='#') Action
a.dropdown-item(href='#') Another action
a.dropdown-item(href='#') Something else here
.c-chart-wrapper.mt-3.mx-3(style='height:70px;')
canvas#card-chart4.chart(height='70')
+example()
.row.g-4
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card
.card-body
.fs-4.fw-semibold 89.9%
div Widget title
.progress.progress-thin.my-2
.progress-bar.bg-success(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
small.text-body-secondary Widget helper text
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card
.card-body
.fs-4.fw-semibold 12.124
div Widget title
.progress.progress-thin.my-2
.progress-bar.bg-info(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
small.text-body-secondary Widget helper text
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card
.card-body
.fs-4.fw-semibold $98.111,00
div Widget title
.progress.progress-thin.my-2
.progress-bar.bg-warning(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
small.text-body-secondary Widget helper text
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card
.card-body
.fs-4.fw-semibold 2 TB
div Widget title
.progress.progress-thin.my-2
.progress-bar.bg-danger(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
small.text-body-secondary Widget helper text
// /.col
// /.row.g-4
+example()
.row.g-4
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card.text-white.bg-primary
.card-body
.fs-4.fw-semibold 89.9%
div Widget title
.progress.progress-white.progress-thin.my-2
.progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
small.text-white.text-opacity-75 Widget helper text
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card.text-white.bg-warning
.card-body
.fs-4.fw-semibold 12.124
div Widget title
.progress.progress-white.progress-thin.my-2
.progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
small.text-white.text-opacity-75 Widget helper text
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card.text-white.bg-danger
.card-body
.fs-4.fw-semibold $98.111,00
div Widget title
.progress.progress-white.progress-thin.my-2
.progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
small.text-white.text-opacity-75 Widget helper text
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card.text-white.bg-info
.card-body
.fs-4.fw-semibold 2 TB
div Widget title
.progress.progress-white.progress-thin.my-2
.progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
small.text-white.text-opacity-75 Widget helper text
// /.col
// /.row.g-4
+example()
.row.g-4
.col-6.col-sm-4.col-xl-2
.card
.card-body.text-center
.text-body-secondary.small.text-uppercase.fw-semibold Title
.fs-6.fw-semibold.py-3 1,123
.c-chart-wrapper.mx-auto(style='height:40px;width:80px')
canvas#sparkline-chart-1.chart.chart-bar(height='40', width='80')
// /.col
.col-6.col-sm-4.col-xl-2
.card
.card-body.text-center
.text-body-secondary.small.text-uppercase.fw-semibold Title
.fs-6.fw-semibold.py-3 1,123
.c-chart-wrapper.mx-auto(style='height:40px;width:80px')
canvas#sparkline-chart-2.chart.chart-bar(height='40', width='80')
// /.col
.col-6.col-sm-4.col-xl-2
.card
.card-body.text-center
.text-body-secondary.small.text-uppercase.fw-semibold Title
.fs-6.fw-semibold.py-3 1,123
.c-chart-wrapper.mx-auto(style='height:40px;width:80px')
canvas#sparkline-chart-3.chart.chart-bar(height='40', width='80')
// /.col
.col-6.col-sm-4.col-xl-2
.card
.card-body.text-center
.text-body-secondary.small.text-uppercase.fw-semibold Title
.fs-6.fw-semibold.py-3 1,123
.c-chart-wrapper.mx-auto(style='height:40px;width:80px')
canvas#sparkline-chart-4.chart.chart-line(height='40', width='100')
// /.col
.col-6.col-sm-4.col-xl-2
.card
.card-body.text-center
.text-body-secondary.small.text-uppercase.fw-semibold Title
.fs-6.fw-semibold.py-3 1,123
.c-chart-wrapper.mx-auto(style='height:40px;width:80px')
canvas#sparkline-chart-5.chart.chart-line(height='40', width='100')
// /.col
.col-6.col-sm-4.col-xl-2
.card
.card-body.text-center
.text-body-secondary.small.text-uppercase.fw-semibold Title
.fs-6.fw-semibold.py-3 1,123
.c-chart-wrapper.mx-auto(style='height:40px;width:80px')
canvas#sparkline-chart-6.chart.chart-line(height='40', width='100')
// /.col
// /.row.g-4
+example()
.row.g-4
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card
.card-body.p-3.d-flex.align-items-center
div.bg-primary.text-white.p-3.me-3
svg.icon.icon-xl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-settings")
|
div
.fs-6.fw-semibold.text-primary $1.999,50
.text-body-secondary.text-uppercase.fw-semibold.small Widget title
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card
.card-body.p-3.d-flex.align-items-center
div.bg-info.text-white.p-3.me-3
svg.icon.icon-xl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-laptop")
|
div
.fs-6.fw-semibold.text-info $1.999,50
.text-body-secondary.text-uppercase.fw-semibold.small Widget title
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card
.card-body.p-3.d-flex.align-items-center
div.bg-warning.text-white.p-3.me-3
svg.icon.icon-xl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-moon")
|
div
.fs-6.fw-semibold.text-warning $1.999,50
.text-body-secondary.text-uppercase.fw-semibold.small Widget title
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card
.card-body.p-3.d-flex.align-items-center
div.bg-danger.text-white.p-3.me-3
svg.icon.icon-xl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell")
|
div
.fs-6.fw-semibold.text-danger $1.999,50
.text-body-secondary.text-uppercase.fw-semibold.small Widget title
// /.col
+example()
.row.g-4
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card
.card-body.p-3.d-flex.align-items-center
div.bg-primary.text-white.p-3.me-3
svg.icon.icon-xl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-settings")
|
div
.fs-6.fw-semibold.text-primary $1.999,50
.text-body-secondary.text-uppercase.fw-semibold.small Widget title
.card-footer.px-3.py-2
a.btn-block.text-body-secondary.d-flex.justify-content-between.align-items-center(href='#')
span.small.fw-semibold View More
svg.icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chevron-right")
|
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card
.card-body.p-3.d-flex.align-items-center
div.bg-info.text-white.p-3.me-3
svg.icon.icon-xl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-laptop")
|
div
.fs-6.fw-semibold.text-info $1.999,50
.text-body-secondary.text-uppercase.fw-semibold.small Widget title
.card-footer.px-3.py-2
a.btn-block.text-body-secondary.d-flex.justify-content-between.align-items-center(href='#')
span.small.fw-semibold View More
svg.icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chevron-right")
|
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card
.card-body.p-3.d-flex.align-items-center
div.bg-warning.text-white.p-3.me-3
svg.icon.icon-xl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-moon")
|
div
.fs-6.fw-semibold.text-warning $1.999,50
.text-body-secondary.text-uppercase.fw-semibold.small Widget title
.card-footer.px-3.py-2
a.btn-block.text-body-secondary.d-flex.justify-content-between.align-items-center(href='#')
span.small.fw-semibold View More
svg.icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chevron-right")
|
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card
.card-body.p-3.d-flex.align-items-center
div.bg-danger.text-white.p-3.me-3
svg.icon.icon-xl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell")
|
div
.fs-6.fw-semibold.text-danger $1.999,50
.text-body-secondary.text-uppercase.fw-semibold.small Widget title
.card-footer.px-3.py-2
a.btn-block.text-body-secondary.d-flex.justify-content-between.align-items-center(href='#')
span.small.fw-semibold View More
svg.icon
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chevron-right")
|
// /.col
// /.row.g-4
+example()
.row.g-4
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card.overflow-hidden
.card-body.p-0.d-flex.align-items-center
div.bg-primary.text-white.p-4.me-3
svg.icon.icon-xl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-settings")
|
div
.fs-6.fw-semibold.text-primary $1.999,50
.text-body-secondary.text-uppercase.fw-semibold.small Widget title
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card.overflow-hidden
.card-body.p-0.d-flex.align-items-center
div.bg-info.text-white.p-4.me-3
svg.icon.icon-xl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-laptop")
|
div
.fs-6.fw-semibold.text-info $1.999,50
.text-body-secondary.text-uppercase.fw-semibold.small Widget title
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card.overflow-hidden
.card-body.p-0.d-flex.align-items-center
div.bg-warning.text-white.p-4.me-3
svg.icon.icon-xl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-moon")
|
div
.fs-6.fw-semibold.text-warning $1.999,50
.text-body-secondary.text-uppercase.fw-semibold.small Widget title
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card.overflow-hidden
.card-body.p-0.d-flex.align-items-center
div.bg-danger.text-white.p-4.me-3
svg.icon.icon-xl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell")
|
div
.fs-6.fw-semibold.text-danger $1.999,50
.text-body-secondary.text-uppercase.fw-semibold.small Widget title
// /.col
+example()
.row.g-4
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card.overflow-hidden
.card-body.p-0.d-flex.align-items-center
div.bg-primary.text-white.py-4.px-5.me-3
svg.icon.icon-xl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-settings")
|
div
.fs-6.fw-semibold.text-primary $1.999,50
.text-body-secondary.text-uppercase.fw-semibold.small Widget title
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card.overflow-hidden
.card-body.p-0.d-flex.align-items-center
div.bg-info.text-white.py-4.px-5.me-3
svg.icon.icon-xl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-laptop")
|
div
.fs-6.fw-semibold.text-info $1.999,50
.text-body-secondary.text-uppercase.fw-semibold.small Widget title
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card.overflow-hidden
.card-body.p-0.d-flex.align-items-center
div.bg-warning.text-white.py-4.px-5.me-3
svg.icon.icon-xl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-moon")
|
div
.fs-6.fw-semibold.text-warning $1.999,50
.text-body-secondary.text-uppercase.fw-semibold.small Widget title
// /.col
.col-12.col-sm-6.col-xl-4.col-xxl-3
.card.overflow-hidden
.card-body.p-0.d-flex.align-items-center
div.bg-danger.text-white.py-4.px-5.me-3
svg.icon.icon-xl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-bell")
|
div
.fs-6.fw-semibold.text-danger $1.999,50
.text-body-secondary.text-uppercase.fw-semibold.small Widget title
// /.col
// /.row.g-4
+example()
.row.g-4
.col-12.col-sm-6.col-xl-4
.card(style='--cui-card-cap-bg: #3b5998')
.card-header.position-relative.d-flex.justify-content-center.align-items-center
svg.icon.icon-3xl.text-white.my-4
use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-facebook-f")
|
.chart-wrapper.position-absolute.top-0.start-0.w-100.h-100
canvas#social-box-chart-1(height='90')
.card-body.row.text-center
.col
.fs-5.fw-semibold 89k
.text-uppercase.text-body-secondary.small friends
.vr
.col
.fs-5.fw-semibold 459
.text-uppercase.text-body-secondary.small feeds
// /.col
.col-12.col-sm-6.col-xl-4
.card(style='--cui-card-cap-bg: #00aced')
.card-header.position-relative.d-flex.justify-content-center.align-items-center
svg.icon.icon-3xl.text-white.my-4
use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-twitter")
|
.chart-wrapper.position-absolute.top-0.start-0.w-100.h-100
canvas#social-box-chart-2(height='90')
.card-body.row.text-center
.col
.fs-5.fw-semibold 973k
.text-uppercase.text-body-secondary.small followers
.vr
.col
.fs-5.fw-semibold 1.792
.text-uppercase.text-body-secondary.small tweets
// /.col
.col-12.col-sm-6.col-xl-4
.card(style='--cui-card-cap-bg: #4875b4')
.card-header.position-relative.d-flex.justify-content-center.align-items-center
svg.icon.icon-3xl.text-white.my-4
use(xlink:href="node_modules/@coreui/icons/sprites/brand.svg#cib-linkedin")
|
.chart-wrapper.position-absolute.top-0.start-0.w-100.h-100
canvas#social-box-chart-3(height='90')
.card-body.row.text-center
.col
.fs-5.fw-semibold 500+
.text-uppercase.text-body-secondary.small contacts
.vr
.col
.fs-5.fw-semibold 292
.text-uppercase.text-body-secondary.small feeds
// /.col
// /.row.g-4
+example()
.card-group
.card
.card-body
.text-body-secondary.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-people")
|
.fs-4.fw-semibold 87.500
.small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Visitors
.progress.progress-thin.mt-3.mb-0
.progress-bar.bg-info(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
.card
.card-body
.text-body-secondary.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-user-follow")
|
.fs-4.fw-semibold 385
.small.text-body-secondary.text-uppercase.fw-semibold.text-truncate New Clients
.progress.progress-thin.mt-3.mb-0
.progress-bar.bg-success(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
.card
.card-body
.text-body-secondary.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-basket")
|
.fs-4.fw-semibold 1238
.small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Products sold
.progress.progress-thin.mt-3.mb-0
.progress-bar.bg-warning(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
.card
.card-body
.text-body-secondary.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chart-pie")
|
.fs-4.fw-semibold 28%
.small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Returning Visitors
.progress.progress-thin.mt-3.mb-0
.progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
.card
.card-body
.text-body-secondary.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-speedometer")
|
.fs-4.fw-semibold 5:34:11
.small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Avg. Time
.progress.progress-thin.mt-3.mb-0
.progress-bar.bg-danger(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
+example()
.row.g-4
.col-6.col-lg-4.col-xl-3.col-xxl-2
.card
.card-body
.text-body-secondary.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-people")
|
.fs-4.fw-semibold 87.500
.small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Visitors
.progress.progress-thin.mt-3.mb-0
.progress-bar.bg-info(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
// /.col
.col-6.col-lg-4.col-xl-3.col-xxl-2
.card
.card-body
.text-body-secondary.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-user-follow")
|
.fs-4.fw-semibold 385
.small.text-body-secondary.text-uppercase.fw-semibold.text-truncate New Clients
.progress.progress-thin.mt-3.mb-0
.progress-bar.bg-success(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
// /.col
.col-6.col-lg-4.col-xl-3.col-xxl-2
.card
.card-body
.text-body-secondary.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-basket")
|
.fs-4.fw-semibold 1238
.small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Products sold
.progress.progress-thin.mt-3.mb-0
.progress-bar.bg-warning(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
// /.col
.col-6.col-lg-4.col-xl-3.col-xxl-2
.card
.card-body
.text-body-secondary.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chart-pie")
|
.fs-4.fw-semibold 28%
.small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Returning Visitors
.progress.progress-thin.mt-3.mb-0
.progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
// /.col
.col-6.col-lg-4.col-xl-3.col-xxl-2
.card
.card-body
.text-body-secondary.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-speedometer")
|
.fs-4.fw-semibold 5:34:11
.small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Avg. Time
.progress.progress-thin.mt-3.mb-0
.progress-bar.bg-danger(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
// /.col
.col-6.col-lg-4.col-xl-3.col-xxl-2
.card
.card-body
.text-body-secondary.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-speech")
|
.fs-4.fw-semibold 972
.small.text-body-secondary.text-uppercase.fw-semibold.text-truncate Comments
.progress.progress-thin.mt-3.mb-0
.progress-bar.bg-info(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
// /.col
// /.row.g-4
+example()
.row.g-4
.col-6.col-lg-4.col-xl-3.col-xxl-2
.card.text-white.bg-info
.card-body
.text-white.text-opacity-75.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-people")
|
.fs-4.fw-semibold 87.500
.small.text-white.text-opacity-75.text-uppercase.fw-semibold.text-truncate Visitors
.progress.progress-white.progress-thin.mt-3
.progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
// /.col
.col-6.col-lg-4.col-xl-3.col-xxl-2
.card.text-white.bg-success
.card-body
.text-white.text-opacity-75.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-user-follow")
|
.fs-4.fw-semibold 385
.small.text-white.text-opacity-75.text-uppercase.fw-semibold.text-truncate New Clients
.progress.progress-white.progress-thin.mt-3
.progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
// /.col
.col-6.col-lg-4.col-xl-3.col-xxl-2
.card.text-white.bg-warning
.card-body
.text-white.text-opacity-75.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-basket")
|
.fs-4.fw-semibold 1238
.small.text-white.text-opacity-75.text-uppercase.fw-semibold.text-truncate Products sold
.progress.progress-white.progress-thin.mt-3
.progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
// /.col
.col-6.col-lg-4.col-xl-3.col-xxl-2
.card.text-white.bg-primary
.card-body
.text-white.text-opacity-75.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-chart-pie")
|
.fs-4.fw-semibold 28%
.small.text-white.text-opacity-75.text-uppercase.fw-semibold.text-truncate Returning Visitors
.progress.progress-white.progress-thin.mt-3
.progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
// /.col
.col-6.col-lg-4.col-xl-3.col-xxl-2
.card.text-white.bg-danger
.card-body
.text-white.text-opacity-75.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-speedometer")
|
.fs-4.fw-semibold 5:34:11
.small.text-white.text-opacity-75.text-uppercase.fw-semibold.text-truncate Avg. Time
.progress.progress-white.progress-thin.mt-3
.progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
// /.col
.col-6.col-lg-4.col-xl-3.col-xxl-2
.card.text-white.bg-info
.card-body
.text-white.text-opacity-75.text-end
svg.icon.icon-xxl
use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-speech")
|
.fs-4.fw-semibold 972
.small.text-white.text-opacity-75.text-uppercase.fw-semibold.text-truncate Comments
.progress.progress-white.progress-thin.mt-3
.progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
// /.col
// /.row.g-4
