From 67dbabb4d2692c41ec39fc091b2104453d36c6ad Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Tue, 30 Jul 2019 16:53:42 +0200
Subject: [PATCH] refactor: restore valid docs links, and add new

---
 src/views/Charts.vue                  |  19 +++-
 src/views/base/Breadcrumbs.vue        |  11 ++-
 src/views/base/Cards.vue              |  71 ++++++++-------
 src/views/base/Carousels.vue          |  12 +--
 src/views/base/Collapses.vue          |  13 ++-
 src/views/base/Forms.vue              |  10 ++
 src/views/base/Jumbotrons.vue         |  13 ++-
 src/views/base/ListGroups.vue         |  13 ++-
 src/views/base/Navbars.vue            |  13 ++-
 src/views/base/Navs.vue               |  16 ++--
 src/views/base/Paginations.vue        |  13 ++-
 src/views/base/Popovers.vue           |  13 ++-
 src/views/base/ProgressBars.vue       |  15 ++-
 src/views/base/Switches.vue           |  17 +++-
 src/views/base/Tables.vue             | 126 ++++++++++++++------------
 src/views/base/Tabs.vue               |  10 ++
 src/views/base/Tooltips.vue           |  13 ++-
 src/views/buttons/BrandButtons.vue    |  10 ++
 src/views/buttons/ButtonGroups.vue    |  11 ++-
 src/views/buttons/Dropdowns.vue       |  11 ++-
 src/views/buttons/StandardButtons.vue |  10 ++
 src/views/notifications/Alerts.vue    |  11 ++-
 src/views/notifications/Badges.vue    |  11 ++-
 src/views/notifications/Modals.vue    |  10 ++
 src/views/widgets/Widgets.vue         |  13 +++
 25 files changed, 324 insertions(+), 161 deletions(-)

diff --git a/src/views/Charts.vue b/src/views/Charts.vue
index aa385801..10471d6c 100644
--- a/src/views/Charts.vue
+++ b/src/views/Charts.vue
@@ -1,8 +1,23 @@
 <template>
   <div>
     <CCardGroup columns class="c-card-columns c-cols-2">
-      <CCard header-html="Line Chart" body-wrapper>
-        <CChartLineExample/>
+      <CCard>
+        <CCardHeader>
+          Line Chart
+          <div class="c-card-header-actions">
+            <a 
+              href="https://coreui.io/vue/docs/3.0/components/Charts" 
+              class="card-header-action" 
+              rel="noreferrer noopener" 
+              target="_blank"
+            >
+              <small class="text-muted">docs</small>
+            </a>
+          </div>
+        </CCardHeader>
+        <CCardBody>
+          <CChartLineExample/>
+        </CCardBody>
       </CCard>
       <CCard header-html="Bar Chart" body-wrapper>
         <CChartBarExample/>
diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue
index 4bd991c7..98dfc238 100644
--- a/src/views/base/Breadcrumbs.vue
+++ b/src/views/base/Breadcrumbs.vue
@@ -6,11 +6,16 @@
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
-              <!-- <div class="card-header-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank">
+              <div class="c-card-header-actions">
+                <a 
+                  href="https://coreui.io/vue/docs/3.0/components/Breadcrumb" 
+                  class="card-header-action" 
+                  rel="noreferrer noopener" 
+                  target="_blank"
+                >
                   <small class="text-muted">docs</small>
                 </a>
-              </div> -->
+              </div>
             </CCardHeader>
             <CCardBody>
               <CBreadcrumb :items="items" add-link-classes="sss" last-item-classes="aaa"/>
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index c28f8367..1c4c5744 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -2,7 +2,24 @@
   <div>
     <CRow>
       <CCol sm="6" md="4">
-        <CCard header-html="Card title" :body-html="loremIpsum"/>
+        <CCard>
+          <CCardHeader>
+            Card title
+            <div class="c-card-header-actions">
+              <a 
+                href="https://coreui.io/vue/docs/3.0/components/CardComponents" 
+                class="card-header-action" 
+                rel="noreferrer noopener" 
+                target="_blank"
+              >
+                <small class="text-muted">docs</small>
+              </a>
+            </div>
+          </CCardHeader>
+          <CCardBody>
+            {{loremIpsum}}
+          </CCardBody>
+        </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard footer-html="Card Footer" :body-html="loremIpsum" />
@@ -28,7 +45,7 @@
             />
           </CCardHeader>
           <CCardBody>
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
           </CCardBody>
         </CCard>
       </CCol>
