refactor: update examples

src/views/notifications/Badges.vue

@@ -13,22 +13,22 @@
             Bootstrap badge scale to suit the size of the parent element by
             using relative font sizing and <code>em</code> units.
           </p>
-          <Example href="components/badge">
+          <DocsExample href="components/badge">
             <h1>Example heading <CBadge color="secondary">New</CBadge></h1>
             <h2>Example heading <CBadge color="secondary">New</CBadge></h2>
             <h3>Example heading <CBadge color="secondary">New</CBadge></h3>
             <h4>Example heading <CBadge color="secondary">New</CBadge></h4>
             <h5>Example heading <CBadge color="secondary">New</CBadge></h5>
             <h6>Example heading <CBadge color="secondary">New</CBadge></h6>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             Badges can be used as part of links or buttons to provide a counter.
           </p>
-          <Example href="components/badge">
+          <DocsExample href="components/badge">
             <CButton color="primary">
               Notifications <CBadge color="secondary">4</CBadge>
             </CButton>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             Remark that depending on how you use them, badges may be complicated
             for users of screen readers and related assistive technologies.
@@ -37,12 +37,12 @@
             Unless the context is clear, consider including additional context
             with a visually hidden piece of additional text.
           </p>
-          <Example href="components/badge">
+          <DocsExample href="components/badge">
             <CButton color="primary">
               Profile <CBadge color="secondary">9</CBadge>
               <span class="visually-hidden">unread messages</span>
             </CButton>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -56,7 +56,7 @@
             Add any of the below-mentioned <code>color</code> props to modify
             the presentation of a badge.
           </p>
-          <Example href="components/badge#contextual-variations">
+          <DocsExample href="components/badge#contextual-variations">
             <CBadge color="primary">primary</CBadge>
             <CBadge color="success">success</CBadge>
             <CBadge color="danger">danger</CBadge>
@@ -64,7 +64,7 @@
             <CBadge color="info">info</CBadge>
             <CBadge color="light">light</CBadge>
             <CBadge color="dark">dark</CBadge>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
       <CCard class="mb-4">
@@ -76,7 +76,7 @@
             Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make
             badges rounded.
           </p>
-          <Example href="components/badge#pill-badges">
+          <DocsExample href="components/badge#pill-badges">
             <CBadge color="primary" shape="rounded-pill"> primary </CBadge>
             <CBadge color="success" shape="rounded-pill"> success </CBadge>
             <CBadge color="danger" shape="rounded-pill"> danger </CBadge>
@@ -84,7 +84,7 @@
             <CBadge color="info" shape="rounded-pill"> info </CBadge>
             <CBadge color="light" shape="rounded-pill"> light </CBadge>
             <CBadge color="dark" shape="rounded-pill"> dark </CBadge>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>