From a1e6cf1b3d91051616d58c80fadccddb0d2ea860 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 15 Nov 2023 20:03:23 +0100
Subject: [PATCH] refactor: improve responsive behavior

---
 src/views/dashboard/Dashboard.vue       |  154 +--
 src/views/widgets/Widgets.vue           | 1174 ++++++++++-------------
 src/views/widgets/WidgetsStatsTypeA.vue |   18 +-
 src/views/widgets/WidgetsStatsTypeD.vue |   70 +-
 4 files changed, 579 insertions(+), 837 deletions(-)

diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index 46c59b30..03b56757 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <WidgetsStatsA />
+    <WidgetsStatsA class="mb-4" />
     <CRow>
       <CCol :md="12">
         <CCard class="mb-4">
@@ -20,68 +20,46 @@
                   aria-label="Basic outlined example"
                 >
                   <CButton color="secondary" variant="outline">Day</CButton>
-                  <CButton color="secondary" variant="outline" active
-                    >Month</CButton
-                  >
+                  <CButton color="secondary" variant="outline" active>Month</CButton>
                   <CButton color="secondary" variant="outline">Year</CButton>
                 </CButtonGroup>
               </CCol>
             </CRow>
             <CRow>
-              <MainChart
-                style="height: 300px; max-height: 300px; margin-top: 40px"
-              />
+              <MainChart style="height: 300px; max-height: 300px; margin-top: 40px" />
             </CRow>
           </CCardBody>
           <CCardFooter>
-            <CRow :xs="{ cols: 1 }" :md="{ cols: 5 }" class="text-center">
-              <CCol class="mb-sm-2 mb-0">
+            <CRow
+              :xs="{ cols: 1, gutter: 4 }"
+              :sm="{ cols: 2 }"
+              :lg="{ cols: 4 }"
+              :xl="{ cols: 5 }"
+              class="mb-2 text-center"
+            >
+              <CCol>
                 <div class="text-body-secondary">Visits</div>
-                <div class="fw-semibold">29.703 Users (40%)</div>
-                <CProgress
-                  class="mt-2"
-                  color="success"
-                  thin
-                  :precision="1"
-                  :value="40"
-                />
+                <div class="fw-semibold text-truncate">29.703 Users (40%)</div>
+                <CProgress class="mt-2" color="success" thin :precision="1" :value="40" />
               </CCol>
-              <CCol class="mb-sm-2 mb-0 d-md-down-none">
+              <CCol>
                 <div class="text-body-secondary">Unique</div>
-                <div class="fw-semibold">24.093 Users (20%)</div>
-                <CProgress
-                  class="mt-2"
-                  color="info"
-                  thin
-                  :precision="1"
-                  :value="20"
-                />
+                <div class="fw-semibold text-truncate">24.093 Users (20%)</div>
+                <CProgress class="mt-2" color="info" thin :precision="1" :value="20" />
               </CCol>
-              <CCol class="mb-sm-2 mb-0">
+              <CCol>
                 <div class="text-body-secondary">Pageviews</div>
-                <div class="fw-semibold">78.706 Views (60%)</div>
-                <CProgress
-                  class="mt-2"
-                  color="warning"
-                  thin
-                  :precision="1"
-                  :value="60"
-                />
+                <div class="fw-semibold text-truncate">78.706 Views (60%)</div>
+                <CProgress class="mt-2" color="warning" thin :precision="1" :value="60" />
               </CCol>
-              <CCol class="mb-sm-2 mb-0">
+              <CCol>
                 <div class="text-body-secondary">New Users</div>
-                <div class="fw-semibold">22.123 Users (80%)</div>
-                <CProgress
-                  class="mt-2"
-                  color="danger"
-                  thin
-                  :precision="1"
-                  :value="80"
-                />
+                <div class="fw-semibold text-truncate">22.123 Users (80%)</div>
+                <CProgress class="mt-2" color="danger" thin :precision="1" :value="80" />
               </CCol>
-              <CCol class="mb-sm-2 mb-0 d-md-down-none">
+              <CCol class="d-none d-xl-block">
                 <div class="text-body-secondary">Bounce Rate</div>
-                <div class="fw-semibold">Average Rate (40.15%)</div>
+                <div class="fw-semibold text-truncate">Average Rate (40.15%)</div>
                 <CProgress class="mt-2" :value="40" thin :precision="1" />
               </CCol>
             </CRow>
@@ -89,7 +67,7 @@
         </CCard>
       </CCol>
     </CRow>
-    <WidgetsStatsD />
+    <WidgetsStatsD class="mb-4" />
     <CRow>
       <CCol :md="12">
         <CCard class="mb-4">
@@ -98,21 +76,15 @@
             <CRow>
               <CCol :sm="12" :lg="6">
                 <CRow>
-                  <CCol :sm="6">
-                    <div
-                      class="border-start border-start-4 border-start-info py-1 px-3 mb-3"
-                    >
+                  <CCol :xs="6">
+                    <div class="border-start border-start-4 border-start-info py-1 px-3 mb-3">
                       <div class="text-body-secondary small">New Clients</div>
                       <div class="fs-5 fw-semibold">9,123</div>
                     </div>
                   </CCol>
-                  <CCol :sm="6">
-                    <div
-                      class="border-start border-start-4 border-start-danger py-1 px-3 mb-3"
-                    >
-                      <div class="text-body-secondary small">
-                        Recurring Clients
-                      </div>
+                  <CCol :xs="6">
+                    <div class="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
+                      <div class="text-body-secondary small">Recurring Clients</div>
                       <div class="fs-5 fw-semibold">22,643</div>
                     </div>
                   </CCol>