@@ -39,7 +56,7 @@
             <CBadge variant="success" class="c-float-right">Success</CBadge>
           </CCardHeader>
           <CCardBody>
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
           </CCardBody>
         </CCard>
       </CCol>
@@ -74,22 +91,22 @@
           border-variant="success"
           body-wrapper
         >
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard header-html="Card outline info" border-variant="info" body-wrapper>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard header-html="Card outline warning" border-variant="warning" body-wrapper>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard header-html="Card outline danger" border-variant="danger" body-wrapper>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
         </CCard>
       </CCol>
     </CRow>
@@ -97,32 +114,32 @@
     <CRow>
       <CCol sm="6" md="4">
         <CCard class="c-card-accent-primary" header="Card with primary accent" body-wrapper>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard class="c-card-accent-secondary" header="Card with secondary accent" body-wrapper>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard class="c-card-accent-success" header="Card with success accent" body-wrapper>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard class="c-card-accent-info" header="Card with info accent" body-wrapper>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard class="c-card-accent-warning" header="Card with warning accent" body-wrapper>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard class="c-card-accent-danger" header="Card with danger accent" body-wrapper>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
         </CCard>
       </CCol>
     </CRow>
@@ -191,27 +208,27 @@
     <CRow>
       <CCol sm="6" md="4">
         <CCard header-html="Card title" class="c-bg-primary" body-wrapper>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard header-html="Card title" class="c-bg-success" body-wrapper>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard header-html="Card title" class="c-bg-info" body-wrapper>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard header-html="Card title" class="c-bg-warning" body-wrapper>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard header-html="Card title" class="c-bg-danger" body-wrapper>
