refactor: update examples

src/views/notifications/Alerts.vue

@@ -21,7 +21,7 @@
             </a>
             .
           </p>
-          <Example href="components/alert">
+          <DocsExample href="components/alert">
             <CAlert color="primary"
               >A simple primary alert—check it out!</CAlert
             >
@@ -38,7 +38,7 @@
             <CAlert color="info">A simple info alert—check it out!</CAlert>
             <CAlert color="light">A simple light alert—check it out!</CAlert>
             <CAlert color="dark">A simple dark alert—check it out!</CAlert>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -52,7 +52,7 @@
             Use the <code>&lt;CAlertLink&gt;</code> component to immediately
             give matching colored links inside any alert.
           </p>
-          <Example href="components/alert#link-color">
+          <DocsExample href="components/alert#link-color">
             <CAlert color="primary">
               A simple primary alert with
               <CAlertLink href="#">an example link</CAlertLink>. Give it a click
@@ -93,7 +93,7 @@
               <CAlertLink href="#">an example link</CAlertLink>. Give it a click
               if you like.
             </CAlert>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -107,7 +107,7 @@
             Alert can also incorporate supplementary components &amp; elements
             like heading, paragraph, and divider.
           </p>
-          <Example href="components/alert#additional-content">
+          <DocsExample href="components/alert#additional-content">
             <CAlert color="success">
               <CAlertHeading tag="h4">Well done!</CAlertHeading>
               <p>
@@ -121,7 +121,7 @@
                 things nice and tidy.
               </p>
             </CAlert>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -135,12 +135,12 @@
             Alerts can also be easily dismissed. Just add the
             <code>dismissible</code> prop.
           </p>
-          <Example href="components/alert#dismissing">
+          <DocsExample href="components/alert#dismissing">
             <CAlert color="warning" dismissible @dismiss="alert">
               <strong>Go right ahead</strong> and click that dimiss over there
               on the right.
             </CAlert>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>