@@ -124,9 +96,7 @@
                   class="progress-group mb-4"
                 >
                   <div class="progress-group-prepend">
-                    <span class="text-body-secondary small">{{
-                      item.title
-                    }}</span>
+                    <span class="text-body-secondary small">{{ item.title }}</span>
                   </div>
                   <div class="progress-group-bars">
                     <CProgress thin color="info" :value="item.value1" />
@@ -136,29 +106,21 @@
               </CCol>
               <CCol :sm="12" :lg="6">
                 <CRow>
-                  <CCol :sm="6">
-                    <div
-                      class="border-start border-start-4 border-start-warning py-1 px-3 mb-3"
-                    >
+                  <CCol :xs="6">
+                    <div class="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
                       <div class="text-body-secondary small">Pageviews</div>
                       <div class="fs-5 fw-semibold">78,623</div>
                     </div>
                   </CCol>
-                  <CCol :sm="6">
-                    <div
-                      class="border-start border-start-4 border-start-success py-1 px-3 mb-3"
-                    >
+                  <CCol :xs="6">
+                    <div class="border-start border-start-4 border-start-success py-1 px-3 mb-3">
                       <div class="text-body-secondary small">Organic</div>
                       <div class="fs-5 fw-semibold">49,123</div>
                     </div>
                   </CCol>
                 </CRow>
                 <hr class="mt-0" />
-                <div
-                  v-for="item in progressGroupExample2"
-                  :key="item.title"
-                  class="progress-group"
-                >
+                <div v-for="item in progressGroupExample2" :key="item.title" class="progress-group">
                   <div class="progress-group-header">
                     <CIcon :icon="item.icon" class="me-2" size="lg" />
                     <span class="title">{{ item.title }}</span>
@@ -171,19 +133,13 @@
 
                 <div class="mb-5"></div>
 
-                <div
-                  v-for="item in progressGroupExample3"
-                  :key="item.title"
-                  class="progress-group"
-                >
+                <div v-for="item in progressGroupExample3" :key="item.title" class="progress-group">
                   <div class="progress-group-header">
                     <CIcon :icon="item.icon" class="me-2" size="lg" />
                     <span class="title">{{ item.title }}</span>
                     <span class="ms-auto fw-semibold">
                       {{ item.value }}
-                      <span class="text-body-secondary small"
-                        >({{ item.percent }}%)</span
-                      >
+                      <span class="text-body-secondary small">({{ item.percent }}%)</span>
                     </span>
                   </div>
                   <div class="progress-group-bars">
@@ -194,36 +150,26 @@
             </CRow>
             <br />
             <CTable align="middle" class="mb-0 border" hover responsive>
-              <CTableHead>
+              <CTableHead class="text-nowrap">
                 <CTableRow>
                   <CTableHeaderCell class="bg-body-secondary text-center">
                     <CIcon name="cil-people" />
                   </CTableHeaderCell>
-                  <CTableHeaderCell class="bg-body-secondary">
-                    User
-                  </CTableHeaderCell>
+                  <CTableHeaderCell class="bg-body-secondary"> User </CTableHeaderCell>
                   <CTableHeaderCell class="bg-body-secondary text-center">
                     Country
                   </CTableHeaderCell>
-                  <CTableHeaderCell class="bg-body-secondary">
-                    Usage
-                  </CTableHeaderCell>
+                  <CTableHeaderCell class="bg-body-secondary"> Usage </CTableHeaderCell>
                   <CTableHeaderCell class="bg-body-secondary text-center">
                     Payment Method
                   </CTableHeaderCell>
-                  <CTableHeaderCell class="bg-body-secondary">
-                    Activity
-                  </CTableHeaderCell>
+                  <CTableHeaderCell class="bg-body-secondary"> Activity </CTableHeaderCell>
                 </CTableRow>
               </CTableHead>
               <CTableBody>
                 <CTableRow v-for="item in tableExample" :key="item.name">
                   <CTableDataCell class="text-center">
-                    <CAvatar
-                      size="md"
-                      :src="item.avatar.src"
-                      :status="item.avatar.status"
-                    />
+                    <CAvatar size="md" :src="item.avatar.src" :status="item.avatar.status" />
                   </CTableDataCell>
                   <CTableDataCell>
                     <div>{{ item.user.name }}</div>
@@ -233,24 +179,16 @@
                     </div>
                   </CTableDataCell>
                   <CTableDataCell class="text-center">
-                    <CIcon
-                      size="xl"
-                      :name="item.country.flag"
-                      :title="item.country.name"
-                    />
+                    <CIcon size="xl" :name="item.country.flag" :title="item.country.name" />
                   </CTableDataCell>
                   <CTableDataCell>
                     <div class="d-flex justify-content-between align-items-baseline">
                       <div class="fw-semibold">{{ item.usage.value }}%</div>
-                      <div class="ms-1 text-nowrap small text-body-secondary">
+                      <div class="text-nowrap text-body-secondary small ms-3">
                         {{ item.usage.period }}
                       </div>
                     </div>
-                    <CProgress
-                      thin
-                      :color="item.usage.color"
-                      :value="item.usage.value"
-                    />
+                    <CProgress thin :color="item.usage.color" :value="item.usage.value" />
                   </CTableDataCell>
                   <CTableDataCell class="text-center">
                     <CIcon size="xl" :name="item.payment.icon" />
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index 0ca0dee6..b8d40c4e 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -1,654 +1,518 @@
 <template>