-          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+            {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
@@ -233,29 +250,13 @@
             </CCardHeader>
             <CCollapse :show="isCollapsed" :duration="400">
               <CCardBody>
-                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+                {{loremIpsum}}
               </CCardBody>
             </CCollapse>
           </CCard>
         </transition>
       </CCol>
     </CRow>
-    <!-- <CRow>
-      <CCol sm="6" md="4">
-        <CCard >
-          <CCardImg img-src="https://picsum.photos/600/300/?image=25"/>
-          <CCardHeader header-html="Card title"/>
-          <CCardBody style="max-height:200px;overflow-y:auto">
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow> -->
   </div>
 </template>
 
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index 2a3c0686..49978795 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -7,16 +7,16 @@
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap Carousel</strong>
-              <!-- <div class="card-header-actions">
-                <a
-                  href="https://bootstrap-vue.js.org/docs/components/carousel"
-                  class="card-header-action"
-                  rel="noreferrer noopener"
+              <div class="c-card-header-actions">
+                <a 
+                  href="https://coreui.io/vue/docs/3.0/components/Carousel" 
+                  class="card-header-action" 
+                  rel="noreferrer noopener" 
                   target="_blank"
                 >
                   <small class="text-muted">docs</small>
                 </a>
-              </div> -->
+              </div>
             </CCardHeader>
             <CCardBody>
               <CCarousel
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 287790f8..39127631 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -7,11 +7,16 @@
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap Collapse </strong>
-              <!-- <div class="card-header-actions">
-                <CLink class="card-header-action">
+              <div class="c-card-header-actions">
+                <a 
+                  href="https://coreui.io/vue/docs/3.0/components/Collapse" 
+                  class="card-header-action" 
+                  rel="noreferrer noopener" 
+                  target="_blank"
+                >
                   <small class="text-muted">docs</small>
-                </CLink>
-              </div> -->
+                </a>
+              </div>
             </CCardHeader>
             <CCardBody>
               <CButton id="collapse1" variant="primary">
diff --git a/src/views/base/Forms.vue b/src/views/base/Forms.vue
index c8f73703..577687b0 100644
--- a/src/views/base/Forms.vue
+++ b/src/views/base/Forms.vue
@@ -5,6 +5,16 @@
         <CCard>
           <CCardHeader>
             <strong>Credit Card </strong> <small>Form</small>
+            <div class="c-card-header-actions">
+              <a 
+                href="https://coreui.io/vue/docs/3.0/components/FormComponents" 
+                class="card-header-action" 
+                rel="noreferrer noopener" 
+                target="_blank"
+              >
+                <small class="text-muted">docs</small>
+              </a>
+            </div>
           </CCardHeader>
           <CCardBody>
             <CRow>
diff --git a/src/views/base/Jumbotrons.vue b/src/views/base/Jumbotrons.vue
index 2f90f17d..b5964bc5 100644
--- a/src/views/base/Jumbotrons.vue
+++ b/src/views/base/Jumbotrons.vue
@@ -7,11 +7,16 @@
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap Jumbotron </strong>
-              <!-- <div class="card-header-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
-                  <small class="c-text-muted">docs</small>
+              <div class="c-card-header-actions">
+                <a 
+                  href="https://coreui.io/vue/docs/3.0/components/Jumbotron" 
+                  class="card-header-action" 
+                  rel="noreferrer noopener" 
+                  target="_blank"
+                >
+                  <small class="text-muted">docs</small>
                 </a>
-              </div> -->
+              </div>
             </CCardHeader>
             <CCardBody>
               <CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 90ba4f7e..ce96a0aa 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -7,11 +7,16 @@
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap list group </strong>
-              <!-- <div class="c-card-header-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/list-group" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
-                  <small class="c-text-muted">docs</small>
+              <div class="c-card-header-actions">
+                <a 
+                  href="https://coreui.io/vue/docs/3.0/components/ListGroup" 
+                  class="card-header-action" 
+                  rel="noreferrer noopener" 
+                  target="_blank"
+                >
+                  <small class="text-muted">docs</small>
                 </a>
-              </div> -->
+              </div>
             </CCardHeader>
             <CCardBody>
               <CListGroup>
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index ae67ae3d..aae55d30 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -34,11 +34,16 @@
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Navbar </strong>
-          <!-- <div class="c-card-header-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/navbar" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
-              <small class="c-text-muted">docs</small>
+          <div class="c-card-header-actions">
+            <a 
+              href="https://coreui.io/vue/docs/3.0/components/Navbar" 
+              class="card-header-action" 
+              rel="noreferrer noopener" 
+              target="_blank"
+            >
+              <small class="text-muted">docs</small>
             </a>
-          </div> -->
+          </div>
         </CCardHeader>
         <CCardBody>
           <CNavbar
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index 7bd8ad5b..8459c229 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -4,14 +4,16 @@
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
-          <!-- <div class="c-card-header-actions">
-            <CLink
-              href="#"
-              class="c-card-header-action"
+          <div class="c-card-header-actions">
+            <a 
+              href="https://coreui.io/vue/docs/3.0/components/Nav" 
+              class="card-header-action" 
+              rel="noreferrer noopener" 
+              target="_blank"
             >
-              <small class="c-text-muted">docs</small>
-            </CLink>
-          </div> -->
+              <small class="text-muted">docs</small>
+            </a>
+          </div>
         </CCardHeader>
         <CCardBody>
           <CNav>
diff --git a/src/views/base/Paginations.vue b/src/views/base/Paginations.vue
index b192cf94..cb775e43 100644
--- a/src/views/base/Paginations.vue
+++ b/src/views/base/Paginations.vue
@@ -5,11 +5,16 @@
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Responsive bootstrap Pagination</strong>
-          <!-- <div class="c-card-header-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/pagination" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
-              <small class="c-text-muted">docs</small>
+          <div class="c-card-header-actions">
+            <a 
+              href="https://coreui.io/vue/docs/3.0/components/Pagination" 
+              class="card-header-action" 
+              rel="noreferrer noopener" 
+              target="_blank"
+            >
+              <small class="text-muted">docs</small>
             </a>
-          </div> -->
+          </div>
         </CCardHeader>
         <CCardBody>
           <h6>Default</h6>
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index 43faa785..87fed8b2 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -5,11 +5,16 @@
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Popovers</strong>
-          <!-- <div class="c-card-header-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/popovers" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
-              <small class="c-text-muted">docs</small>
+          <div class="c-card-header-actions">
+            <a 
+              href="https://coreui.io/vue/docs/3.0/components/Popover" 
+              class="card-header-action" 
+              rel="noreferrer noopener" 
+              target="_blank"
+            >
+              <small class="text-muted">docs</small>
             </a>
-          </div> -->
+          </div>
         </CCardHeader>
         <CCardBody>
           <CRow>
diff --git a/src/views/base/ProgressBars.vue b/src/views/base/ProgressBars.vue
index 355d602e..7353fd40 100644
--- a/src/views/base/ProgressBars.vue
+++ b/src/views/base/ProgressBars.vue
@@ -5,11 +5,16 @@
         <CCardHeader>
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Progress</strong>
-          <!-- <div class="c-card-header-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/progress" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
-              <small class="c-text-muted">docs</small>
+          <div class="c-card-header-actions">
+            <a 
+              href="https://coreui.io/vue/docs/3.0/components/Progress" 
+              class="card-header-action" 
+              rel="noreferrer noopener" 
+              target="_blank"
+            >
+              <small class="text-muted">docs</small>
             </a>
-          </div> -->
+          </div>
         </CCardHeader>
         <CCardBody>
           <CProgress :value="counter" :max="max" show-progress animated></CProgress>
@@ -206,7 +211,7 @@ export default {
   name: 'progress-bars',
   data () {
     return {
-      counter: 45,
+      counter: 73,
       max: 100,
       max2: 50,
       value: 33.333333333,
diff --git a/src/views/base/Switches.vue b/src/views/base/Switches.vue
index 6f033ce4..5352ca98 100644
--- a/src/views/base/Switches.vue
+++ b/src/views/base/Switches.vue
@@ -4,11 +4,18 @@
       <CCol xs="12" md="6">
         <CCard v-if="true">
           <CCardHeader>
-            <h5>
-               Radio switches
-              <CBadge :variant="radio" class="c-mr-auto">{{radio}}</CBadge>
-              <CBadge variant="danger" class="c-float-right">NEW</CBadge>
-            </h5>
+            Radio switches
+            <CBadge :variant="radio" class="c-mr-auto">{{radio}}</CBadge>
+            <div class="c-card-header-actions">
+              <a 
+                href="https://coreui.io/vue/docs/3.0/components/Switch" 
+                class="card-header-action" 
+                rel="noreferrer noopener" 
+                target="_blank"
+              >
+                <small class="text-muted">docs</small>
+              </a>
+            </div>
           </CCardHeader>
           <CCardBody>
             <!-- <CSwitch
diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue
index 427b83a8..fe40b5b0 100644
--- a/src/views/base/Tables.vue
+++ b/src/views/base/Tables.vue
@@ -2,66 +2,76 @@
   <div>
     <CRow>
       <CCol sm="12">
-        <CCard header-html="CTable component functionality presentation" body-wrapper>
-          <CTable
-            :items="getItems()"
-            :fields="fields"
-            :per-page="6"
-            index-column
-            filter-row
-            options-row
-            hover
-            :default-column-filter="{ role:'staff' }"
-            :default-sorters="['username', 'asc']"
-            :default-filter="2012"
-            dark-header
-            footer
-            pagination
-          >
-            <template #index-column="{index}">
-              <td
-                @click="toggleDetails(index)"
-                style="cursor:pointer"
-                class="c-text-center"
+        <CCard>
+          <CCardHeader>
+            CTable component functionality presentation
+            <div class="c-card-header-actions">
+              <a 
+                href="https://coreui.io/vue/docs/3.0/components/Table" 
+                class="card-header-action" 
+                rel="noreferrer noopener" 
+                target="_blank"
               >
-                <i
-                  class="c-icons c-font-lg c-d-block cui-chevron-right"
-                  style="transition: transform 0.4s"
-                  :style="details.includes(index) ? 'transform:rotate(90deg)': ''"
-                ></i>
-              </td>
-            </template>
-            <template #status="{item}">
-              <td>
-                <CBadge :variant="getBadge(item.status)">
-                  {{item.status}}
-                </CBadge>
-              </td>
-            </template>
-            <template #show_details="{item, index}">
-              <td class="c-py-2">
-                <CButton
-                  variant="outline-primary"
-                  square
-                  size="sm"
+                <small class="text-muted">docs</small>
+              </a>
+            </div>
+          </CCardHeader>
+          <CCardBody>
+            <CTable
+              :items="getItems()"
+              :fields="fields"
+              :per-page="6"
+              index-column
+              filter-row
+              options-row
+              hover
+              :default-column-filter="{ role:'staff' }"
+              :default-sorters="['username', 'asc']"
+              :default-filter="2012"
+              dark-header
+              footer
+              pagination
+            >
+              <template #index-column="{index}">
+                <td
                   @click="toggleDetails(index)"
-                  :text-html="details.includes(index) ? 'Hide' : 'Show'"
-                />
-              </td>
-            </template>
-            <template #details="{item, index}">
-              <CCollapse :show="details.includes(index)">
-                <CCardBody>
-                  {{index + 1}} - {{item}}
-                </CCardBody>
-              </CCollapse>
-            </template>
-          </CTable>
-          <!-- <CPagination
-            v-show="pages > 1"
-            :activePage.sync="page"
-            :pages="pages"
-          /> -->
+                  style="cursor:pointer"
+                  class="c-text-center"
+                >
+                  <i
+                    class="c-icons c-font-lg c-d-block cui-chevron-right"
+                    style="transition: transform 0.4s"
+                    :style="details.includes(index) ? 'transform:rotate(90deg)': ''"
+                  ></i>
+                </td>
+              </template>
+              <template #status="{item}">
+                <td>
+                  <CBadge :variant="getBadge(item.status)">
+                    {{item.status}}
+                  </CBadge>
+                </td>
+              </template>
+              <template #show_details="{item, index}">
+                <td class="c-py-2">
+                  <CButton
+                    variant="outline-primary"
+                    square
+                    size="sm"
+                    @click="toggleDetails(index)"
+                    :text-html="details.includes(index) ? 'Hide' : 'Show'"
+                  />
+                </td>
+              </template>
+              <template #details="{item, index}">
+                <CCollapse :show="details.includes(index)">
+                  <CCardBody>
+                    {{index + 1}} - {{item}}
+                  </CCardBody>
+                </CCollapse>
+              </template>
+            </CTable>
+          </CCardBody>
         </CCard>
       </CCol>
     </CRow>
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
index f7cd440b..44de1232 100644
--- a/src/views/base/Tabs.vue
+++ b/src/views/base/Tabs.vue
@@ -5,6 +5,16 @@
         <CCard>
           <CCardHeader>
             Tabs
+            <div class="c-card-header-actions">
+              <a 
+                href="https://coreui.io/vue/docs/3.0/components/Tabs" 
+                class="card-header-action" 
+                rel="noreferrer noopener" 
+                target="_blank"
+              >
+                <small class="text-muted">docs</small>
+              </a>
+            </div>
           </CCardHeader>
           <CCardBody>
             <CTabs>
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index f537c25c..c87fe700 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -6,11 +6,16 @@
           <i class="fa fa-align-justify"></i>
           <strong> Bootstrap Tooltips </strong>
           <small><code>v-c-tooltip</code> directive</small>
-          <!-- <div class="c-card-header-actions">
-            <a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="c-card-header-action" rel="noreferrer noopener" target="_blank">
-              <small class="c-text-muted">docs</small>
+          <div class="c-card-header-actions">
+            <a 
+              href="https://coreui.io/vue/docs/3.0/components/Tooltip" 
+              class="card-header-action" 
+              rel="noreferrer noopener" 
+              target="_blank"
+            >
+              <small class="text-muted">docs</small>
             </a>
-          </div> -->
+          </div>
         </CCardHeader>
         <CCardBody>
           <CRow>
diff --git a/src/views/buttons/BrandButtons.vue b/src/views/buttons/BrandButtons.vue
index afce30a2..c5d2fae8 100644
--- a/src/views/buttons/BrandButtons.vue
+++ b/src/views/buttons/BrandButtons.vue
@@ -5,6 +5,16 @@
         <CCard>
           <CCardHeader>
             <strong>Brand Button</strong>
+            <div class="c-card-header-actions">
+                <a 
+                  href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" 
+                  class="card-header-action" 
+                  rel="noreferrer noopener" 
+                  target="_blank"
+                >
+                  <small class="text-muted">docs</small>
+                </a>
+              </div>
           </CCardHeader>
           <CCardBody>
             <small>Usage </small>
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index 090bd9e2..1ed27faf 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -7,11 +7,16 @@
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap button group</strong>
-              <!-- <div class="card-header-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
+              <div class="c-card-header-actions">
+                <a 
+                  href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" 
+                  class="card-header-action" 
+                  rel="noreferrer noopener" 
+                  target="_blank"
+                >
                   <small class="text-muted">docs</small>
                 </a>
-              </div> -->
+              </div>
             </CCardHeader>
             <CCardBody>
               <div>
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index 752a7331..81fb00dd 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -7,11 +7,16 @@
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap Dropdown</strong>
-              <!-- <div class="card-header-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank">
+              <div class="c-card-header-actions">
+                <a 
+                  href="https://coreui.io/vue/docs/3.0/components/Dropdown" 
+                  class="card-header-action" 
+                  rel="noreferrer noopener" 
+                  target="_blank"
+                >
                   <small class="text-muted">docs</small>
                 </a>
-              </div> -->
+              </div>
             </CCardHeader>
             <CCardBody>
               <div>
diff --git a/src/views/buttons/StandardButtons.vue b/src/views/buttons/StandardButtons.vue
index 877a2338..eb0344fe 100644
--- a/src/views/buttons/StandardButtons.vue
+++ b/src/views/buttons/StandardButtons.vue
@@ -3,6 +3,16 @@
     <CCard >
       <CCardHeader>
         <strong>Standard buttons</strong>
+        <div class="c-card-header-actions">
+          <a 
+            href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" 
+            class="card-header-action" 
+            rel="noreferrer noopener" 
+            target="_blank"
+          >
+            <small class="text-muted">docs</small>
+          </a>
+        </div>
       </CCardHeader>
       <CCardBody>
         <CRow class="c-align-items-center">
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index 8d36c6e6..4412c1fd 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -7,11 +7,16 @@
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap Alert</strong>
-              <!-- <div class="card-header-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank">
+              <div class="c-card-header-actions">
+                <a 
+                  href="https://coreui.io/vue/docs/3.0/components/Alert" 
+                  class="card-header-action" 
+                  rel="noreferrer noopener" 
+                  target="_blank"
+                >
                   <small class="text-muted">docs</small>
                 </a>
-              </div> -->
+              </div>
             </CCardHeader>
             <CCardBody>
               <div>
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index 6709c6b5..705f683f 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -7,11 +7,16 @@
             <CCardHeader>
               <i class="fa fa-align-justify"></i>
               <strong> Bootstrap Badge</strong>
-              <!-- <div class="card-header-actions">
-                <a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank">
+              <div class="c-card-header-actions">
+                <a 
+                  href="https://coreui.io/vue/docs/3.0/components/Badge" 
+                  class="card-header-action" 
+                  rel="noreferrer noopener" 
+                  target="_blank"
+                >
                   <small class="text-muted">docs</small>
                 </a>
-              </div> -->
+              </div>
             </CCardHeader>
             <CCardBody>
               <h2>Example heading <CBadge variant="primary">New</CBadge></h2>
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index cd6d8f03..51a02e92 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -6,6 +6,16 @@
           <CCard>
             <CCardHeader>
               <i class="fa fa-align-justify"></i> Bootstrap Modals
+              <div class="c-card-header-actions">
+                <a 
+                  href="https://coreui.io/vue/docs/3.0/components/Modal" 
+                  class="card-header-action" 
+                  rel="noreferrer noopener" 
+                  target="_blank"
+                >
+                  <small class="text-muted">docs</small>
+                </a>
+              </div>
             </CCardHeader>
             <CCardBody>
               <CButton variant="secondary" @click="myModal = true" class="c-mr-1">
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index 3b1c4f8b..6a5f6fb3 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -12,6 +12,19 @@
             :value="25"
             class="c-progress-xs c-my-3 c-mb-0"
           />
+          <template #header>
+            <div class="c-card-header-actions">
+              <a 
+                href="https://coreui.io/vue/docs/3.0/components/ButtonComponents" 
+                class="card-header-action c-position-absolute"
+                style="right:10px; top:10px"
+                rel="noreferrer noopener" 
+                target="_blank"
+              >
+                <small class="text-muted">docs</small>
+              </a>
+            </div>
+          </template>
         </CWidgetProgress>
       </CCol>
       <CCol sm="6" lg="3">