-  <CRow>
-    <CCol>
-      <CCard class="mb-4">
-        <CCardHeader>
-          <strong>Vue Widgets</strong>
-        </CCardHeader>
-        <CCardBody>
-          <DocsExample href="">
-            <WidgetsStatsA />
-          </DocsExample>
-          <DocsExample href="">
-            <CRow>
-              <CCol :xs="12" :sm="6" :lg="3">
-                <CWidgetStatsB
-                  class="mb-3"
-                  :progress="{ color: 'success', value: 75 }"
+  <CCard class="mb-4">
+    <CCardHeader>
+      <strong>Vue Widgets</strong>
+    </CCardHeader>
+    <CCardBody>
+      <DocsExample href="components/widgets.html#widgetstatsa">
+        <WidgetsStatsA />
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsb">
+        <CRow :xs="{ gutter: 4 }">
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsB :progress="{ color: 'success', value: 75 }">
+              <template #text>Widget helper text</template>
+              <template #title>Widget title</template>
+              <template #value>89.9%</template>
+            </CWidgetStatsB>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsB
+              :progress="{ color: 'info', value: 75 }"
+              text="Widget helper text"
+              title="Widget title"
+              value="12.124"
+            />
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsB
+              :progress="{ color: 'warning', value: 75 }"
+              text="Widget helper text"
+              title="Widget title"
+              value="$98.111,00"
+            />
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsB
+              :progress="{ color: 'primary', value: 75 }"
+              text="Widget helper text"
+              title="Widget title"
+              value="2TB"
+            />
+          </CCol>
+        </CRow>
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsb">
+        <CRow :xs="{ gutter: 4 }">
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsB color="success" inverse :progress="{ value: 75 }">
+              <template #text>Widget helper text</template>
+              <template #title>Widget title</template>
+              <template #value>89.9%</template>
+            </CWidgetStatsB>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsB
+              color="info"
+              inverse
+              :progress="{ value: 75 }"
+              text="Widget helper text"
+              title="Widget title"
+              value="12.124"
+            />
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsB
+              color="warning"
+              inverse
+              :progress="{ value: 75 }"
+              text="Widget helper text"
+              title="Widget title"
+              value="$98.111,00"
+            />
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsB
+              color="primary"
+              inverse
+              :progress="{ value: 75 }"
+              text="Widget helper text"
+              title="Widget title"
+              value="2TB"
+            />
+          </CCol>
+        </CRow>
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatse">
+        <CRow :xs="{ gutter: 4 }">
+          <CCol :sm="4" :md="3" :xl="2">
+            <CWidgetStatsE title="title" value="1,123">
+              <CChart
+                class="mx-auto"
+                type="bar"
+                style="height: 40px; width: 80px"
+                :data="{
+                  labels: widgetStatsE.labels,
+                  datasets: [
+                    {
+                      backgroundColor: getStyle('--cui-danger'),
+                      borderColor: 'transparent',
+                      borderWidth: 1,
+                      data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
+                    },
+                  ],
+                }"
+                :options="widgetStatsE.optionsBar"
+              />
+            </CWidgetStatsE>
+          </CCol>
+          <CCol :sm="4" :md="3" :xl="2">
+            <CWidgetStatsE title="title" value="1,123">
+              <CChart
+                class="mx-auto"
+                type="bar"
+                style="height: 40px; width: 80px"
+                :data="{
+                  labels: widgetStatsE.labels,
+                  datasets: [
+                    {
+                      backgroundColor: getStyle('--cui-primary'),
+                      borderColor: 'transparent',
+                      borderWidth: 1,
+                      data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
+                    },
+                  ],
+                }"
+                :options="widgetStatsE.optionsBar"
+              />
+            </CWidgetStatsE>
+          </CCol>
+          <CCol :sm="4" :md="3" :xl="2">
+            <CWidgetStatsE title="title" value="1,123">
+              <CChart
+                class="mx-auto"
+                type="bar"
+                style="height: 40px; width: 80px"
+                :data="{
+                  labels: widgetStatsE.labels,
+                  datasets: [
+                    {
+                      backgroundColor: getStyle('--cui-warning'),
+                      borderColor: 'transparent',
+                      borderWidth: 1,
+                      data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
+                    },
+                  ],
+                }"
+                :options="widgetStatsE.optionsBar"
+              />
+            </CWidgetStatsE>
+          </CCol>
+          <CCol :sm="4" :md="3" :xl="2">
+            <CWidgetStatsE title="title" value="1,123">
+              <CChart
+                class="mx-auto"
+                type="line"
+                style="height: 40px; width: 80px"
+                :data="{
+                  labels: widgetStatsE.labels,
+                  datasets: [
+                    {
+                      backgroundColor: 'transparent',
+                      borderColor: getStyle('--cui-success'),
+                      borderWidth: 2,
+                      data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
+                    },
+                  ],
+                }"
+                :options="widgetStatsE.optionsLine"
+              />
+            </CWidgetStatsE>
+          </CCol>
+          <CCol :sm="4" :md="3" :xl="2">
+            <CWidgetStatsE title="title" value="1,123">
+              <CChart
+                class="mx-auto"
+                type="line"
+                style="height: 40px; width: 80px"
+                :data="{
+                  labels: widgetStatsE.labels,
+                  datasets: [
+                    {
+                      backgroundColor: 'transparent',
+                      borderColor: getStyle('--cui-warning'),
+                      borderWidth: 2,
+                      data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
+                    },
+                  ],
+                }"
+                :options="widgetStatsE.optionsLine"
+              />
+            </CWidgetStatsE>
+          </CCol>
+          <CCol :sm="4" :md="3" :xl="2">
+            <CWidgetStatsE title="title" value="1,123">
+              <CChart
+                class="mx-auto"
+                type="line"
+                style="height: 40px; width: 80px"
+                :data="{
+                  labels: widgetStatsE.labels,
+                  datasets: [
+                    {
+                      backgroundColor: 'transparent',
+                      borderColor: getStyle('--cui-info'),
+                      borderWidth: 2,
+                      data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
+                    },
+                  ],
+                }"
+                :options="widgetStatsE.optionsLine"
+              />
+            </CWidgetStatsE>
+          </CCol>
+        </CRow>
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsf">
+        <CRow :xs="{ gutter: 4 }">
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-settings" size="xl" />
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="info" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-user" size="xl" />
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-moon" size="xl" />
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="danger" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-bell" size="xl" />
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+        </CRow>
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsf">
+        <CRow :xs="{ gutter: 4 }">
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-settings" size="xl" />
+              </template>
+              <template #footer>
+                <CLink
+                  class="fw-semibold font-xs text-body-secondary"
+                  href="https://coreui.io/"
+                  rel="noopener norefferer"
+                  target="_blank"
                 >
-                  <template #text>Widget helper text</template>
-                  <template #title>Widget title</template>
-                  <template #value>89.9%</template>
-                </CWidgetStatsB>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3">
-                <CWidgetStatsB
-                  class="mb-3"
-                  :progress="{ color: 'info', value: 75 }"
-                  text="Widget helper text"
-                  title="Widget title"
-                  value="12.124"
-                />
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3">
-                <CWidgetStatsB
-                  class="mb-3"
-                  :progress="{ color: 'warning', value: 75 }"
-                  text="Widget helper text"
-                  title="Widget title"
-                  value="$98.111,00"
-                />
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3">
-                <CWidgetStatsB
-                  class="mb-3"
-                  :progress="{ color: 'primary', value: 75 }"
-                  text="Widget helper text"
-                  title="Widget title"
-                  value="2TB"
-                />
-              </CCol>
-            </CRow>
-          </DocsExample>
-          <DocsExample href="">
-            <CRow>
-              <CCol :xs="12" :sm="6" :lg="3">
-                <CWidgetStatsB
-                  class="mb-3"
-                  color="success"
-                  inverse
-                  :progress="{ value: 75 }"
+                  View more
+                  <CIcon icon="cil-arrow-right" class="ms-auto" width="16" />
+                </CLink>
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="info" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-user" size="xl" />
+              </template>
+              <template #footer>
+                <CLink
+                  class="fw-semibold font-xs text-body-secondary"
+                  href="https://coreui.io/"
+                  rel="noopener norefferer"
+                  target="_blank"
                 >
-                  <template #text>Widget helper text</template>
-                  <template #title>Widget title</template>
-                  <template #value>89.9%</template>
-                </CWidgetStatsB>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3">
-                <CWidgetStatsB
-                  class="mb-3"
-                  color="info"
-                  inverse
-                  :progress="{ value: 75 }"
-                  text="Widget helper text"
-                  title="Widget title"
-                  value="12.124"
-                />
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3">
-                <CWidgetStatsB
-                  class="mb-3"
-                  color="warning"
-                  inverse
-                  :progress="{ value: 75 }"
-                  text="Widget helper text"
-                  title="Widget title"
-                  value="$98.111,00"
-                />
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3">
-                <CWidgetStatsB
-                  class="mb-3"
-                  color="primary"
-                  inverse
-                  :progress="{ value: 75 }"
-                  text="Widget helper text"
-                  title="Widget title"
-                  value="2TB"
-                />
-              </CCol>
-            </CRow>
-          </DocsExample>
-
-          <DocsExample href="">
-            <CRow>
-              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
-                <CWidgetStatsE title="title" value="1,123">
-                  <CChart
-                    class="mx-auto"
-                    type="bar"
-                    style="height: 40px; width: 80px"
-                    :data="{
-                      labels: widgetStatsE.labels,
-                      datasets: [
-                        {
-                          backgroundColor: getStyle('--cui-danger'),
-                          borderColor: 'transparent',
-                          borderWidth: 1,
-                          data: [
-                            41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
-                            45, 47,
-                          ],
-                        },
-                      ],
-                    }"
-                    :options="widgetStatsE.optionsBar"
-                  />
-                </CWidgetStatsE>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
-                <CWidgetStatsE title="title" value="1,123">
-                  <CChart
-                    class="mx-auto"
-                    type="bar"
-                    style="height: 40px; width: 80px"
-                    :data="{
-                      labels: widgetStatsE.labels,
-                      datasets: [
-                        {
-                          backgroundColor: getStyle('--cui-primary'),
-                          borderColor: 'transparent',
-                          borderWidth: 1,
-                          data: [
-                            41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
-                            45, 47,
-                          ],
-                        },
-                      ],
-                    }"
-                    :options="widgetStatsE.optionsBar"
-                  />
-                </CWidgetStatsE>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
-                <CWidgetStatsE title="title" value="1,123">
-                  <CChart
-                    class="mx-auto"
-                    type="bar"
-                    style="height: 40px; width: 80px"
-                    :data="{
-                      labels: widgetStatsE.labels,
-                      datasets: [
-                        {
-                          backgroundColor: getStyle('--cui-warning'),
-                          borderColor: 'transparent',
-                          borderWidth: 1,
-                          data: [
-                            41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
-                            45, 47,
-                          ],
-                        },
-                      ],
-                    }"
-                    :options="widgetStatsE.optionsBar"
-                  />
-                </CWidgetStatsE>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
-                <CWidgetStatsE title="title" value="1,123">
-                  <CChart
-                    class="mx-auto"
-                    type="line"
-                    style="height: 40px; width: 80px"
-                    :data="{
-                      labels: widgetStatsE.labels,
-                      datasets: [
-                        {
-                          backgroundColor: 'transparent',
-                          borderColor: getStyle('--cui-success'),
-                          borderWidth: 2,
-                          data: [
-                            41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
-                            45, 47,
-                          ],
-                        },
-                      ],
-                    }"
-                    :options="widgetStatsE.optionsLine"
-                  />
-                </CWidgetStatsE>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
-                <CWidgetStatsE title="title" value="1,123">
-                  <CChart
-                    class="mx-auto"
-                    type="line"
-                    style="height: 40px; width: 80px"
-                    :data="{
-                      labels: widgetStatsE.labels,
-                      datasets: [
-                        {
-                          backgroundColor: 'transparent',
-                          borderColor: getStyle('--cui-warning'),
-                          borderWidth: 2,
-                          data: [
-                            41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
-                            45, 47,
-                          ],
-                        },
-                      ],
-                    }"
-                    :options="widgetStatsE.optionsLine"
-                  />
-                </CWidgetStatsE>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2" class="mb-3 mb-lg-0">
-                <CWidgetStatsE title="title" value="1,123">
-                  <CChart
-                    class="mx-auto"
-                    type="line"
-                    style="height: 40px; width: 80px"
-                    :data="{
-                      labels: widgetStatsE.labels,
-                      datasets: [
-                        {
-                          backgroundColor: 'transparent',
-                          borderColor: getStyle('--cui-info'),
-                          borderWidth: 2,
-                          data: [
-                            41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67,
-                            45, 47,
-                          ],
-                        },
-                      ],
-                    }"
-                    :options="widgetStatsE.optionsLine"
-                  />
-                </CWidgetStatsE>
-              </CCol>
-            </CRow>
-          </DocsExample>
-          <DocsExample href="">
-            <CRow>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
-                  <template #icon>
-                    <CIcon icon="cil-settings" size="xl" />
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF color="info" title="Title" value="$1.999,50">
-                  <template #icon>
-                    <CIcon icon="cil-user" size="xl" />
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
-                  <template #icon>
-                    <CIcon icon="cil-moon" size="xl" />
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF color="danger" title="Title" value="$1.999,50">
-                  <template #icon>
-                    <CIcon icon="cil-bell" size="xl" />
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-            </CRow>
-          </DocsExample>
-          <DocsExample href="">
-            <CRow>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
-                  <template #icon>
-                    <CIcon icon="cil-settings" size="xl" />
-                  </template>
-                  <template #footer>
-                    <CLink
-                      class="fw-semibold font-xs text-body-secondary"
-                      href="https://coreui.io/"
-                      rel="noopener norefferer"
-                      target="_blank"
-                    >
-                      View more
-                      <CIcon
-                        icon="cil-arrow-right"
-                        class="ms-auto"
-                        width="16"
-                      />
-                    </CLink>
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF color="info" title="Title" value="$1.999,50">
-                  <template #icon>
-                    <CIcon icon="cil-user" size="xl" />
-                  </template>
-                  <template #footer>
-                    <CLink
-                      class="fw-semibold font-xs text-body-secondary"
-                      href="https://coreui.io/"
-                      rel="noopener norefferer"
-                      target="_blank"
-                    >
-                      View more
-                      <CIcon
-                        icon="cil-arrow-right"
-                        class="ms-auto"
-                        width="16"
-                      />
-                    </CLink>
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
-                  <template #icon>
-                    <CIcon icon="cil-moon" size="xl" />
-                  </template>
-                  <template #footer>
-                    <CLink
-                      class="fw-semibold font-xs text-body-secondary"
-                      href="https://coreui.io/"
-                      rel="noopener norefferer"
-                      target="_blank"
-                    >
-                      View more
-                      <CIcon
-                        icon="cil-arrow-right"
-                        class="ms-auto"
-                        width="16"
-                      />
-                    </CLink>
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF color="danger" title="Title" value="$1.999,50">
-                  <template #icon>
-                    <CIcon icon="cil-bell" size="xl" />
-                  </template>
-                  <template #footer>
-                    <CLink
-                      class="fw-semibold font-xs text-body-secondary"
-                      href="https://coreui.io/"
-                      rel="noopener norefferer"
-                      target="_blank"
-                    >
-                      View more
-                      <CIcon
-                        icon="cil-arrow-right"
-                        class="ms-auto"
-                        width="16"
-                      />
-                    </CLink>
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-            </CRow>
-          </DocsExample>
-          <DocsExample href="">
-            <CRow>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF
-                  color="primary"
-                  :padding="false"
-                  title="Title"
-                  value="$1.999,50"
+                  View more
+                  <CIcon icon="cil-arrow-right" class="ms-auto" width="16" />
+                </CLink>
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="warning" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-moon" size="xl" />
+              </template>
+              <template #footer>
+                <CLink
+                  class="fw-semibold font-xs text-body-secondary"
+                  href="https://coreui.io/"
+                  rel="noopener norefferer"
+                  target="_blank"
                 >
-                  <template #icon>
-                    <CIcon icon="cil-settings" size="xl" />
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF
-                  color="info"
-                  :padding="false"
-                  title="Title"
-                  value="$1.999,50"
+                  View more
+                  <CIcon icon="cil-arrow-right" class="ms-auto" width="16" />
+                </CLink>
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="danger" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-bell" size="xl" />
+              </template>
+              <template #footer>
+                <CLink
+                  class="fw-semibold font-xs text-body-secondary"
+                  href="https://coreui.io/"
+                  rel="noopener norefferer"
+                  target="_blank"
                 >
-                  <template #icon>
-                    <CIcon icon="cil-user" size="xl" />
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF
-                  color="warning"
-                  :padding="false"
-                  title="Title"
-                  value="$1.999,50"
-                >
-                  <template #icon>
-                    <CIcon icon="cil-moon" size="xl" />
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-              <CCol :xs="12" :sm="6" :lg="3" class="mb-3 mb-lg-0">
-                <CWidgetStatsF
-                  color="danger"
-                  :padding="false"
-                  title="Title"
-                  value="$1.999,50"
-                >
-                  <template #icon>
-                    <CIcon icon="cil-bell" size="xl" />
-                  </template>
-                </CWidgetStatsF>
-              </CCol>
-            </CRow>
-          </DocsExample>
-          <DocsExample href="">
-            <WidgetsStatsD />
-          </DocsExample>
-          <DocsExample href="">
-            <CCardGroup>
-              <CWidgetStatsC
-                class="mb-3"
-                :progress="{ color: 'info', value: 75 }"
-                title="Visitors"
-                value="87.500"
-              >
-                <template #icon
-                  ><CIcon icon="cil-people" height="36"
-                /></template>
-              </CWidgetStatsC>
-              <CWidgetStatsC
-                class="mb-3"
-                :progress="{ color: 'success', value: 75 }"
-                title="New Clients"
-                value="385"
-              >
-                <template #icon
-                  ><CIcon icon="cil-user-follow" height="36"
-                /></template>
-              </CWidgetStatsC>
-              <CWidgetStatsC
-                class="mb-3"
-                :progress="{ color: 'warning', value: 75 }"
-                title="Products sold"
-                value="1238"
-              >
-                <template #icon
-                  ><CIcon icon="cil-basket" height="36"
-                /></template>
-              </CWidgetStatsC>
-              <CWidgetStatsC
-                class="mb-3"
-                :progress="{ color: 'primary', value: 75 }"
-                title="Returning Visitors"
-                value="28%"
-              >
-                <template #icon
-                  ><CIcon icon="cil-chart-pie" height="36"
-                /></template>
-              </CWidgetStatsC>
-              <CWidgetStatsC
-                class="mb-3"
-                :progress="{ color: 'danger', value: 75 }"
-                title="Avg. Time"
-                value="5:34:11"
-              >
-                <template #icon
-                  ><CIcon icon="cil-speedometer" height="36"
-                /></template>
-              </CWidgetStatsC>
-            </CCardGroup>
-          </DocsExample>
-          <DocsExample href="">
-            <CRow>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  :progress="{ color: 'info', value: 75 }"
-                  title="Visitors"
-                  value="87.500"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-people" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  :progress="{ color: 'success', value: 75 }"
-                  title="New Clients"
-                  value="385"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-user-follow" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  :progress="{ color: 'warning', value: 75 }"
-                  title="Products sold"
-                  value="1238"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-basket" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  :progress="{ color: 'primary', value: 75 }"
-                  title="Returning Visitors"
-                  value="28%"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-chart-pie" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  :progress="{ color: 'danger', value: 75 }"
-                  title="Avg. Time"
-                  value="5:34:11"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-speedometer" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  :progress="{ color: 'info', value: 75 }"
-                  title="Comments"
-                  value="972"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-speech" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-            </CRow>
-          </DocsExample>
-          <DocsExample href="">
-            <CRow>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  color="info"
-                  inverse
-                  :progress="{ value: 75 }"
-                  title="Visitors"
-                  value="87.500"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-people" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  color="success"
-                  inverse
-                  :progress="{ value: 75 }"
-                  title="New Clients"
-                  value="385"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-user-follow" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  color="warning"
-                  inverse
-                  :progress="{ value: 75 }"
-                  title="Products sold"
-                  value="1238"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-basket" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  color="primary"
-                  inverse
-                  :progress="{ value: 75 }"
-                  title="Returning Visitors"
-                  value="28%"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-chart-pie" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  color="danger"
-                  inverse
-                  :progress="{ value: 75 }"
-                  title="Avg. Time"
-                  value="5:34:11"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-speedometer" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-              <CCol :sm="4" :md="3" :lg="2">
-                <CWidgetStatsC
-                  class="mb-3"
-                  color="info"
-                  inverse
-                  :progress="{ value: 75 }"
-                  title="Comments"
-                  value="972"
-                >
-                  <template #icon
-                    ><CIcon icon="cil-speech" height="36"
-                  /></template>
-                </CWidgetStatsC>
-              </CCol>
-            </CRow>
-          </DocsExample>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
+                  View more
+                  <CIcon icon="cil-arrow-right" class="ms-auto" width="16" />
+                </CLink>
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+        </CRow>
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsf">
+        <CRow :xs="{ gutter: 4 }">
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="primary" :padding="false" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-settings" size="xl" />
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="info" :padding="false" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-user" size="xl" />
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="warning" :padding="false" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-moon" size="xl" />
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+          <CCol :sm="6" :xl="4" :xxl="3">
+            <CWidgetStatsF color="danger" :padding="false" title="Title" value="$1.999,50">
+              <template #icon>
+                <CIcon icon="cil-bell" size="xl" />
+              </template>
+            </CWidgetStatsF>
+          </CCol>
+        </CRow>
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsd">
+        <WidgetsStatsD />
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsc">
+        <CCardGroup>
+          <CWidgetStatsC :progress="{ color: 'info', value: 75 }" title="Visitors" value="87.500">
+            <template #icon><CIcon icon="cil-people" height="36" /></template>
+          </CWidgetStatsC>
+          <CWidgetStatsC
+            :progress="{ color: 'success', value: 75 }"
+            title="New Clients"
+            value="385"
+          >
+            <template #icon><CIcon icon="cil-user-follow" height="36" /></template>
+          </CWidgetStatsC>
+          <CWidgetStatsC
+            :progress="{ color: 'warning', value: 75 }"
+            title="Products sold"
+            value="1238"
+          >
+            <template #icon><CIcon icon="cil-basket" height="36" /></template>
+          </CWidgetStatsC>
+          <CWidgetStatsC
+            :progress="{ color: 'primary', value: 75 }"
+            title="Returning Visitors"
+            value="28%"
+          >
+            <template #icon><CIcon icon="cil-chart-pie" height="36" /></template>
+          </CWidgetStatsC>
+          <CWidgetStatsC
+            :progress="{ color: 'danger', value: 75 }"
+            title="Avg. Time"
+            value="5:34:11"
+          >
+            <template #icon><CIcon icon="cil-speedometer" height="36" /></template>
+          </CWidgetStatsC>
+        </CCardGroup>
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsc">
+        <CRow :xs="{ gutter: 4 }">
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC :progress="{ color: 'info', value: 75 }" title="Visitors" value="87.500">
+              <template #icon><CIcon icon="cil-people" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              :progress="{ color: 'success', value: 75 }"
+              title="New Clients"
+              value="385"
+            >
+              <template #icon><CIcon icon="cil-user-follow" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              :progress="{ color: 'warning', value: 75 }"
+              title="Products sold"
+              value="1238"
+            >
+              <template #icon><CIcon icon="cil-basket" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              :progress="{ color: 'primary', value: 75 }"
+              title="Returning Visitors"
+              value="28%"
+            >
+              <template #icon><CIcon icon="cil-chart-pie" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              :progress="{ color: 'danger', value: 75 }"
+              title="Avg. Time"
+              value="5:34:11"
+            >
+              <template #icon><CIcon icon="cil-speedometer" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC :progress="{ color: 'info', value: 75 }" title="Comments" value="972">
+              <template #icon><CIcon icon="cil-speech" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+        </CRow>
+      </DocsExample>
+      <DocsExample href="components/widgets.html#widgetstatsc">
+        <CRow :xs="{ gutter: 4 }">
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              color="info"
+              inverse
+              :progress="{ value: 75 }"
+              title="Visitors"
+              value="87.500"
+            >
+              <template #icon><CIcon icon="cil-people" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              color="success"
+              inverse
+              :progress="{ value: 75 }"
+              title="New Clients"
+              value="385"
+            >
+              <template #icon><CIcon icon="cil-user-follow" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              color="warning"
+              inverse
+              :progress="{ value: 75 }"
+              title="Products sold"
+              value="1238"
+            >
+              <template #icon><CIcon icon="cil-basket" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              color="primary"
+              inverse
+              :progress="{ value: 75 }"
+              title="Returning Visitors"
+              value="28%"
+            >
+              <template #icon><CIcon icon="cil-chart-pie" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              color="danger"
+              inverse
+              :progress="{ value: 75 }"
+              title="Avg. Time"
+              value="5:34:11"
+            >
+              <template #icon><CIcon icon="cil-speedometer" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+          <CCol :xs="6" :lg="4" :xxl="2">
+            <CWidgetStatsC
+              color="info"
+              inverse
+              :progress="{ value: 75 }"
+              title="Comments"
+              value="972"
+            >
+              <template #icon><CIcon icon="cil-speech" height="36" /></template>
+            </CWidgetStatsC>
+          </CCol>
+        </CRow>
+      </DocsExample>
+    </CCardBody>
+  </CCard>
 </template>
 
 <script>
@@ -665,23 +529,7 @@ export default {
   },
   setup() {
     const widgetStatsE = {
-      labels: [
-        'M',
-        'T',
-        'W',
-        'T',
-        'F',
-        'S',
-        'S',
-        'M',
-        'T',
-        'W',
-        'T',
-        'F',
-        'S',
-        'S',
-        'M',
-      ],
+      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
       optionsBar: {
         maintainAspectRatio: false,
         plugins: {
diff --git a/src/views/widgets/WidgetsStatsTypeA.vue b/src/views/widgets/WidgetsStatsTypeA.vue
index 4410eb59..2d04467a 100644
--- a/src/views/widgets/WidgetsStatsTypeA.vue
+++ b/src/views/widgets/WidgetsStatsTypeA.vue
@@ -1,7 +1,7 @@
 <template>
-  <CRow>
-    <CCol :xs="12" :sm="6" :lg="3">
-      <CWidgetStatsA class="mb-4" color="primary">
+  <CRow :xs="{ gutter: 4 }">
+    <CCol :sm="6" :xl="4" :xxl="3">
+      <CWidgetStatsA color="primary">
         <template #value
           >26K
           <span class="fs-6 fw-normal">
@@ -99,8 +99,8 @@
         </template>
       </CWidgetStatsA>
     </CCol>
-    <CCol :xs="12" :sm="6" :lg="3">
-      <CWidgetStatsA class="mb-4" color="info">
+    <CCol :sm="6" :xl="4" :xxl="3">
+      <CWidgetStatsA color="info">
         <template #value
           >$6.200
           <span class="fs-6 fw-normal">
@@ -197,8 +197,8 @@
         </template>
       </CWidgetStatsA>
     </CCol>
-    <CCol :xs="12" :sm="6" :lg="3">
-      <CWidgetStatsA class="mb-4" color="warning">
+    <CCol :sm="6" :xl="4" :xxl="3">
+      <CWidgetStatsA color="warning">
         <template #value
           >2.49%
           <span class="fs-6 fw-normal">
@@ -281,8 +281,8 @@
         </template>
       </CWidgetStatsA>
     </CCol>
-    <CCol :xs="12" :sm="6" :lg="3">
-      <CWidgetStatsA class="mb-4" color="danger">
+    <CCol :sm="6" :xl="4" :xxl="3">
+      <CWidgetStatsA color="danger">
         <template #value
           >44K
           <span class="fs-6 fw-normal">
diff --git a/src/views/widgets/WidgetsStatsTypeD.vue b/src/views/widgets/WidgetsStatsTypeD.vue
index d4f36973..7b0cbaac 100644
--- a/src/views/widgets/WidgetsStatsTypeD.vue
+++ b/src/views/widgets/WidgetsStatsTypeD.vue
@@ -1,31 +1,20 @@
 <template>
-  <CRow>
-    <CCol :xs="12" :sm="6" :lg="3">
+  <CRow :xs="{ gutter: 4 }">
+    <CCol :sm="6" :xl="4" :xxl="3">
       <CWidgetStatsD
-        class="mb-4"
         style="--cui-card-cap-bg: #3b5998"
         :values="[
           { title: 'friends', value: '89K' },
           { title: 'feeds', value: '459' },
         ]"
       >
-        <template #icon
-          ><CIcon icon="cib-facebook" height="52" class="my-4 text-white"
-        /></template>
+        <template #icon><CIcon icon="cib-facebook" height="52" class="my-4 text-white" /></template>
         <template #chart>
           <CChart
             class="position-absolute w-100 h-100"
             type="line"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   backgroundColor: 'rgba(255,255,255,.1)',
@@ -42,32 +31,21 @@
         </template>
       </CWidgetStatsD>
     </CCol>
-    <CCol :xs="12" :sm="6" :lg="3">
+    <CCol :sm="6" :xl="4" :xxl="3">
       <CWidgetStatsD
-        class="mb-4"
         style="--cui-card-cap-bg: #00aced"
         :values="[
           { title: 'followers', value: '973k' },
           { title: 'tweets', value: '1.792' },
         ]"
       >
-        <template #icon
-          ><CIcon icon="cib-twitter" height="52" class="my-4 text-white"
-        /></template>
+        <template #icon><CIcon icon="cib-twitter" height="52" class="my-4 text-white" /></template>
         <template #chart>
           <CChart
             class="position-absolute w-100 h-100"
             type="line"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   backgroundColor: 'rgba(255,255,255,.1)',
@@ -84,32 +62,21 @@
         </template>
       </CWidgetStatsD>
     </CCol>
-    <CCol :xs="12" :sm="6" :lg="3">
+    <CCol :sm="6" :xl="4" :xxl="3">
       <CWidgetStatsD
-        class="mb-4"
         style="--cui-card-cap-bg: #4875b4"
         :values="[
           { title: 'contacts', value: '500' },
           { title: 'feeds', value: '1.292' },
         ]"
       >
-        <template #icon
-          ><CIcon icon="cib-linkedin" height="52" class="my-4 text-white"
-        /></template>
+        <template #icon><CIcon icon="cib-linkedin" height="52" class="my-4 text-white" /></template>
         <template #chart>
           <CChart
             class="position-absolute w-100 h-100"
             type="line"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   backgroundColor: 'rgba(255,255,255,.1)',
@@ -126,32 +93,21 @@
         </template>
       </CWidgetStatsD>
     </CCol>
-    <CCol :xs="12" :sm="6" :lg="3">
+    <CCol :sm="6" :xl="4" :xxl="3">
       <CWidgetStatsD
-        class="mb-4"
         color="warning"
         :values="[
           { title: 'events', value: '12+' },
           { title: 'meetings', value: '4' },
         ]"
       >
-        <template #icon
-          ><CIcon icon="cil-calendar" height="52" class="my-4 text-white"
-        /></template>
+        <template #icon><CIcon icon="cil-calendar" height="52" class="my-4 text-white" /></template>
         <template #chart>
           <CChart
             class="position-absolute w-100 h-100"
             type="line"
             :data="{
-              labels: [
-                'January',
-                'February',
-                'March',
-                'April',
-                'May',
-                'June',
-                'July',
-              ],
+              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
               datasets: [
                 {
                   backgroundColor: 'rgba(255,255,255,.1)',