refactor: update examples

src/views/Dashboard.vue

@@ -8,7 +8,7 @@
             <CRow>
               <CCol sm="5">
                 <h4 id="traffic" class="card-title mb-0">Traffic</h4>
-                <div class="small text-medium-emphasis">November 2017</div>
+                <div class="small text-medium-emphasis">January 2021</div>
               </CCol>
               <CCol sm="7" class="d-none d-md-block">
                 <CButton color="primary" class="float-end">
@@ -316,7 +316,7 @@
               <CTableHead color="light">
                 <CTableRow>
                   <CTableHeaderCell class="text-center">
-                    <CIcon name="{cilPeople}" />
+                    <CIcon name="cil-people" />
                   </CTableHeaderCell>
                   <CTableHeaderCell>User</CTableHeaderCell>
                   <CTableHeaderCell class="text-center"
@@ -449,7 +449,7 @@ export default {
             period: "Jun 11, 2021 - Jul 10, 2021",
             color: "warning",
           },
-          payment: { name: "Stripe", icon: "cib-stripe" },
+          payment: { name: "Stripe", icon: "cib-cc-stripe" },
           activity: "1 hour ago",
         },
         {
@@ -461,7 +461,7 @@ export default {
             period: "Jun 11, 2021 - Jul 10, 2021",
             color: "danger",
           },
-          payment: { name: "PayPal", icon: "cib-paypal" },
+          payment: { name: "PayPal", icon: "cib-cc-paypal" },
           activity: "Last month",
         },
         {
@@ -477,7 +477,7 @@ export default {
             period: "Jun 11, 2021 - Jul 10, 2021",
             color: "primary",
           },
-          payment: { name: "Google Wallet", icon: "cib-google-pay" },
+          payment: { name: "Google Wallet", icon: "cib-cc-apple-pay" },
           activity: "Last week",
         },
         {

src/views/base/Accordion.vue

@@ -12,7 +12,7 @@
           <p class="text-medium-emphasis small">
             Click the accordions below to expand/collapse the accordion content.
           </p>
-          <Example href="components/accordion">
+          <DocsExample href="components/accordion">
             <CAccordion>
               <CAccordionItem>
                 <CAccordionHeader>
@@ -96,7 +96,7 @@
                 </CAccordionCollapse>
               </CAccordionItem>
             </CAccordion>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
       <CCard class="mb-4">
@@ -110,7 +110,7 @@
             corners to render accordions edge-to-edge with their parent
             container.
           </p>
-          <Example href="components/accordion#flush">
+          <DocsExample href="components/accordion#flush">
             <CAccordion flush>
               <CAccordionItem>
                 <CAccordionHeader>
@@ -200,7 +200,7 @@
                 </CAccordionCollapse>
               </CAccordionItem>
             </CAccordion>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/base/Breadcrumbs.vue

@@ -23,7 +23,7 @@
             </a>
             .
           </p>
-          <Example href="components/breadcrumb">
+          <DocsExample href="components/breadcrumb">
             <CBreadcrumb>
               <CBreadcrumbItem>
                 <CLink href="#">Home</CLink>
@@ -51,7 +51,7 @@
               </CBreadcrumbItem>
               <CBreadcrumbItem active>Bootstrap</CBreadcrumbItem>
             </CBreadcrumb>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/base/Cards.vue

@@ -26,7 +26,7 @@
             width. Cards have no fixed width to start, so they'll naturally
             fill the full width of its parent element.
           </p>
-          <Example href="components/card">
+          <DocsExample href="components/card">
             <CCard style="width: 18rem">
               <CCardImage
                 component="svg"
@@ -55,7 +55,7 @@
                 <CButton href="#">Go somewhere</CButton>
               </CCardBody>
             </CCard>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -67,11 +67,11 @@
             The main block of a card is the <code>&lt;CCardBody&gt;</code>. Use
             it whenever you need a padded section within a card.
           </p>
-          <Example href="components/card/#body">
+          <DocsExample href="components/card/#body">
             <CCard>
               <CCardBody>This is some text within a card body.</CCardBody>
             </CCard>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -96,7 +96,7 @@
             <code>&lt;CCardBody&gt;</code> item, the card title, and subtitle
             are arranged rightly.
           </p>
-          <Example href="components/card/#titles-text-and-links">
+          <DocsExample href="components/card/#titles-text-and-links">
             <CCard style="width: 18rem">
               <CCardBody>
                 <CCardTitle>Card title</CCardTitle>
@@ -111,7 +111,7 @@
                 <CCardLink href="#">Another link</CCardLink>
               </CCardBody>
             </CCard>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -125,7 +125,7 @@
             within <code>.card-text</code> can additionally be styled with the
             regular HTML tags.
           </p>
-          <Example href="components/card/#images">
+          <DocsExample href="components/card/#images">
             <CCard style="width: 18rem">
               <CCardImage
                 component="svg"
@@ -152,7 +152,7 @@
                 </CCardText>
               </CCardBody>
             </CCard>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -165,7 +165,7 @@
           <p class="text-medium-emphasis small">
             Create lists of content in a card with a flush list group.
           </p>
-          <Example href="components/card/#list-groups">
+          <DocsExample href="components/card/#list-groups">
             <CRow>
               <CCol lg="{4}">
                 <CCard>
@@ -197,7 +197,7 @@
                 </CCard>
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -212,7 +212,7 @@
             throw everything in there. Shown below are image styles, blocks,
             text styles, and a list group—all wrapped in a fixed-width card.
           </p>
-          <Example href="components/card/#kitchen-sink">
+          <DocsExample href="components/card/#kitchen-sink">
             <CCard style="width: 18rem">
               <CCardImage
                 component="svg"
@@ -249,7 +249,7 @@
                 <CCardLink href="#">Another link</CCardLink>
               </CCardBody>
             </CCard>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -262,7 +262,7 @@
           <p class="text-medium-emphasis small">
             Add an optional header and/or footer within a card.
           </p>
-          <Example href="components/card/#header-and-footer">
+          <DocsExample href="components/card/#header-and-footer">
             <CCard>
               <CCardHeader>Header</CCardHeader>
               <CCardBody>
@@ -274,12 +274,12 @@
                 <CButton href="#">Go somewhere</CButton>
               </CCardBody>
             </CCard>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             Card headers can be styled by adding ex.
             <code>component=&#34;h5&#34;</code>.
           </p>
-          <Example href="components/card/#header-and-footer">
+          <DocsExample href="components/card/#header-and-footer">
             <CCard>
               <CCardHeader component="h5">Header</CCardHeader>
               <CCardBody>
@@ -291,8 +291,8 @@
                 <CButton href="#">Go somewhere</CButton>
               </CCardBody>
             </CCard>
-          </Example>
+          </DocsExample>
-          <Example href="components/card/#header-and-footer">
+          <DocsExample href="components/card/#header-and-footer">
             <CCard>
               <CCardHeader>Quote</CCardHeader>
               <CCardBody>
@@ -308,8 +308,8 @@
                 </blockquote>
               </CCardBody>
             </CCard>
-          </Example>
+          </DocsExample>
-          <Example href="components/card/#header-and-footer">
+          <DocsExample href="components/card/#header-and-footer">
             <CCard class="text-center">
               <CCardHeader>Header</CCardHeader>
               <CCardBody>
@@ -322,7 +322,7 @@
               </CCardBody>
               <CCardFooter class="text-medium-emphasis">2 days ago</CCardFooter>
             </CCard>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -340,7 +340,7 @@
           <p class="text-medium-emphasis small">
             Using the grid, wrap cards in columns and rows as needed.
           </p>
-          <Example href="components/card/#sizing">
+          <DocsExample href="components/card/#sizing">
             <CRow>
               <CCol sm="{6}">
                 <CCard>
@@ -367,7 +367,7 @@
                 </CCard>
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
           <h3>Using utilities</h3>
           <p class="text-medium-emphasis small">
             Use some of
@@ -376,7 +376,7 @@
             >
             to rapidly set a card&#39;s width.
           </p>
-          <Example href="components/card/#sizing">
+          <DocsExample href="components/card/#sizing">
             <CCard class="w-75">
               <CCardBody>
                 <CCardTitle>Card title</CCardTitle>
@@ -397,13 +397,13 @@
                 <CButton href="#">Go somewhere</CButton>
               </CCardBody>
             </CCard>
-          </Example>
+          </DocsExample>
           <strong>Using custom CSS</strong>
           <p class="text-medium-emphasis small">
             Use custom CSS in your stylesheets or as inline styles to set a
             width.
           </p>
-          <Example href="components/card/#sizing">
+          <DocsExample href="components/card/#sizing">
             <CCard style="width: 18rem">
               <CCardBody>
                 <CCardTitle>Special title treatment</CCardTitle>
@@ -414,7 +414,7 @@
                 <CButton href="#">Go somewhere</CButton>
               </CCardBody>
             </CCard>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -432,7 +432,7 @@
             >
             .
           </p>
-          <Example href="components/card/#text-alignment">
+          <DocsExample href="components/card/#text-alignment">
             <CCard style="width: 18rem">
               <CCardBody>
                 <CCardTitle>Special title treatment</CCardTitle>
@@ -463,7 +463,7 @@
                 <CButton href="#">Go somewhere</CButton>
               </CCardBody>
             </CCard>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -477,7 +477,7 @@
             Add some navigation to a <code>&lt;CCardHeader&gt;</code> with our
             <code>&lt;CNav&gt;</code> component.
           </p>
-          <Example href="components/card/##navigation">
+          <DocsExample href="components/card/##navigation">
             <CCard class="text-center">
               <CCardHeader>
                 <CNav variant="tabs" class="card-header-tabs">
@@ -501,8 +501,8 @@
                 <CButton href="#">Go somewhere</CButton>
               </CCardBody>
             </CCard>
-          </Example>
+          </DocsExample>
-          <Example href="components/card/##navigation">
+          <DocsExample href="components/card/##navigation">
             <CCard class="text-center">
               <CCardHeader>
                 <CNav variant="pills" class="card-header-pills">
@@ -526,7 +526,7 @@
                 <CButton href="#">Go somewhere</CButton>
               </CCardBody>
             </CCard>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -540,7 +540,7 @@
             Similar to headers and footers, cards can include top and bottom
             &#34;image caps&#34;—images at the top or bottom of a card.
           </p>
-          <Example href="components/card/#image-caps">
+          <DocsExample href="components/card/#image-caps">
             <CRow>
               <CCol lg="{6}">
                 <CCard class="mb-3">
@@ -613,7 +613,7 @@
                 </CCard>
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -631,7 +631,7 @@
           <p class="text-medium-emphasis small">
             Use <code>color</code> property to change the appearance of a card.
           </p>
-          <Example href="components/card/#background-and-color">
+          <DocsExample href="components/card/#background-and-color">
             <CRow>
               {[ { color: 'primary', textColor: 'white' }, { color: 'secondary',
               textColor: 'white' }, { color: 'success', textColor: 'white' }, {
@@ -656,7 +656,7 @@
               </CCol>
               ))}
             </CRow>
-          </Example>
+          </DocsExample>
           <h3>Border</h3>
           <p class="text-medium-emphasis small">
             Use
@@ -668,7 +668,7 @@
             <code>&lt;CCard&gt;</code> or a subset of the card&#39;s contents as
             shown below.
           </p>
-          <Example href="components/card/#border">
+          <DocsExample href="components/card/#border">
             <template
               v-for="item in [
                 { color: 'primary', textColor: 'primary' },
@@ -697,7 +697,7 @@
                 </CCardBody>
               </CCard>
             </template>
-          </Example>
+          </DocsExample>
           <h3>Top border</h3>
           <p class="text-medium-emphasis small">
             Use
@@ -709,7 +709,7 @@
             <code>&lt;CCard&gt;</code> or a subset of the card&#39;s contents as
             shown below.
           </p>
-          <Example href="components/card/#top-border">
+          <DocsExample href="components/card/#top-border">
             <template v-for="(item) in [
               { color: 'primary', textColor: 'primary' },
               { color: 'secondary', textColor: 'secondary' },
@@ -728,7 +728,7 @@
                 </CCardBody>
               </CCard>
             </template>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -744,7 +744,7 @@
             use <code>display: flex;</code> to become attached with uniform
             dimensions starting at the <code>sm</code> breakpoint.
           </p>
-          <Example href="components/card/#card-groups">
+          <DocsExample href="components/card/#card-groups">
             <CCardGroup>
               <CCard>
                 <CCardImage
@@ -845,12 +845,12 @@
                 </CCardBody>
               </CCard>
             </CCardGroup>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             When using card groups with footers, their content will
             automatically line up.
           </p>
-          <Example href="components/card/#card-groups">
+          <DocsExample href="components/card/#card-groups">
             <CCardGroup>
               <CCard>
                 <CCardImage
@@ -951,7 +951,7 @@
                 </CCardFooter>
               </CCard>
             </CCardGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -974,7 +974,7 @@
             <code>md=&#123;&#123;cols: 1&#125;&#125;</code> splitting four cards
             to equal width across multiple rows, from the medium breakpoint up.
           </p>
-          <Example href="components/card/#grid-cards">
+          <DocsExample href="components/card/#grid-cards">
             <CRow xs="{ cols: 1, gutter: 4 }" md="{ cols: 2 }">
               <CCol xs>
                 <CCard>
@@ -1117,12 +1117,12 @@
                 </CCard>
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             Change it to <code>md=&#123;&#123; cols: 3&#125;&#125;</code> and
             you&#39;ll see the fourth card wrap.
           </p>
-          <Example href="components/card/#grid-cards">
+          <DocsExample href="components/card/#grid-cards">
             <CRow xs="{ cols: 1, gutter: 4 }" md="{ cols: 3 }">
               <CCol xs>
                 <CCard>
@@ -1265,7 +1265,7 @@
                 </CCard>
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/base/Carousels.vue

@@ -1,6 +1,9 @@
 <template>
   <CRow>
-    <CCol>
+    <CCol :xs="12">
+      <DocsCallout name="Carousel" href="components/breadcrumb" />
+    </CCol>
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Carousels</strong> <small>Slide only</small>
@@ -9,7 +12,7 @@
           <p class="text-medium-emphasis small">
             Here’s a carousel with slides
           </p>
-          <Example href="components/carousel.html#slides-only">
+          <DocsExample href="components/carousel.html#slides-only">
             <CCarousel>
               <CCarouselItem>
                 <img
@@ -33,7 +36,7 @@
                 />
               </CCarouselItem>
             </CCarousel>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
       <CCard class="mb-4">
@@ -45,7 +48,7 @@
             Adding in the previous and next controls by
             <code>controls</code> property.
           </p>
-          <Example href="components/carousel.html#with-controls">
+          <DocsExample href="components/carousel.html#with-controls">
             <CCarousel controls>
               <CCarouselItem>
                 <img
@@ -69,7 +72,7 @@
                 />
               </CCarouselItem>
             </CCarousel>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
       <CCard class="mb-4">
@@ -81,7 +84,7 @@
             You can attach the indicators to the carousel, lengthwise the
             controls, too.
           </p>
-          <Example href="components/carousel.html#with-indicators">
+          <DocsExample href="components/carousel.html#with-indicators">
             <CCarousel controls indicators>
               <CCarouselItem>
                 <img
@@ -105,7 +108,7 @@
                 />
               </CCarouselItem>
             </CCarousel>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
       <CCard class="mb-4">
@@ -123,7 +126,7 @@
             >. We hide them with <code>.d-none</code> and draw them back on
             medium-sized devices with <code>.d-md-block</code>.
           </p>
-          <Example href="components/carousel.html#with-captions">
+          <DocsExample href="components/carousel.html#with-captions">
             <CCarousel controls indicators>
               <CCarouselItem>
                 <img
@@ -165,7 +168,7 @@
                 </CCarouselCaption>
               </CCarouselItem>
             </CCarousel>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
       <CCard class="mb-4">
@@ -177,7 +180,7 @@
             Add <code>transition=&#34;crossfade&#34;</code> to your carousel to
             animate slides with a fade transition instead of a slide.
           </p>
-          <Example href="components/carousel.html#crossfade">
+          <DocsExample href="components/carousel.html#crossfade">
             <CCarousel controls indicators transition="crossfade">
               <CCarouselItem>
                 <img
@@ -201,7 +204,7 @@
                 />
               </CCarouselItem>
             </CCarousel>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
       <CCard class="mb-4">
@@ -217,7 +220,7 @@
             additional Sass variables that customize the <code>color</code> and
             <code>background-color</code>.
           </p>
-          <Example href="components/carousel.html#dark-variant">
+          <DocsExample href="components/carousel.html#dark-variant">
             <CCarousel controls indicators dark>
               <CCarouselItem>
                 <img
@@ -241,7 +244,7 @@
                 />
               </CCarouselItem>
             </CCarousel>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -250,6 +253,6 @@
 
 <script>
 export default {
-  name: "Carousels",
+  name: 'Carousels',
-};
+}
 </script>

src/views/base/Collapses.vue

@@ -1,6 +1,9 @@
 <template>
   <CRow>
-    <CCol>
+    <CCol :xs="12">
+      <DocsCallout name="Collapse" href="components/breadcrumb" />
+    </CCol>
+    <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Collapse</strong>
@@ -9,7 +12,7 @@
           <p class="text-medium-emphasis small">
             You can use a link or a button component.
           </p>
-          <Example href="components/collapse.html#example">
+          <DocsExample href="components/collapse.html#example">
             <CButton color="primary" href="#" @click="visible = !visible"
               >Link</CButton
             >
@@ -26,7 +29,7 @@
                 </CCardBody>
               </CCard>
             </CCollapse>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
       <CCard class="mb-4">
@@ -38,7 +41,7 @@
             A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
           </p>
           <h4 class="mt-4">Toggle multiple targets</h4>
-          <Example href="components/collapse.html#multiple-targets">
+          <DocsExample href="components/collapse.html#multiple-targets">
             <CButton color="primary" @click="visibleA = !visibleA"
               >Toggle first element</CButton
             >
@@ -49,8 +52,8 @@
               color="primary"
               @click="
                 () => {
-                  visibleA = !visibleA;
+                  visibleA = !visibleA
-                  visibleB = !visibleB;
+                  visibleB = !visibleB
                 }
               "
             >
@@ -82,7 +85,7 @@
                 </CCollapse>
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -91,13 +94,13 @@
 
 <script>
 export default {
-  name: "Breadcrumbs",
+  name: 'Breadcrumbs',
   data() {
     return {
       visible: false,
       visibleA: false,
       visibleB: false,
-    };
+    }
   },
-};
+}
 </script>

src/views/base/Forms.vue

@@ -1,817 +0,0 @@
-<template>
-  <CRow>
-    <CCol>
-      <CCard>
-        <CCardHeader>
-          <strong>Vue Forms</strong>
-        </CCardHeader>
-        <CCardBody>
-          <CRow>
-          <CCol md="6">
-            <h4>Overview</h4>
-          <Example href="forms/overview.html#overview">
-            <CForm>
-                <div class="mb-3">
-                    <CFormLabel for="exampleInputEmail1">Email address</CFormLabel>
-                    <CFormInput type="email" id="exampleInputEmail1" aria-describedby="emailHelp" />
-                    <CFormText id="emailHelp">We'll never share your email with anyone else.</CFormText>
-                </div>
-                <div class="mb-3">
-                    <CFormLabel for="exampleInputPassword1">Email Password</CFormLabel>
-                    <CFormInput type="password" id="exampleInputPassword1" />
-                </div>
-                <CFormCheck
-                    class="mb-3"
-                    label="Check me out"
-                />
-                <CButton type="submit" color="primary">
-                    Submit
-                </CButton>
-            </CForm>
-          </Example>
-          </CCol>
-          <CCol md="6">
-          <h4 class="mt-4">Disabled fieldset example</h4>
-          <Example href="forms/overview.html#disabled-forms">
-            <CForm>
-                <fieldset disabled>
-                    <div class="mb-3">
-                    <CFormLabel for="disabledTextInput">Disabled input</CFormLabel>
-                    <CFormInput id="disabledTextInput" placeholder="Disabled input" />
-                    </div>
-                    <div class="mb-3">
-                    <CFormLabel for="disabledSelect">Disabled select menu</CFormLabel>
-                    <CFormSelect id="disabledSelect">
-                        <option>Disabled select</option>
-                    </CFormSelect>
-                    </div>
-                    <div class="mb-3">
-                    <CFormCheck id="disabledFieldsetCheck" label="Can't check this" disabled />
-                    </div>
-                    <CButton type="submit">Submit</CButton>
-                </fieldset>
-            </CForm>
-          </Example>
-          </CCol>
-          </CRow>
-          <h4 class="mt-4">Sizing</h4>
-          <Example href="forms/form-control.html#sizing">
-            <CFormInput type="text" size="lg" placeholder="Large input" aria-label="lg input example"/>
-            <br/>
-            <CFormInput type="text" placeholder="Default input" aria-label="default input example"/>
-            <br/>
-            <CFormInput type="text" size="sm" placeholder="Small input" aria-label="sm input example"/>
-          </Example>
-          <h4 class="mt-4">Input file</h4>
-          <Example href="forms/form-control.html#file-input">
-            <div class="mb-3">
-              <CFormLabel for="formFile">Default file input example</CFormLabel>
-              <CFormInput type="file" id="formFile"/>
-            </div>
-            <div class="mb-3">
-              <CFormLabel for="formFileMultiple">Multiple files input example</CFormLabel>
-              <CFormInput type="file" id="formFileMultiple" multiple/>
-            </div>
-            <div class="mb-3">
-              <CFormLabel for="formFileDisabled">Disabled file input example</CFormLabel>
-              <CFormInput type="file" id="formFileDisabled" disabled/>
-            </div>
-            <div class="mb-3">
-              <CFormLabel for="formFileSm">Small file input example</CFormLabel>
-              <CFormInput type="file" size="sm" id="formFileSm"/>
-            </div>
-            <div>
-              <CFormLabel for="formFileLg">Large file input example</CFormLabel>
-              <CFormInput type="file" size="lg" id="formFileLg"/>
-            </div>
-          </Example>
-          <h4 class="mt-4">Color</h4>
-          <Example href="forms/form-control.html#color">
-            <CFormLabel for="exampleColorInput">Color picker</CFormLabel>
-            <CFormInput type="color" id="exampleColorInput" defaultValue="#563d7c" title="Choose your color" />
-          </Example>
-          <h4 class="mt-4">Select</h4>
-          <Example href="forms/select.html#default">
-            <CRow>
-            <CCol md="3">
-            <CFormSelect class="mb-3" aria-label="Default select example">
-              <option>Open this select menu</option>
-              <option value="1">One</option>
-              <option value="2">Two</option>
-              <option value="3">Three</option>
-            </CFormSelect>
-            </CCol>
-            <CCol md="3">
-            <CFormSelect size="lg" class="mb-3" aria-label="Large select example">
-              <option>Open this select menu</option>
-              <option value="1">One</option>
-              <option value="2">Two</option>
-              <option value="3">Three</option>
-            </CFormSelect>
-            </CCol>
-            <CCol md="3">
-            <CFormSelect size="sm" class="mb-3" aria-label="Small select example">
-              <option>Open this select menu</option>
-              <option value="1">One</option>
-              <option value="2">Two</option>
-              <option value="3">Three</option>
-            </CFormSelect>
-            </CCol>
-            <CCol md="3">
-            <CFormSelect size="lg" class="mb-3" multiple aria-label="Multiple select example">
-              <option>Open this select menu</option>
-              <option value="1">One</option>
-              <option value="2">Two</option>
-              <option value="3">Three</option>
-            </CFormSelect>
-            </CCol>
-            <CCol md="3">
-            <CFormSelect htmlSize="3" class="mb-3" multiple aria-label="size 3 select example">
-              <option>Open this select menu</option>
-              <option value="1">One</option>
-              <option value="2">Two</option>
-              <option value="3">Three</option>
-            </CFormSelect>
-            </CCol>
-            <CCol md="3">
-            <CFormSelect aria-label="Disabled select example" class="mb-3" disabled>
-              <option>Open this select menu</option>
-              <option value="1">One</option>
-              <option value="2">Two</option>
-              <option value="3">Three</option>
-            </CFormSelect>
-            </CCol>
-            </CRow>
-          </Example>
-          <h4 class="mt-4">Checks</h4>
-          <Example href="forms/checks-radios.html#checks">
-            <CRow>
-            <CCol md="4">
-              <CFormCheck id="flexCheckDefault" label="Default checkbox"/>
-              <CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
-            </CCol>
-            <CCol md="4">
-              <CFormCheck label="Disabled checkbox" disabled/>
-              <CFormCheck label="Disabled checked checkbox" defaultChecked disabled/>
-            </CCol>
-            </CRow>
-          </Example>
-          <h4 class="mt-4">Radios</h4>
-          <Example href="forms/checks-radios.html#radios">
-            <CRow>
-            <CCol md="4">
-              <CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault1" label="Default radio"/>
-              <CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault2" label="Checked radio" defaultChecked/>
-            </CCol>
-            <CCol md="4">
-              <CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioDisabled" label="Disabled radio" disabled/>
-              <CFormCheck type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" label="Disabled checked radio" defaultChecked disabled/>
-            </CCol>
-            </CRow>
-          </Example>
-          <h4 class="mt-4">Switches</h4>
-          <Example href="forms/checks-radios.html#switches">
-            <CRow>
-            <CCol md="4">
-              <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
-              <CFormSwitch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultChecked/>
-              <CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/>
-              <CFormSwitch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" defaultChecked disabled/>
-            </CCol>
-            <CCol md="4">
-              <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
-              <CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg"/>
-              <CFormSwitch size="xl" label="Extra large switch checkbox input" id="formSwitchCheckDefaultXL"/>
-            </CCol>
-            </CRow>
-          </Example>
-          <h4 class="mt-4">Inline Checks and Radios</h4>
-          <Example href="forms/checks-radios.html#inline">
-            <CRow>
-            <CCol md="4">
-              <h5 class="mt-2 mb-2">Checks</h5>
-              <CFormCheck inline id="inlineCheckbox1" value="option1" label="1"/>
-              <CFormCheck inline id="inlineCheckbox2" value="option2" label="2"/>
-              <CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
-            </CCol>
-            <CCol md="4">
-              <h5 class="mt-2 mb-2">Radios</h5>
-              <CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox1" value="option1" label="1"/>
-              <CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox2" value="option2" label="2"/>
-              <CFormCheck inline type="radio" name="inlineRadioOptions" id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled/>
-            </CCol>
-            </CRow>
-          </Example>
-          <h4 class="mt-4">Toggle buttons</h4>
-          <Example href="forms/checks-radios.html#checkbox-toggle-buttons">
-            <CRow>
-            <CCol md="4">
-              <h5 class="mt-2 mb-2">Checkbox toggle buttons</h5>
-              <div class="mb-2">
-                <CFormCheck :button="{ color: 'primary' }" id="btn-check" autoComplete="off" label="Single toggle"/>
-              </div>
-              <div class="mb-2">
-                <CFormCheck :button="{ color: 'primary' }" id="btn-check-2" autoComplete="off" label="Checked" defaultChecked/>
-              </div>
-              <div class="mb-2">
-                <CFormCheck :button="{ color: 'primary' }" id="btn-check-3" autoComplete="off" label="Disabled" disabled/>
-              </div>
-            </CCol>
-            <CCol md="4">
-              <h5 class="mt-2 mb-2">Radio toggle buttons</h5>
-              <CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option1" autoComplete="off" label="Checked" defaultChecked/>
-              <CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option2" autoComplete="off" label="Radio"/>
-              <CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option3" autoComplete="off" label="Radio" disabled/>
-              <CFormCheck :button="{ color: 'secondary' }" type="radio" name="options" id="option4" autoComplete="off" label="Radio"/>
-            </CCol>
-            <CCol md="4">
-              <h5 class="mt-2 mb-2">Outlined styles</h5>
-              <div> 
-                <CFormCheck :button="{ color: 'primary', variant: 'outline' }" id="btn-check-outlined" autoComplete="off" label="Single toggle"/>
-              </div>
-              <div>
-                <CFormCheck :button="{ color: 'secondary', variant: 'outline' }" id="btn-check-2-outlined" autoComplete="off" label="Checked" defaultChecked/>
-              </div>
-              <div>
-                <CFormCheck :button="{ color: 'success', variant: 'outline' }" type="radio" name="options-outlined" id="success-outlined" autoComplete="off" label="Radio" defaultChecked/>
-                <CFormCheck :button="{ color: 'danger', variant: 'outline' }" type="radio" name="options-outlined" id="danger-outlined" autoComplete="off" label="Radio"/>
-              </div>
-            </CCol>
-            </CRow>
-          </Example>
-          <h4 class="mt-4">Range</h4>
-          <Example href="forms/range.html#overview">
-            <CRow>
-            <CCol md="6">
-              <CFormLabel for="customRange1">Example range</CFormLabel>
-              <CFormRange id="customRange1"/>
-            </CCol>
-            <CCol md="6">
-              <CFormLabel for="disabledRange">Disabled range</CFormLabel>
-              <CFormRange id="disabledRange" disabled/>
-            </CCol>
-            <CCol md="6">
-              <CFormLabel for="customRange2">Example range max="5"</CFormLabel>
-              <CFormRange min="0" max="5" defaultValue="3" id="customRange2"/> 
-            </CCol>
-            <CCol md="6">
-              <CFormLabel for="customRange3">Example range step="0.5"</CFormLabel>
-              <CFormRange min="0" max="5" step="0.5" defaultValue="3" id="customRange3"/> 
-            </CCol>
-            </CRow>
-          </Example>
-          <h4 class="mt-4">Floating labels</h4>
-          <Example href="forms/floating-labels.html#example">
-            <CRow>
-            <CCol md="6">
-              <h5 class="mt-2 mb-2">Input</h5>
-              <CFormFloating class="mb-3">
-                <CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
-                <CFormLabel for="floatingInput">Email address</CFormLabel>
-              </CFormFloating>
-              <CFormFloating>
-                <CFormInput type="password" id="floatingPassword" placeholder="Password" />
-                <CFormLabel for="exampleFormControlPassword">Password</CFormLabel>
-              </CFormFloating>
-            </CCol>
-            <CCol md="6">
-              <h5 class="mt-2 mb-2">Input with value</h5>
-              <CFormFloating>
-                <CFormInput
-                  type="email"
-                  id="floatingInputValue"
-                  placeholder="name@example.com"
-                  value="test@example.com"
-                />
-                <CFormLabel for="floatingInputValue">Input with value</CFormLabel>
-              </CFormFloating>
-            </CCol>
-            <CCol md="6">
-              <h5 class="mt-2 mb-2">Text areas</h5>
-              <CFormFloating>
-                <CFormTextarea
-                  id="floatingTextarea"
-                  placeholder="Leave a comment here"
-                ></CFormTextarea>
-                <CFormLabel for="floatingTextarea">Comments</CFormLabel>
-              </CFormFloating>
-            </CCol>
-            <CCol md="6">
-              <h5 class="mt-2 mb-2">Select</h5>
-              <CFormFloating>
-                <CFormSelect id="floatingSelect" aria-label="Floating label select example">
-                  <option>Open this select menu</option>
-                  <option value="1">One</option>
-                  <option value="2">Two</option>
-                  <option value="3">Three</option>
-                </CFormSelect>
-                <CFormLabel for="floatingSelect">Works with selects</CFormLabel>
-              </CFormFloating>
-            </CCol>
-            </CRow>
-          </Example>
-          <h4 class="mt-4">Vue input group (basic example)</h4>
-          <Example href="forms/input-group.html#basic-example">
-            <CInputGroup class="mb-3">
-              <CInputGroupText id="basic-addon1">@</CInputGroupText>
-              <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
-            </CInputGroup>
-            <CInputGroup class="mb-3">
-              <CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
-              <CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
-            </CInputGroup>
-            <CFormLabel for="basic-url">Your vanity URL</CFormLabel>
-            <CInputGroup class="mb-3">
-              <CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
-              <CFormInput id="basic-url" aria-describedby="basic-addon3"/>
-            </CInputGroup>
-            <CInputGroup class="mb-3">
-              <CInputGroupText>$</CInputGroupText>
-              <CFormInput aria-label="Amount (to the nearest dollar)"/>
-              <CInputGroupText>.00</CInputGroupText>
-            </CInputGroup>
-            <CInputGroup class="mb-3">
-              <CFormInput placeholder="Username" aria-label="Username"/>
-              <CInputGroupText>@</CInputGroupText>
-              <CFormInput placeholder="Server" aria-label="Server"/>
-            </CInputGroup>
-            <CInputGroup>
-              <CInputGroupText>With textarea</CInputGroupText>
-              <CFormTextarea aria-label="With textarea"></CFormTextarea>
-            </CInputGroup>
-          </Example>
-
-          <CRow>
-          <CCol md="6">
-          <h4 class="mt-4">Input group sizing</h4>
-          <Example href="forms/input-group.html#sizing">
-            <CInputGroup size="sm" class="mb-3">
-              <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
-              <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"/>
-            </CInputGroup>
-            <CInputGroup class="mb-3">
-              <CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
-              <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"/>
-            </CInputGroup>
-            <CInputGroup size="lg">
-              <CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
-              <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"/>
-            </CInputGroup>
-          </Example>
-          </CCol>
-          <CCol md="6">
-            <h4 class="mt-4">Checkboxes and radios</h4>
-            <Example href="forms/input-group.html#checkboxes-and-radios">
-              <CInputGroup class="mb-3">
-                <CInputGroupText>
-                  <CFormCheck type="checkbox" value="" aria-label="Checkbox for following text input"/>
-                </CInputGroupText>
-                <CFormInput aria-label="Text input with checkbox"/>
-              </CInputGroup>
-              <CInputGroup>
-                <CInputGroupText>
-                  <CFormCheck type="radio" value="" aria-label="Radio button for following text input"/>
-                </CInputGroupText>
-                <CFormInput aria-label="Text input with radio button"/>
-              </CInputGroup>
-            </Example> 
-          </CCol>
-          <CCol md="6">
-            <h4 class="mt-4">Multiple inputs</h4>
-            <Example href="forms/input-group.html#multiple-inputs">
-              <CInputGroup>
-                <CInputGroupText>First and last name</CInputGroupText>
-                <CFormInput aria-label="First name"/>
-                <CFormInput aria-label="Last name"/>
-              </CInputGroup>
-            </Example> 
-          </CCol>
-          <CCol md="6">
-
-            <h4 class="mt-4">Multiple addons</h4>
-            <Example href="forms/input-group.html#multiple-addons">
-              <CInputGroup class="mb-3">
-                <CInputGroupText>$</CInputGroupText>
-                <CInputGroupText>0.00</CInputGroupText>
-                <CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
-              </CInputGroup>
-              <CInputGroup>
-                <CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
-                <CInputGroupText>$</CInputGroupText>
-                <CInputGroupText>0.00</CInputGroupText>
-              </CInputGroup>
-            </Example> 
-
-          </CCol>
-          <CCol md="6">
-
-            <h4 class="mt-4">Button addons</h4>
-            <Example href="forms/input-group.html#button-addons">
-              <CInputGroup class="mb-3">
-                <CButton type="button" color="secondary" variant="outline" id="button-addon1">Button</CButton>
-                <CFormInput placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1"/>
-              </CInputGroup>
-              <CInputGroup class="mb-3">
-                <CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2"/>
-                <CButton type="button" color="secondary" variant="outline" id="button-addon2">Button</CButton>
-              </CInputGroup>
-              <CInputGroup class="mb-3">
-                <CButton type="button" color="secondary" variant="outline">Button</CButton>
-                <CButton type="button" color="secondary" variant="outline">Button</CButton>
-                <CFormInput placeholder="" aria-label="Example text with two button addons"/>
-              </CInputGroup>
-              <CInputGroup>
-                <CFormInput placeholder="Recipient's username" aria-label="Recipient's username with two button addons"/>
-                <CButton type="button" color="secondary" variant="outline">Button</CButton>
-                <CButton type="button" color="secondary" variant="outline">Button</CButton>
-              </CInputGroup>
-
-            </Example> 
-
-          </CCol>
-          <CCol md="6">
-
-            <h4 class="mt-4">Buttons with dropdowns</h4>
-            <Example href="forms/input-group.html#buttons-with-dropdowns">
-              <CInputGroup class="mb-3">
-                <CDropdown variant="input-group"> 
-                  <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider/>
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-                <CFormInput aria-label="Text input with dropdown button"/>
-              </CInputGroup>
-              <CInputGroup class="mb-3">
-                <CFormInput aria-label="Text input with dropdown button"/>
-                <CDropdown alignment="end" variant="input-group">
-                  <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider/>
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-              </CInputGroup>
-              <CInputGroup>
-                <CDropdown variant="input-group">
-                  <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider/>
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-                <CFormInput aria-label="Text input with 2 dropdown buttons"/>
-                <CDropdown alignment="end" variant="input-group">
-                  <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider/>
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-              </CInputGroup>
-
-            </Example> 
-
-          </CCol>
-          <CCol md="6">
-            <h4 class="mt-4">Segmented buttons</h4>
-            <Example href="forms/input-group.html#segmented-buttons">
-              <CInputGroup class="mb-3">
-                <CDropdown variant="input-group">
-                  <CButton type="button" color="secondary" variant="outline">Action</CButton>
-                  <CDropdownToggle color="secondary" variant="outline" split/>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider/>
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-                <CFormInput aria-label="Text input with segmented dropdown button"/>
-              </CInputGroup>
-              <CInputGroup>
-                <CFormInput aria-label="Text input with segmented dropdown button"/>
-                <CDropdown alignment="end" variant="input-group">
-                  <CButton type="button" color="secondary" variant="outline">Action</CButton>
-                  <CDropdownToggle color="secondary" variant="outline" split/>
-                  <CDropdownMenu>
-                    <CDropdownItem href="#">Action</CDropdownItem>
-                    <CDropdownItem href="#">Another action</CDropdownItem>
-                    <CDropdownItem href="#">Something else here</CDropdownItem>
-                    <CDropdownDivider/>
-                    <CDropdownItem href="#">Separated link</CDropdownItem>
-                  </CDropdownMenu>
-                </CDropdown>
-              </CInputGroup>
-            </Example> 
-          </CCol>
-          <CCol md="6">
-            <h4 class="mt-4">Custom select</h4>
-            <Example href="forms/input-group.html#custom-select">
-              <CInputGroup class="mb-3">
-                <CInputGroupText component="label" for="inputGroupSelect01">Options</CInputGroupText>
-                <CFormSelect id="inputGroupSelect01">
-                  <option>Choose...</option>
-                  <option value="1">One</option>
-                  <option value="2">Two</option>
-                  <option value="3">Three</option>
-                </CFormSelect>
-              </CInputGroup>
-              <CInputGroup class="mb-3">
-                <CFormSelect id="inputGroupSelect02">
-                  <option>Choose...</option>
-                  <option value="1">One</option>
-                  <option value="2">Two</option>
-                  <option value="3">Three</option>
-                </CFormSelect>
-                <CInputGroupText component="label" for="inputGroupSelect02">Options</CInputGroupText>
-              </CInputGroup>
-              <CInputGroup class="mb-3">
-                <CButton type="button" color="secondary" variant="outline">Button</CButton>
-                <CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
-                  <option>Choose...</option>
-                  <option value="1">One</option>
-                  <option value="2">Two</option>
-                  <option value="3">Three</option>
-                </CFormSelect>
-              </CInputGroup>
-              <CInputGroup>
-                <CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
-                  <option>Choose...</option>
-                  <option value="1">One</option>
-                  <option value="2">Two</option>
-                  <option value="3">Three</option>
-                </CFormSelect>
-                <CButton type="button" color="secondary" variant="outline">Button</CButton>
-              </CInputGroup>
-            </Example> 
-          </CCol>
-          <CCol md="6">
-            <h4 class="mt-4">Custom file input</h4>
-            <Example href="forms/input-group.html#custom-file-input">
-              <CInputGroup class="mb-3">
-                <CInputGroupText component="label" for="inputGroupFile01">Upload</CInputGroupText>
-                <CFormInput type="file" id="inputGroupFile01"/>
-              </CInputGroup>
-              <CInputGroup class="mb-3">
-                <CFormInput type="file" id="inputGroupFile02"/>
-                <CInputGroupText component="label" for="inputGroupFile02">Upload</CInputGroupText>
-              </CInputGroup>
-              <CInputGroup class="mb-3">
-                <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon03">Button</CButton>
-                <CFormInput type="file" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload"/>
-              </CInputGroup>
-              <CInputGroup>
-                <CFormInput type="file" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload"/>
-                <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon04">Button</CButton>
-              </CInputGroup>
-            </Example> 
-          </CCol>
-          </CRow>
-          <CRow>
-          <CCol md="8">
-            <h4 class="mt-4">Horizonstal form</h4>
-            <Example href="forms/layout.html#horizontal-form">
-              <CForm>
-                <CRow class="mb-3">
-                  <CFormLabel for="inputEmail3" class="col-sm-2 col-form-label">Email</CFormLabel>
-                  <CCol sm="10">
-                    <CFormInput type="email" id="inputEmail3"/>
-                  </CCol>
-                </CRow>
-                <CRow class="mb-3">
-                  <CFormLabel for="inputPassword3" class="col-sm-2 col-form-label">Password</CFormLabel>
-                  <CCol sm="10">
-                    <CFormInput type="password" id="inputPassword3"/>
-                  </CCol>
-                </CRow>
-                <fieldset class="row mb-3">
-                  <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
-                  <CCol sm="10">
-                    <CFormCheck type="radio" name="gridRadios" id="gridRadios1" value="option1" label="First radio" defaultChecked/>
-                    <CFormCheck type="radio" name="gridRadios" id="gridRadios2" value="option2" label="Second radio"/>
-                    <CFormCheck type="radio" name="gridRadios" id="gridRadios3" value="option3" label="Third disabled radio" disabled/>
-                  </CCol>
-                </fieldset>
-                <CRow class="mb-3">
-                  <div class="col-sm-10 offset-sm-2">
-                    <CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox"/>
-                  </div>
-                </CRow>
-                <CButton type="submit">Sign in</CButton>
-              </CForm>
-            </Example>
-
-          </CCol>
-          </CRow>
-            <h4 class="mt-4">Vue form validation custom styles</h4>
-            <Example href="forms/validation.html#custom-styles">
-            <CForm class="row g-3 needs-validation" noValidate :validated="validatedCustom01" @submit="handleSubmitCustom01">
-              <CCol md="4">
-                <CFormLabel for="validationCustom01">Email</CFormLabel>
-                <CFormInput id="validationCustom01" defaultValue="Mark" required/>
-                <CFormFeedback valid>
-                  Looks good!
-                </CFormFeedback>
-              </CCol>
-              <CCol md="4">
-                <CFormLabel for="validationCustom02">Email</CFormLabel>
-                <CFormInput id="validationCustom02" defaultValue="Otto" required/>
-                <CFormFeedback valid>
-                  Looks good!
-                </CFormFeedback>
-              </CCol>
-              <CCol md="4">
-                <CFormLabel for="validationCustomUsername">Username</CFormLabel>
-                <CInputGroup class="has-validation">
-                  <CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
-                  <CFormInput id="validationCustomUsername" defaultValue="" aria-describedby="inputGroupPrepend" required/>
-                  <CFormFeedback invalid>
-                  Please choose a username.
-                  </CFormFeedback>
-                </CInputGroup>
-              </CCol>
-              <CCol md="6">
-                <CFormLabel for="validationCustom03">City</CFormLabel>
-                <CFormInput id="validationCustom03" required/>
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
-              </CCol>
-              <CCol md="3">
-                <CFormLabel for="validationCustom04">City</CFormLabel>
-                <CFormSelect id="validationCustom04">
-                  <option disabled>Choose...</option>
-                  <option>...</option>
-                </CFormSelect>
-                <CFormFeedback invalid>
-                  Please provide a valid city.
-                </CFormFeedback>
-              </CCol>
-              <CCol md="3">
-                <CFormLabel for="validationCustom05">City</CFormLabel>
-                <CFormInput id="validationCustom05" required/>
-                <CFormFeedback invalid>
-                  Please provide a valid zip.
-                </CFormFeedback>
-              </CCol>
-              <CCol xs="12">
-                <CFormCheck type="checkbox" id="invalidCheck" label="Agree to terms and conditions" required/>
-                <CFormFeedback invalid>
-                  You must agree before submitting.
-                </CFormFeedback>
-              </CCol>
-              <CCol xs="12">
-                <CButton color="primary" type="submit">Submit form</CButton>
-              </CCol>
-            </CForm>
-            </Example>
-
-            <h4 class="mt-4">Vue form validation browser defaults</h4>
-            <Example href="forms/validation.html#browser-defaults">
-              <CForm class="row g-3 needs-validation" :validated="validatedDefault01" @submit="handleSubmitDefault01">
-                <CCol md="4">
-                  <CFormLabel for="validationDefault01">Email</CFormLabel>
-                  <CFormInput id="validationDefault01" defaultValue="Mark" required/>
-                  <CFormFeedback valid>
-                    Looks good!
-                  </CFormFeedback>
-                </CCol>
-                <CCol md="4">
-                  <CFormLabel for="validationDefault02">Email</CFormLabel>
-                  <CFormInput id="validationDefault02" defaultValue="Otto" required/>
-                  <CFormFeedback valid>
-                    Looks good!
-                  </CFormFeedback>
-                </CCol>
-                <CCol md="4">
-                  <CFormLabel for="validationDefaultUsername">Username</CFormLabel>
-                  <CInputGroup class="has-validation">
-                    <CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
-                    <CFormInput id="validationDefaultUsername" defaultValue="" aria-describedby="inputGroupPrepend02" required/>
-                    <CFormFeedback invalid>
-                    Please choose a username.
-                    </CFormFeedback>
-                  </CInputGroup>
-                </CCol>
-                <CCol md="6">
-                  <CFormLabel for="validationDefault03">City</CFormLabel>
-                  <CFormInput id="validationDefault03" required/>
-                  <CFormFeedback invalid>
-                    Please provide a valid city.
-                  </CFormFeedback>
-                </CCol>
-                <CCol md="3">
-                  <CFormLabel for="validationDefault04">City</CFormLabel>
-                  <CFormSelect id="validationDefault04">
-                    <option disabled>Choose...</option>
-                    <option>...</option>
-                  </CFormSelect>
-                  <CFormFeedback invalid>
-                    Please provide a valid city.
-                  </CFormFeedback>
-                </CCol>
-                <CCol md="3">
-                  <CFormLabel for="validationDefault05">City</CFormLabel>
-                  <CFormInput id="validationDefault05" required/>
-                  <CFormFeedback invalid>
-                    Please provide a valid zip.
-                  </CFormFeedback>
-                </CCol>
-                <CCol xs="12">
-                  <CFormCheck type="checkbox" id="invalidCheck" label="Agree to terms and conditions" required/>
-                  <CFormFeedback invalid>
-                    You must agree before submitting.
-                  </CFormFeedback>
-                </CCol>
-                <CCol xs="12">
-                  <CButton color="primary" type="submit">Submit form</CButton>
-                </CCol>
-              </CForm>
-            </Example>
-
-
-
-            <h4 class="mt-4">Validation styles for components</h4>
-            <Example href="forms/validation.html#supported-elements">
-              <CForm :validated="true">
-                <div class="mb-3">
-                  <CFormLabel for="validationTextarea" class="form-label">Textarea</CFormLabel>
-                  <CFormTextarea id="validationTextarea" placeholder="Required example textarea" invalid required></CFormTextarea>
-                  <CFormFeedback invalid>
-                    Please enter a message in the textarea.
-                  </CFormFeedback>
-                </div>
-                <CFormCheck class="mb-3" id="validationFormCheck1" label="Check this checkbox" required/>
-                <CFormFeedback invalid>Example invalid feedback text</CFormFeedback>
-                <CFormCheck type="radio" name="radio-stacked" id="validationFormCheck2" label="Check this checkbox" required/>
-                <CFormCheck class="mb-3" type="radio" name="radio-stacked" id="validationFormCheck3" label="Or toggle this other radio" required/>
-                <CFormFeedback invalid>More example invalid feedback text</CFormFeedback>
-                <div class="mb-3">
-                  <CFormSelect required aria-label="select example">
-                    <option>Open this select menu</option>
-                    <option value="1">One</option>
-                    <option value="2">Two</option>
-                    <option value="3">Three</option>
-                  </CFormSelect>
-                  <CFormFeedback invalid>Example invalid select feedback</CFormFeedback>
-                </div>
-                <div class="mb-3">
-                  <CFormInput type="file" id="validationTextarea" aria-label="file example" required />
-                  <CFormFeedback invalid>Example invalid form file feedback</CFormFeedback>
-                </div>
-                <div class="mb-3">
-                  <CButton type="submit" color="primary" disabled>Submit form</CButton>
-                </div>
-              </CForm>
-            </Example>
-        </CCardBody>
-      </CCard>
-    </CCol>
-  </CRow>
-</template>
-
-<script>
-export default {
-  name: "Forms",
-    data: () => {
-      return {
-        validatedCustom01: null,
-        validatedDefault01: null,
-        validatedTooltip01: null,
-      }
-    },
-    methods: {
-      handleSubmitCustom01(event) {
-        const form = event.currentTarget
-        if (form.checkValidity() === false) {
-          event.preventDefault()
-          event.stopPropagation()
-        }
-        this.validatedCustom01 = true
-      },
-      handleSubmitDefault01(event) {
-        const form = event.currentTarget
-        if (form.checkValidity() === false) {
-          event.preventDefault()
-          event.stopPropagation()
-        }
-        this.validatedDefault01 = true
-      },
-    }
-};
-</script>

src/views/base/ListGroups.vue

@@ -14,7 +14,7 @@
             proper CSS classes. Build upon it with the options that follow, or
             with your CSS as required.
           </p>
-          <Example href="components/list-group">
+          <DocsExample href="components/list-group">
             <CListGroup>
               <CListGroupItem>Cras justo odio</CListGroupItem>
               <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -22,7 +22,7 @@
               <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
               <CListGroupItem>Vestibulum at eros</CListGroupItem>
             </CListGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -37,7 +37,7 @@
             <code>&lt;CListGroupItem&gt;</code> to show the current active
             selection.
           </p>
-          <Example href="components/list-group/#active-items">
+          <DocsExample href="components/list-group/#active-items">
             <CListGroup>
               <CListGroupItem active>Cras justo odio</CListGroupItem>
               <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -45,7 +45,7 @@
               <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
               <CListGroupItem>Vestibulum at eros</CListGroupItem>
             </CListGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -59,7 +59,7 @@
             Add <code>disabled</code> boolean property to a
             <code>&lt;CListGroupItem&gt;</code> to make it appear disabled.
           </p>
-          <Example href="components/list-group/#disabled-items">
+          <DocsExample href="components/list-group/#disabled-items">
             <CListGroup>
               <CListGroupItem disabled>Cras justo odio</CListGroupItem>
               <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -67,7 +67,7 @@
               <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
               <CListGroupItem>Vestibulum at eros</CListGroupItem>
             </CListGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -87,7 +87,7 @@
             <code>&lt;div&gt;</code>
             s) don&#39;tprovide a click or tap affordance.
           </p>
-          <Example href="components/list-group/#links-and-buttons">
+          <DocsExample href="components/list-group/#links-and-buttons">
             <CListGroup>
               <CListGroupItem component="a" href="#" active>
                 Cras justo odio
@@ -105,7 +105,7 @@
                 Vestibulum at eros
               </CListGroupItem>
             </CListGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -120,7 +120,7 @@
             rounded corners to render list group items edge-to-edge in a parent
             container (e.g., cards).
           </p>
-          <Example href="components/list-group/#flush">
+          <DocsExample href="components/list-group/#flush">
             <CListGroup flush>
               <CListGroupItem>Cras justo odio</CListGroupItem>
               <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -128,7 +128,7 @@
               <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
               <CListGroupItem>Vestibulum at eros</CListGroupItem>
             </CListGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -153,7 +153,7 @@
               groups.</strong
             >
           </p>
-          <Example href="components/list-group/#flush">
+          <DocsExample href="components/list-group/#flush">
             <template
               v-for="item in ['', '-sm', '-md', '-lg', '-xl', '-xxl']"
               :key="item"
@@ -164,7 +164,7 @@
                 <CListGroupItem>Morbi leo risus</CListGroupItem>
               </CListGroup>
             </template>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -178,7 +178,7 @@
             Use contextual classes to style list items with a stateful
             background and color.
           </p>
-          <Example href="components/list-group/#contextual-classes">
+          <DocsExample href="components/list-group/#contextual-classes">
             <CListGroup>
               <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
               <CListGroupItem
@@ -197,7 +197,7 @@
                 >A simple {{ item }} list group item</CListGroupItem
               >
             </CListGroup>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             Contextual classes also work with <code>&lt;a&gt;</code>s or
             <code>&lt;button&gt;</code>s. Note the addition of the hover styles
@@ -205,7 +205,7 @@
             <code>active</code> state; apply it to indicate an active selection
             on a contextual list group item.
           </p>
-          <Example href="components/list-group/#contextual-classes">
+          <DocsExample href="components/list-group/#contextual-classes">
             <CListGroup>
               <CListGroupItem component="a" href="#"
                 >Dapibus ac facilisis in</CListGroupItem
@@ -228,7 +228,7 @@
                 >A simple {{ item }} list group item</CListGroupItem
               >
             </CListGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -242,7 +242,7 @@
             Add badges to any list group item to show unread counts, activity,
             and more.
           </p>
-          <Example href="components/list-group/#with-badges">
+          <DocsExample href="components/list-group/#with-badges">
             <CListGroup>
               <CListGroupItem
                 class="d-flex justify-content-between align-items-center"
@@ -263,7 +263,7 @@
                 <CBadge color="primary" shape="rounded-pill"> 1 </CBadge>
               </CListGroupItem>
             </CListGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -280,7 +280,7 @@
               >flexbox utilities</a
             >.
           </p>
-          <Example href="components/list-group/#custom-content">
+          <DocsExample href="components/list-group/#custom-content">
             <CListGroup>
               <CListGroupItem component="a" href="#" active>
                 <div class="d-flex w-100 justify-content-between">
@@ -320,7 +320,7 @@
                 >
               </CListGroupItem>
             </CListGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -334,7 +334,7 @@
             Place CoreUI&#39;s checkboxes and radios within list group items and
             customize as needed.
           </p>
-          <Example href="components/list-group/#checkboxes-and-radios">
+          <DocsExample href="components/list-group/#checkboxes-and-radios">
             <CListGroup>
               <CListGroupItem>
                 <CFormCheck label="Cras justo odio" />
@@ -352,7 +352,7 @@
                 <CFormCheck label="Vestibulum at eros" />
               </CListGroupItem>
             </CListGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/base/Navbars.vue

@@ -8,7 +8,7 @@
         <CCardBody>
 
             <h4 class="mt-4">Basic usage of navbar</h4>
-            <Example href="components/navbar.html#basic-usage">
+            <DocsExample href="components/navbar.html#basic-usage">
                 <CNavbar expand="lg" colorScheme="light" class="bg-light">
                     <CContainer fluid>
                         <CNavbarBrand href="#">Navbar</CNavbarBrand>
@@ -45,30 +45,30 @@
                         </CCollapse>
                     </CContainer>
                 </CNavbar>
-            </Example>
+            </DocsExample>
 
             <h4 class="mt-4">Vue nav brand</h4>
             <CRow>
             <CCol md="6">
-            <Example href="components/navbar.html#brand">
+            <DocsExample href="components/navbar.html#brand">
                 <CNavbar colorScheme="light" class="bg-light">
                     <CContainer fluid>
                         <CNavbarBrand href="#">Brand as link</CNavbarBrand>
                     </CContainer>
                 </CNavbar>
-            </Example>
+            </DocsExample>
             </CCol>
             <CCol md="6">
-            <Example href="components/navbar.html#brand">
+            <DocsExample href="components/navbar.html#brand">
                 <CNavbar colorScheme="light" class="bg-light">
                     <CContainer fluid>
                         <CNavbarBrand class="mb-0 h1">Brand</CNavbarBrand>
                     </CContainer>
                 </CNavbar>
-            </Example>
+            </DocsExample>
             </CCol>
             <CCol md="6">
-            <Example href="components/navbar.html#brand">
+            <DocsExample href="components/navbar.html#brand">
                 <CNavbar colorScheme="light" class="bg-light">
                     <CContainer fluid>
                         <CNavbarBrand href="#">
@@ -76,10 +76,10 @@
                         </CNavbarBrand>
                     </CContainer>
                 </CNavbar>
-            </Example>
+            </DocsExample>
             </CCol>
             <CCol md="6">
-            <Example href="components/navbar.html#brand">
+            <DocsExample href="components/navbar.html#brand">
                 <CNavbar colorScheme="light" class="bg-light">
                     <CContainer fluid>
                         <CNavbarBrand href="#">
@@ -87,12 +87,12 @@
                         </CNavbarBrand>
                     </CContainer>
                 </CNavbar>
-            </Example>
+            </DocsExample>
             </CCol>
             </CRow>
 
             <h4 class="mt-4">Vue navbar with nav</h4>
-            <Example href="components/navbar.html#nav">
+            <DocsExample href="components/navbar.html#nav">
                 <CNavbar expand="lg" colorScheme="light" class="bg-light">
                     <CContainer fluid>
                         <CNavbarBrand href="#">Navbar</CNavbarBrand>
@@ -123,10 +123,10 @@
                         </CCollapse>
                     </CContainer>
                 </CNavbar>
-            </Example>
+            </DocsExample>
 
             <h4 class="mt-4">Vue navbar with form</h4>
-            <Example href="components/navbar.html#forms">
+            <DocsExample href="components/navbar.html#forms">
                 <CNavbar colorScheme="light" class="bg-light">
                     <CContainer fluid>
                         <CForm class="d-flex">
@@ -135,9 +135,9 @@
                         </CForm>
                     </CContainer>
                 </CNavbar>
-            </Example>
+            </DocsExample>
             <h4 class="mt-4">Vue navbar with form on right side</h4>
-            <Example href="components/navbar.html#forms">
+            <DocsExample href="components/navbar.html#forms">
                 <CNavbar colorScheme="light" class="bg-light">
                     <CContainer fluid>
                         <CNavbarBrand href="#">Navbar</CNavbarBrand>
@@ -148,9 +148,9 @@
                     </CContainer>
                 </CNavbar>
 
-            </Example>
+            </DocsExample>
             <h4 class="mt-4">Vue navbar with input group</h4>
-            <Example href="components/navbar.html#forms">
+            <DocsExample href="components/navbar.html#forms">
                 <CNavbar colorScheme="light" class="bg-light">
                     <CForm class="container-fluid">
                         <CInputGroup>
@@ -159,29 +159,29 @@
                         </CInputGroup>
                     </CForm>
                 </CNavbar>
-            </Example>
+            </DocsExample>
 
             <h4 class="mt-4">Vue navbar with buttons</h4>
-            <Example href="components/navbar.html#forms">
+            <DocsExample href="components/navbar.html#forms">
                 <CNavbar colorScheme="light" class="bg-light">
                     <CForm class="container-fluid justify-content-start">
                         <CButton type="button" color="success" variant="outline" class="me-2">Main button</CButton>
                         <CButton type="button" color="secondary" variant="outline" size="sm">Smaller button</CButton>
                     </CForm>
                 </CNavbar>
-            </Example>
+            </DocsExample>
 
             <h4 class="mt-4">Vue navbar with text</h4>
-            <Example href="components/navbar.html#forms">
+            <DocsExample href="components/navbar.html#forms">
                 <CNavbar colorScheme="light" class="bg-light">
                     <CContainer fluid>
                         <CNavbarText>Navbar text with an inline element</CNavbarText>
                     </CContainer>
                 </CNavbar>
-            </Example>
+            </DocsExample>
 
             <h4 class="mt-4">Vue navbar color schemes</h4>
-            <Example href="components/navbar.html#color-schemes">
+            <DocsExample href="components/navbar.html#color-schemes">
                 <CNavbar expand="lg" colorScheme="dark" class="bg-dark">
                     <CContainer fluid>
                         <CNavbarBrand href="#">Navbar</CNavbarBrand>
@@ -292,51 +292,51 @@
                         </CCollapse>
                     </CContainer>
                 </CNavbar>
-            </Example>
+            </DocsExample>
 
             <h4 class="mt-4">Vue navbar placement</h4>
             <CRow>
             <CCol md="6">
-            <Example href="components/navbar.html#placement">
+            <DocsExample href="components/navbar.html#placement">
                 <CNavbar colorScheme="light" class="bg-light">
                     <CContainer fluid>
                         <CNavbarBrand href="#">Default</CNavbarBrand>
                     </CContainer>
                 </CNavbar>
-            </Example>
+            </DocsExample>
             </CCol>
             <CCol md="6">
-            <Example href="components/navbar.html#placement">
+            <DocsExample href="components/navbar.html#placement">
                 <CNavbar colorScheme="light" class="bg-light" placement="fixed-top">
                     <CContainer fluid>
                         <CNavbarBrand href="#">Fixed top</CNavbarBrand>
                     </CContainer>
                 </CNavbar>
-            </Example>
+            </DocsExample>
             </CCol>
             <CCol md="6">
-            <Example href="components/navbar.html#placement">
+            <DocsExample href="components/navbar.html#placement">
                 <CNavbar colorScheme="light" class="bg-light" placement="fixed-bottom">
                     <CContainer fluid>
                         <CNavbarBrand href="#">Fixed bottom</CNavbarBrand>
                     </CContainer>
                 </CNavbar>
-            </Example>
+            </DocsExample>
             </CCol>
             <CCol md="6">
-            <Example href="components/navbar.html#placement">
+            <DocsExample href="components/navbar.html#placement">
                 <CNavbar colorScheme="light" class="bg-light" placement="sticky-top">
                     <CContainer fluid>
                         <CNavbarBrand href="#">Sticky top</CNavbarBrand>
                     </CContainer>
                 </CNavbar>
-            </Example>
+            </DocsExample>
             </CCol>
             </CRow>
 
             <h4 class="mt-4">Vue navbar responsive</h4>
             <p>With no CNavbarBrand shown at the smallest breakpoint:</p>
-            <Example href="components/navbar.html#forms">
+            <DocsExample href="components/navbar.html#forms">
                 <CNavbar expand="lg" colorScheme="light" class="bg-light">
                     <CContainer fluid>
                         <CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
@@ -364,9 +364,9 @@
                         </CCollapse>
                     </CContainer>
                 </CNavbar>
-            </Example>
+            </DocsExample>
             <p>With a brand name shown on the left and toggler on the right:</p>
-            <Example href="components/navbar.html#forms">
+            <DocsExample href="components/navbar.html#forms">
                 <CNavbar expand="lg" colorScheme="light" class="bg-light">
                     <CContainer fluid>
                         <CNavbarBrand href="#">Navbar</CNavbarBrand>
@@ -394,10 +394,10 @@
                         </CCollapse>
                     </CContainer>
                 </CNavbar>
-            </Example>
+            </DocsExample>
 
             <p>With a toggler on the left and brand name on the right:</p>
-            <Example href="components/navbar.html#forms">
+            <DocsExample href="components/navbar.html#forms">
                 <CNavbar expand="lg" colorScheme="light" class="bg-light">
                     <CContainer fluid>
                         <CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
@@ -425,7 +425,7 @@
                         </CCollapse>
                     </CContainer>
                 </CNavbar>
-            </Example>
+            </DocsExample>
 
         </CCardBody>
       </CCard>

src/views/base/Navs.vue

@@ -15,7 +15,7 @@
               overrides (for working with lists), some link padding for larger hit areas, and basic
               disabled styling.
             </p>
-            <Example href="components/nav#base-nav">
+            <DocsExample href="components/nav#base-nav">
               <CNav>
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -34,7 +34,7 @@
                   </CNavLink>
                 </CNavItem>
               </CNav>
-            </Example>
+            </DocsExample>
             <p class="text-medium-emphasis small">
               Classes are used throughout, so your markup can be super flexible. Use{' '}
               <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your
@@ -42,7 +42,7 @@
               the .nav uses display: flex, the nav links behave the same as nav items would, but
               without the extra markup.
             </p>
-            <Example href="components/nav#base-nav">
+            <DocsExample href="components/nav#base-nav">
               <CNav component="nav">
                 <CNavLink href="#" active>
                   Active
@@ -53,7 +53,7 @@
                   Disabled
                 </CNavLink>
               </CNav>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -74,7 +74,7 @@
             <p class="text-medium-emphasis small">
               Centered with <code>.justify-content-center</code>:
             </p>
-            <Example href="components/nav#horizontal-alignment">
+            <DocsExample href="components/nav#horizontal-alignment">
               <CNav class="justify-content-center">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -93,11 +93,11 @@
                   </CNavLink>
                 </CNavItem>
               </CNav>
-            </Example>
+            </DocsExample>
             <p class="text-medium-emphasis small">
               Right-aligned with <code>.justify-content-end</code>:
             </p>
-            <Example href="components/nav#base-nav">
+            <DocsExample href="components/nav#base-nav">
               <CNav class="justify-content-end">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -116,7 +116,7 @@
                   </CNavLink>
                 </CNavItem>
               </CNav>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -131,7 +131,7 @@
               <code>.flex-column</code> utility. Need to stack them on some viewports but not
               others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
             </p>
-            <Example href="components/nav#vertical">
+            <DocsExample href="components/nav#vertical">
               <CNav class="flex-column">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -150,7 +150,7 @@
                   </CNavLink>
                 </CNavItem>
               </CNav>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -164,7 +164,7 @@
               Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
               to generate a tabbed interface
             </p>
-            <Example href="components/nav#tabs">
+            <DocsExample href="components/nav#tabs">
               <CNav variant="tabs">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -183,7 +183,7 @@
                   </CNavLink>
                 </CNavItem>
               </CNav>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -196,7 +196,7 @@
             <p class="text-medium-emphasis small">
               Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
             </p>
-            <Example href="components/nav#pills">
+            <DocsExample href="components/nav#pills">
               <CNav variant="pills">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -215,7 +215,7 @@
                   </CNavLink>
                 </CNavItem>
               </CNav>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -231,7 +231,7 @@
               <code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
               horizontal space is occupied, but not every nav item has the same width.
             </p>
-            <Example href="components/nav#fill-and-justify">
+            <DocsExample href="components/nav#fill-and-justify">
               <CNav variant="pills" layout="fill">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -250,13 +250,13 @@
                   </CNavLink>
                 </CNavItem>
               </CNav>
-            </Example>
+            </DocsExample>
             <p class="text-medium-emphasis small">
               For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal
               space will be occupied by nav links, but unlike the .nav-fill above, every nav item
               will be the same width.
             </p>
-            <Example href="components/nav#fill-and-justify">
+            <DocsExample href="components/nav#fill-and-justify">
               <CNav variant="pills" layout="justified">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -275,7 +275,7 @@
                   </CNavLink>
                 </CNavItem>
               </CNav>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -292,7 +292,7 @@
               the example below, our nav will be stacked on the lowest breakpoint, then adapt to a
               horizontal layout that fills the available width starting from the small breakpoint.
             </p>
-            <Example href="components/nav#working-with-flex-utilities">
+            <DocsExample href="components/nav#working-with-flex-utilities">
               <CNav component="nav" variant="pills" class="flex-column flex-sm-row">
                 <CNavLink href="#" active>
                   Active
@@ -303,7 +303,7 @@
                   Disabled
                 </CNavLink>
               </CNav>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -313,7 +313,7 @@
             <strong>Vue Navs</strong> <small>Tabs with dropdowns</small>
           </CCardHeader>
           <CCardBody>
-            <Example href="components/nav#tabs-with-dropdowns">
+            <DocsExample href="components/nav#tabs-with-dropdowns">
               <CNav>
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -337,7 +337,7 @@
                   </CNavLink>
                 </CNavItem>
               </CNav>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -347,7 +347,7 @@
             <strong>Vue Navs</strong> <small>Pills with dropdowns</small>
           </CCardHeader>
           <CCardBody>
-            <Example href="components/nav#pills-with-dropdowns">
+            <DocsExample href="components/nav#pills-with-dropdowns">
               <CNav variant="pills">
                 <CNavItem>
                   <CNavLink href="#" active>
@@ -371,7 +371,7 @@
                   </CNavLink>
                 </CNavItem>
               </CNav>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>

src/views/base/Popovers.vue

@@ -1,12 +1,15 @@
 <template>
   <CRow>
+    <CCol :xs="12">
+      <DocsCallout name="Popover" href="components/breadcrumb" />
+    </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Popovers</strong> <small>Basic example</small>
         </CCardHeader>
         <CCardBody>
-          <Example href="directives/popover.html#example">
+          <DocsExample href="directives/popover.html#example">
             <CButton
               color="danger"
               size="lg"
@@ -19,7 +22,7 @@
             >
               Click to toggle popover
             </CButton>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -33,7 +36,7 @@
             Four options are available: top, right, bottom, and left aligned.
             Directions are mirrored when using CoreUI for Vue in RTL.
           </p>
-          <Example href="directives/popover.html#four-directions">
+          <DocsExample href="directives/popover.html#four-directions">
             <CButton
               color="secondary"
               v-c-popover="{
@@ -70,7 +73,7 @@
               }"
               >Popover on left</CButton
             >
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/base/Progress.vue

@@ -20,7 +20,7 @@
             , ensuring you can stack progress bars, animate them, and place text
             labels over them.
           </p>
-          <Example href="components/progress">
+          <DocsExample href="components/progress">
             <CProgress class="mb-3">
               <CProgressBar :value="0" />
             </CProgress>
@@ -36,7 +36,7 @@
             <CProgress class="mb-3">
               <CProgressBar :value="100" />
             </CProgress>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -50,11 +50,11 @@
             Add labels to your progress bars by placing text within the
             <code>&lt;CProgressBar&gt;</code>.
           </p>
-          <Example href="components/progress#labels">
+          <DocsExample href="components/progress#labels">
             <CProgress class="mb-3">
               <CProgressBar :value="25">25%</CProgressBar>
             </CProgress>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -70,14 +70,14 @@
             inner <code>&lt;CProgressBar&gt;</code> will automatically resize
             accordingly.
           </p>
-          <Example href="components/progress#height">
+          <DocsExample href="components/progress#height">
             <CProgress :height="1" class="mb-3">
               <CProgressBar :value="25"></CProgressBar>
             </CProgress>
             <CProgress :height="20" class="mb-3">
               <CProgressBar :value="25"></CProgressBar>
             </CProgress>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -91,7 +91,7 @@
             Use <code>color</code> prop to change the appearance of individual
             progress bars.
           </p>
-          <Example href="components/progress#backgrounds">
+          <DocsExample href="components/progress#backgrounds">
             <CProgress class="mb-3">
               <CProgressBar color="success" :value="25" />
             </CProgress>
@@ -104,7 +104,7 @@
             <CProgress class="mb-3">
               <CProgressBar color="danger" :value="100" />
             </CProgress>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -117,13 +117,13 @@
           <p class="text-medium-emphasis small">
             Include multiple progress bars in a progress component if you need.
           </p>
-          <Example href="components/progress#multiple-bars">
+          <DocsExample href="components/progress#multiple-bars">
             <CProgress class="mb-3">
               <CProgressBar :value="15" />
               <CProgressBar color="success" :value="30" />
               <CProgressBar color="info" :value="20" />
             </CProgress>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -138,7 +138,7 @@
             <code>&lt;CProgressBar&gt;</code> to apply a stripe via CSS gradient
             over the progress bar&#39;s background color.
           </p>
-          <Example href="components/progress#striped">
+          <DocsExample href="components/progress#striped">
             <CProgress class="mb-3">
               <CProgressBar color="success" variant="striped" :value="25" />
             </CProgress>
@@ -151,7 +151,7 @@
             <CProgress class="mb-3">
               <CProgressBar color="danger" variant="striped" :value="100" />
             </CProgress>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -167,7 +167,7 @@
             <code>&lt;CProgressBar&gt;</code> to animate the stripes right to
             left via CSS3 animations.
           </p>
-          <Example href="components/progress#animated-stripes">
+          <DocsExample href="components/progress#animated-stripes">
             <CProgress class="mb-3">
               <CProgressBar
                 color="success"
@@ -200,7 +200,7 @@
                 :value="100"
               />
             </CProgress>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/base/Spinners.vue

@@ -12,15 +12,15 @@
           <p class="text-medium-emphasis small">
             Use the border spinners for a lightweight loading indicator.
           </p>
-          <Example href="components/spinner">
+          <DocsExample href="components/spinner">
             <CSpinner />
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             The border spinner uses <code>currentColor</code> for its
             <code>border-color</code>. You can use any of our text color
             utilities on the standard spinner.
           </p>
-          <Example href="components/spinner#colors">
+          <DocsExample href="components/spinner#colors">
             <CSpinner color="primary" />
             <CSpinner color="secondary" />
             <CSpinner color="success" />
@@ -29,7 +29,7 @@
             <CSpinner color="info" />
             <CSpinner color="light" />
             <CSpinner color="dark" />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -43,15 +43,15 @@
             If you don&#39;tfancy a border spinner, switch to the grow spinner.
             While it doesn&#39;t technically spin, it does repeatedly grow!
           </p>
-          <Example href="components/spinner#growing-spinner">
+          <DocsExample href="components/spinner#growing-spinner">
             <CSpinner variant="grow" />
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             Once again, this spinner is built with <code>currentColor</code>, so
             you can easily change its appearance. Here it is in blue, along with
             the supported variants.
           </p>
-          <Example href="components/spinner#growing-spinner">
+          <DocsExample href="components/spinner#growing-spinner">
             <CSpinner color="primary" variant="grow" />
             <CSpinner color="secondary" variant="grow" />
             <CSpinner color="success" variant="grow" />
@@ -60,7 +60,7 @@
             <CSpinner color="info" variant="grow" />
             <CSpinner color="light" variant="grow" />
             <CSpinner color="dark" variant="grow" />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -74,10 +74,10 @@
             Add <code>size=&#34;sm&#34;</code> property to make a smaller
             spinner that can quickly be used within other components.
           </p>
-          <Example href="components/spinner#size">
+          <DocsExample href="components/spinner#size">
             <CSpinner size="sm" />
             <CSpinner size="sm" variant="grow" />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -92,7 +92,7 @@
             processing or taking place. You may also swap the text out of the
             spinner element and utilize button text as needed.
           </p>
-          <Example href="components/spinner#buttons">
+          <DocsExample href="components/spinner#buttons">
             <CButton disabled>
               <CSpinner component="span" size="sm" aria-hidden="true" />
             </CButton>
@@ -100,8 +100,8 @@
               <CSpinner component="span" size="sm" aria-hidden="true" />
               Loading...
             </CButton>
-          </Example>
+          </DocsExample>
-          <Example href="components/spinner#buttons">
+          <DocsExample href="components/spinner#buttons">
             <CButton disabled>
               <CSpinner
                 component="span"
@@ -119,7 +119,7 @@
               />
               Loading...
             </CButton>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/base/Switches.vue

@@ -6,7 +6,7 @@
           <strong>Vue Switches</strong>
         </CCardHeader>
         <CCardBody>
-          <Example href="forms/checks-radios.html#switches">
+          <DocsExample href="forms/checks-radios.html#switches">
             <CRow>
                 <CCol md="4">
                     <CFormSwitch label="Default switch checkbox input" />
@@ -27,7 +27,7 @@
                     <CFormSwitch label="Extra-large switch" defaultChecked disabled  size="xl"/>
                 </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/base/Tables.vue

@@ -13,7 +13,7 @@
             Using the most basic table CoreUI, here's how
             <code>&lt;CTable&gt;</code>-based tables look in CoreUI.
           </p>
-          <Example href="components/table">
+          <DocsExample href="components/table">
             <CTable>
               <CTableHead>
                 <CTableRow>
@@ -43,7 +43,7 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -57,7 +57,7 @@
             Use contextual classes to color tables, table rows or individual
             cells.
           </p>
-          <Example href="components/table#variants">
+          <DocsExample href="components/table#variants">
             <CTable>
               <CTableHead>
                 <CTableRow>
@@ -114,7 +114,7 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -128,7 +128,7 @@
             Use <code>striped</code> property to add zebra-striping to any table
             row within the <code>&lt;CTableBody&gt;</code>.
           </p>
-          <Example href="components/table#striped-rows">
+          <DocsExample href="components/table#striped-rows">
             <CTable striped>
               <CTableHead>
                 <CTableRow>
@@ -158,11 +158,11 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             These classes can also be added to table variants:
           </p>
-          <Example href="components/table#striped-rows">
+          <DocsExample href="components/table#striped-rows">
             <CTable color="dark" striped>
               <CTableHead>
                 <CTableRow>
@@ -192,8 +192,8 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
-          <Example href="components/table#striped-rows">
+          <DocsExample href="components/table#striped-rows">
             <CTable color="success" striped>
               <CTableHead>
                 <CTableRow>
@@ -223,7 +223,7 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -237,7 +237,7 @@
             Use <code>hover</code> property to enable a hover state on table
             rows within a <code>&lt;CTableBody&gt;</code>.
           </p>
-          <Example href="components/table#hoverable-rows">
+          <DocsExample href="components/table#hoverable-rows">
             <CTable hover>
               <CTableHead>
                 <CTableRow>
@@ -267,8 +267,8 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
-          <Example href="components/table#hoverable-rows">
+          <DocsExample href="components/table#hoverable-rows">
             <CTable color="dark" hover>
               <CTableHead>
                 <CTableRow>
@@ -298,8 +298,8 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
-          <Example href="components/table#hoverable-rows">
+          <DocsExample href="components/table#hoverable-rows">
             <CTable striped hover>
               <CTableHead>
                 <CTableRow>
@@ -329,7 +329,7 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -339,7 +339,7 @@
           <strong>Vue Table</strong> <small>Active tables</small>
         </CCardHeader>
         <CCardBody>
-          <Example href="components/table#active-tables">
+          <DocsExample href="components/table#active-tables">
             <CTable>
               <CTableHead>
                 <CTableRow>
@@ -371,8 +371,8 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
-          <Example href="components/table#active-tables">
+          <DocsExample href="components/table#active-tables">
             <CTable color="dark">
               <CTableHead>
                 <CTableRow>
@@ -404,7 +404,7 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -418,7 +418,7 @@
             Add <code>bordered</code> property for borders on all sides of the
             table and cells.
           </p>
-          <Example href="components/table#bordered-tables">
+          <DocsExample href="components/table#bordered-tables">
             <CTable bordered>
               <CTableHead>
                 <CTableRow>
@@ -448,13 +448,13 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             <a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
               Border color utilities </a
             > can be added to change colors:
           </p>
-          <Example href="components/table#bordered-tables">
+          <DocsExample href="components/table#bordered-tables">
             <CTable bordered borderColor="primary">
               <CTableHead>
                 <CTableRow>
@@ -484,7 +484,7 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -497,7 +497,7 @@
           <p class="text-medium-emphasis small">
             Add <code>borderless</code> property for a table without borders.
           </p>
-          <Example href="components/table#tables-without-borders">
+          <DocsExample href="components/table#tables-without-borders">
             <CTable borderless>
               <CTableHead>
                 <CTableRow>
@@ -527,8 +527,8 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
-          <Example href="components/table#tables-without-borders">
+          <DocsExample href="components/table#tables-without-borders">
             <CTable color="dark" borderless>
               <CTableHead>
                 <CTableRow>
@@ -558,7 +558,7 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -573,7 +573,7 @@
             <code>&lt;CTable&gt;</code> more compact by cutting all cell
             <code>padding</code> in half.
           </p>
-          <Example href="components/table#small-tables">
+          <DocsExample href="components/table#small-tables">
             <CTable small>
               <CTableHead>
                 <CTableRow>
@@ -603,7 +603,7 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -620,7 +620,7 @@
             <code>&lt;CTable&gt;</code> and are aligned to the the top by
             default. Use the align property to re-align where needed.
           </p>
-          <Example href="components/table#vertical-alignment">
+          <DocsExample href="components/table#vertical-alignment">
             <CTable align="middle" responsive>
               <CTableHead>
                 <CTableRow>
@@ -697,7 +697,7 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -711,7 +711,7 @@
             Border styles, active styles, and table variants are not inherited
             by nested tables.
           </p>
-          <Example href="components/table#nesting">
+          <DocsExample href="components/table#nesting">
             <CTable striped>
               <CTableHead>
                 <CTableRow>
@@ -771,7 +771,7 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -787,7 +787,7 @@
             <code>color=&#34;dark&#34;</code> to make
             <code>&lt;CTableHead&gt;</code>s appear light or dark gray.
           </p>
-          <Example href="components/table#table-head">
+          <DocsExample href="components/table#table-head">
             <CTable>
               <CTableHead color="light">
                 <CTableRow>
@@ -818,8 +818,8 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
-          <Example href="components/table#table-head">
+          <DocsExample href="components/table#table-head">
             <CTable>
               <CTableHead color="dark">
                 <CTableRow>
@@ -849,7 +849,7 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -859,7 +859,7 @@
           <strong>Vue Table</strong> <small>Table foot</small>
         </CCardHeader>
         <CCardBody>
-          <Example href="components/table#table-foot">
+          <DocsExample href="components/table#table-foot">
             <CTable>
               <CTableHead color="light">
                 <CTableRow>
@@ -897,7 +897,7 @@
                 </CTableRow>
               </CTableHead>
             </CTable>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -912,7 +912,7 @@
             table. It helps users with screen readers to find a table and
             understand what it&#39;s about and decide if they want to read it.
           </p>
-          <Example href="components/table#captions">
+          <DocsExample href="components/table#captions">
             <CTable>
               <CTableCaption>List of users</CTableCaption>
               <CTableHead>
@@ -944,12 +944,12 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             You can also put the <code>&lt;CTableCaption&gt;</code> on the top
             of the table with <code>caption=&#34;top&#34;</code>.
           </p>
-          <Example href="components/table#captions">
+          <DocsExample href="components/table#captions">
             <CTable caption="top">
               <CTableCaption>List of users</CTableCaption>
               <CTableHead>
@@ -981,7 +981,7 @@
                 </CTableRow>
               </CTableBody>
             </CTable>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/base/Tabs.vue

@@ -6,7 +6,7 @@
           <strong>Vue Tabs</strong>
         </CCardHeader>
         <CCardBody>
-          <Example href="components/tabs.html">
+          <DocsExample href="components/tabs.html">
             <CNav variant="tabs">
               <CNavItem>
                 <CNavLink href="#" @click="activeTabA=1">
@@ -53,7 +53,7 @@
                 craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
               </CTabPane>
             </CTabContent>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/base/Tooltips.vue

@@ -1,5 +1,8 @@
 <template>
   <CRow>
+    <CCol :xs="12">
+      <DocsCallout name="Tooltip" href="components/breadcrumb" />
+    </CCol>
     <CCol :xs="12">
       <CCard>
         <CCardHeader>
@@ -9,7 +12,7 @@
           <p class="text-medium-emphasis small">
             Hover over the links below to see tooltips:
           </p>
-          <Example href="directives/tooltip.html">
+          <DocsExample href="directives/tooltip.html">
             <p class="text-medium-emphasis">
               Tight pants next level keffiyeh
               <CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
@@ -25,11 +28,11 @@
               <CLink v-c-tooltip="'Tooltip text'"> twitter handle </CLink>
               freegan cred raw denim single-origin coffee viral.
             </p>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             Hover over the links below to see tooltips:
           </p>
-          <Example href="directives/tooltip.html">
+          <DocsExample href="directives/tooltip.html">
             <CButton
               color="secondary"
               v-c-tooltip="{
@@ -66,7 +69,7 @@
               }"
               >Tooltip on left</CButton
             >
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/buttons/ButtonGroups.vue

@@ -13,25 +13,25 @@
             Wrap a series of <code>&lt;CButton&gt;</code> components in
             <code>&lt;CButtonGroup&gt;</code>.
           </p>
-          <Example href="components/button-group">
+          <DocsExample href="components/button-group">
             <CButtonGroup role="group" aria-label="Basic example">
               <CButton color="primary">Left</CButton>
               <CButton color="primary">Middle</CButton>
               <CButton color="primary">Right</CButton>
             </CButtonGroup>
-          </Example>
+          </DocsExample>
           <p>
             These classes can also be added to groups of links, as an
             alternative to the
             <code>&lt;CNav&gt;</code> components.
           </p>
-          <Example href="components/button-group">
+          <DocsExample href="components/button-group">
             <CButtonGroup>
               <CButton href="#" color="primary" active> Active link </CButton>
               <CButton href="#" color="primary"> Link </CButton>
               <CButton href="#" color="primary"> Link </CButton>
             </CButtonGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -41,13 +41,13 @@
           <strong>Vue Button Group</strong> <span>Mixed styles</span>
         </CCardHeader>
         <CCardBody>
-          <Example href="components/button-group#mixed-styles">
+          <DocsExample href="components/button-group#mixed-styles">
             <CButtonGroup role="group" aria-label="Basic mixed styles example">
               <CButton color="danger">Left</CButton>
               <CButton color="warning">Middle</CButton>
               <CButton color="success">Right</CButton>
             </CButtonGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -57,13 +57,13 @@
           <strong>Vue Button Group</strong> <span>Outlined styles</span>
         </CCardHeader>
         <CCardBody>
-          <Example href="components/button-group#outlined-styles">
+          <DocsExample href="components/button-group#outlined-styles">
             <CButtonGroup role="group" aria-label="Basic outlined example">
               <CButton color="primary" variant="outline"> Left </CButton>
               <CButton color="primary" variant="outline"> Middle </CButton>
               <CButton color="primary" variant="outline"> Right </CButton>
             </CButtonGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -77,7 +77,7 @@
             Combine button-like checkbox and radio toggle buttons into a
             seamless looking button group.
           </p>
-          <Example
+          <DocsExample
             href="components/button-group#checkbox-and-radio-button-groups"
           >
             <CButtonGroup
@@ -91,8 +91,8 @@
               <CFormCheck :button="{ color: 'primary', variant: 'outline' }"
               id="btncheck3" autoComplete="off" label="Checkbox 3" />
             </CButtonGroup>
-          </Example>
+          </DocsExample>
-          <Example
+          <DocsExample
             href="components/button-group#checkbox-and-radio-button-groups"
           >
             <CButtonGroup
@@ -107,7 +107,7 @@
               name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"
               />
             </CButtonGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -122,7 +122,7 @@
             components. Use utility classes as needed to space out groups,
             buttons, and more.
           </p>
-          <Example href="components/button-group#button-toolbar">
+          <DocsExample href="components/button-group#button-toolbar">
             <CButtonToolbar
               role="group"
               aria-label="Toolbar with button groups"
@@ -154,13 +154,13 @@
                 <CButton color="info">8</CButton>
               </CButtonGroup>
             </CButtonToolbar>
-          </Example>
+          </DocsExample>
           <p>
             Feel free to combine input groups with button groups in your
             toolbars. Similar to the example above, you’ll likely need some
             utilities through to space items correctly.
           </p>
-          <Example href="components/button-group#button-toolbar">
+          <DocsExample href="components/button-group#button-toolbar">
             <CButtonToolbar
               class="mb-3"
               role="group"
@@ -209,7 +209,7 @@
                 />
               </CInputGroup>
             </CButtonToolbar>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -226,7 +226,7 @@
             <code>&lt;CButtonGroup&gt;</code>&#39;s, including each one when
             nesting multiple groups.
           </p>
-          <Example href="components/button-group#sizing">
+          <DocsExample href="components/button-group#sizing">
             <CButtonGroup
               size="lg"
               role="group"
@@ -252,7 +252,7 @@
               <CButton color="dark" variant="outline"> Middle </CButton>
               <CButton color="dark" variant="outline"> Right </CButton>
             </CButtonGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -267,7 +267,7 @@
             <code>&lt;CButtonGroup&gt;</code> when you need dropdown menus
             combined with a series of buttons.
           </p>
-          <Example href="components/button-group#nesting">
+          <DocsExample href="components/button-group#nesting">
             <CButtonGroup
               role="group"
               aria-label="Button group with nested dropdown"
@@ -285,7 +285,7 @@
                 </CDropdownMenu>
               </CDropdown>
             </CButtonGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -300,7 +300,7 @@
             horizontally.
             <strong>Split button dropdowns are not supported here.</strong>
           </p>
-          <Example href="components/button-group/#vertical-variation">
+          <DocsExample href="components/button-group/#vertical-variation">
             <CButtonGroup
               vertical
               role="group"
@@ -314,8 +314,8 @@
               <CButton color="dark">Button</CButton>
               <CButton color="dark">Button</CButton>
             </CButtonGroup>
-          </Example>
+          </DocsExample>
-          <Example href="components/button-group/#vertical-variation">
+          <DocsExample href="components/button-group/#vertical-variation">
             <CButtonGroup
               vertical
               role="group"
@@ -366,8 +366,8 @@
                 </CDropdownMenu>
               </CDropdown>
             </CButtonGroup>
-          </Example>
+          </DocsExample>
-          <Example href="components/button-group/#vertical-variation">
+          <DocsExample href="components/button-group/#vertical-variation">
             <CButtonGroup
               vertical
               role="group"
@@ -381,7 +381,7 @@
               name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio
               3" />
             </CButtonGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/buttons/Buttons.vue

@@ -16,7 +16,7 @@
             to initialize operations, both in the background or foreground of an
             experience.
           </p>
-          <Example href="components/buttons">
+          <DocsExample href="components/buttons">
             <template
               v-for="state in ['normal', 'active', 'disabled']"
               :key="state"
@@ -50,7 +50,7 @@
                 </CCol>
               </CRow>
             </template>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -64,7 +64,7 @@
             You can combine button with our
             <a href="https://icons.coreui.io/">CoreUI Icons</a>.
           </p>
-          <Example href="components/buttons">
+          <DocsExample href="components/buttons">
             <template
               v-for="state in ['normal', 'active', 'disabled']"
               :key="state"
@@ -100,7 +100,7 @@
                 </CCol>
               </CRow>
             </template>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -124,7 +124,7 @@
             <code>role=&#34;button&#34;</code> to adequately communicate their
             meaning to assistive technologies such as screen readers.
           </p>
-          <Example href="components/buttons#button-components">
+          <DocsExample href="components/buttons#button-components">
             <CButton component="a" color="primary" href="#" role="button">
               Link
             </CButton>
@@ -147,7 +147,7 @@
               color="primary"
               value="Reset"
             />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -162,7 +162,7 @@
             <code>variant=&#34;outline&#34;</code> prop to remove all background
             colors.
           </p>
-          <Example href="components/buttons#outline-buttons">
+          <DocsExample href="components/buttons#outline-buttons">
             <template
               v-for="state in ['normal', 'active', 'disabled']"
               :key="state"
@@ -198,7 +198,7 @@
                 </CCol>
               </CRow>
             </template>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -213,7 +213,7 @@
             <code>variant=&#34;ghost&#34;</code> prop to remove all background
             colors.
           </p>
-          <Example href="components/buttons#ghost-buttons">
+          <DocsExample href="components/buttons#ghost-buttons">
             <template
               v-for="state in ['normal', 'active', 'disabled']"
               :key="state"
@@ -249,7 +249,7 @@
                 </CCol>
               </CRow>
             </template>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -263,14 +263,14 @@
             Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or
             <code>size=&#34;sm&#34;</code> for additional sizes.
           </p>
-          <Example href="components/buttons#sizes">
+          <DocsExample href="components/buttons#sizes">
             <CButton color="primary" size="lg"> Large button </CButton>
             <CButton color="secondary" size="lg"> Large button </CButton>
-          </Example>
+          </DocsExample>
-          <Example href="components/buttons#sizes">
+          <DocsExample href="components/buttons#sizes">
             <CButton color="primary" size="sm"> Small button </CButton>
             <CButton color="secondary" size="sm"> Small button </CButton>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -280,7 +280,7 @@
           <strong>Vue Button</strong> <small>Pill</small>
         </CCardHeader>
         <CCardBody>
-          <Example href="components/buttons#pill-buttons">
+          <DocsExample href="components/buttons#pill-buttons">
             <template
               v-for="color in [
                 'primary',
@@ -303,7 +303,7 @@
                 {{ color.charAt(0).toUpperCase() + color.slice(1) }}
               </CButton>
             </template>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -313,7 +313,7 @@
           <strong>Vue Button</strong> <small>Square</small>
         </CCardHeader>
         <CCardBody>
-          <Example href="components/buttons#square">
+          <DocsExample href="components/buttons#square">
             <template
               v-for="color in [
                 'primary',
@@ -336,7 +336,7 @@
                 {{ color.charAt(0).toUpperCase() + color.slice(1) }}
               </CButton>
             </template>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -353,12 +353,12 @@
             <code>pointer-events: none</code> applied to, disabling hover and
             active states from triggering.
           </p>
-          <Example href="components/buttons#disabled-state">
+          <DocsExample href="components/buttons#disabled-state">
             <CButton color="primary" size="lg" disabled>
               Primary button
             </CButton>
             <CButton color="secondary" size="lg" disabled> Button </CButton>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             Disabled buttons using the <code>&lt;a&gt;</code> component act a
             little different:
@@ -371,7 +371,7 @@
             <code>aria-disabled=&#34;true&#34;</code> attribute to show the
             state of the component to assistive technologies.
           </p>
-          <Example href="components/buttons#disabled-state">
+          <DocsExample href="components/buttons#disabled-state">
             <CButton component="a" href="#" color="primary" size="lg" disabled>
               Primary link
             </CButton>
@@ -384,7 +384,7 @@
             >
               Link
             </CButton>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -398,12 +398,12 @@
             Create buttons that span the full width of a parent—by using
             utilities.
           </p>
-          <Example href="components/buttons#block-buttons">
+          <DocsExample href="components/buttons#block-buttons">
             <div class="d-grid gap-2">
               <CButton color="primary">Button</CButton>
               <CButton color="primary">Button</CButton>
             </div>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             Here we create a responsive variation, starting with vertically
             stacked buttons until the <code>md</code> breakpoint, where
@@ -411,24 +411,24 @@
             thus nullifying the <code>gap-2</code> utility. Resize your browser
             to see them change.
           </p>
-          <Example href="components/buttons#block-buttons">
+          <DocsExample href="components/buttons#block-buttons">
             <div class="d-grid gap-2 d-md-block">
               <CButton color="primary">Button</CButton>
               <CButton color="primary">Button</CButton>
             </div>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             You can adjust the width of your block buttons with grid column
             width classes. For example, for a half-width &#34;block button&#34;,
             use <code>.col-6</code>. Center it horizontally with
             <code>.mx-auto</code>, too.
           </p>
-          <Example href="components/buttons#block-buttons">
+          <DocsExample href="components/buttons#block-buttons">
             <div class="d-grid gap-2 col-6 mx-auto">
               <CButton color="primary">Button</CButton>
               <CButton color="primary">Button</CButton>
             </div>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             Additional utilities can be used to adjust the alignment of buttons
             when horizontal. Here we&#39;ve taken our previous responsive
@@ -436,12 +436,12 @@
             button to right align the buttons when they&#39;re no longer
             stacked.
           </p>
-          <Example href="components/buttons#block-buttons">
+          <DocsExample href="components/buttons#block-buttons">
             <div class="d-grid gap-2 d-md-flex justify-content-md-end">
               <CButton color="primary" class="me-md-2"> Button </CButton>
               <CButton color="primary">Button</CButton>
             </div>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/buttons/Dropdowns.vue

@@ -14,7 +14,7 @@
             <code>&lt;button&gt;</code>
             elements:
           </p>
-          <Example href="components/dropdown#single-button">
+          <DocsExample href="components/dropdown#single-button">
             <CDropdown>
               <CDropdownToggle color="secondary"
                 >Dropdown button</CDropdownToggle
@@ -25,11 +25,11 @@
                 <CDropdownItem href="#">Something else here</CDropdownItem>
               </CDropdownMenu>
             </CDropdown>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             The best part is you can do this with any button variant, too:
           </p>
-          <Example href="components/dropdown#single-button">
+          <DocsExample href="components/dropdown#single-button">
             <template
               v-for="color in [
                 'primary',
@@ -54,7 +54,7 @@
                 </CDropdownMenu>
               </CDropdown>
             </template>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -78,7 +78,7 @@
             split button and implement a more properly sized hit area next to
             the main button.
           </p>
-          <Example href="components/dropdown#split-button">
+          <DocsExample href="components/dropdown#split-button">
             <template
               v-for="color in [
                 'primary',
@@ -106,7 +106,7 @@
                 </CDropdownMenu>
               </CDropdown>
             </template>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -120,7 +120,7 @@
             Button dropdowns work with buttons of all sizes, including default
             and split dropdown buttons.
           </p>
-          <Example href="components/dropdown#sizing">
+          <DocsExample href="components/dropdown#sizing">
             <CDropdown variant="btn-group">
               <CDropdownToggle color="secondary" size="lg">
                 Large button
@@ -146,8 +146,8 @@
                 <CDropdownItem href="#">Separated link</CDropdownItem>
               </CDropdownMenu>
             </CDropdown>
-          </Example>
+          </DocsExample>
-          <Example href="components/dropdown#sizing">
+          <DocsExample href="components/dropdown#sizing">
             <CDropdown variant="btn-group">
               <CDropdownToggle color="secondary" size="sm">
                 Small button
@@ -173,7 +173,7 @@
                 <CDropdownItem href="#">Separated link</CDropdownItem>
               </CDropdownMenu>
             </CDropdown>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -189,7 +189,7 @@
             <code>dark</code> property. No changes are required to the dropdown
             items.
           </p>
-          <Example href="components/dropdown#dark-dropdowns">
+          <DocsExample href="components/dropdown#dark-dropdowns">
             <CDropdown dark>
               <CDropdownToggle color="secondary"
                 >Dropdown button</CDropdownToggle
@@ -202,11 +202,11 @@
                 <CDropdownItem href="#">Separated link</CDropdownItem>
               </CDropdownMenu>
             </CDropdown>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             And putting it to use in a navbar:
           </p>
-          <Example href="components/dropdown#dark-dropdowns">
+          <DocsExample href="components/dropdown#dark-dropdowns">
             <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
               <div class="container-fluid">
                 <a class="navbar-brand" href="https://coreui.io/react/">
@@ -244,7 +244,7 @@
                 </div>
               </div>
             </nav>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -260,7 +260,7 @@
             <code>&lt;CDropdown&gt;</code>
             component.
           </p>
-          <Example href="components/dropdown#dropup">
+          <DocsExample href="components/dropdown#dropup">
             <CDropdown variant="btn-group" direction="dropup">
               <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
               <CDropdownMenu>
@@ -282,7 +282,7 @@
                 <CDropdownItem href="#">Separated link</CDropdownItem>
               </CDropdownMenu>
             </CDropdown>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -298,7 +298,7 @@
             <code>&lt;CDropdown&gt;</code>
             component.
           </p>
-          <Example href="components/dropdown#dropright">
+          <DocsExample href="components/dropdown#dropright">
             <CDropdown variant="btn-group" direction="dropend">
               <CDropdownToggle color="secondary">Dropdown</CDropdownToggle>
               <CDropdownMenu>
@@ -320,7 +320,7 @@
                 <CDropdownItem href="#">Separated link</CDropdownItem>
               </CDropdownMenu>
             </CDropdown>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -336,7 +336,7 @@
             <code>&lt;CDropdown&gt;</code>
             component.
           </p>
-          <Example href="components/dropdown#dropleft">
+          <DocsExample href="components/dropdown#dropleft">
             <CButtonGroup>
               <CDropdown variant="btn-group" direction="dropstart">
                 <CDropdownToggle color="secondary" split />
@@ -350,7 +350,7 @@
               </CDropdown>
               <CButton color="secondary">Small split button</CButton>
             </CButtonGroup>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/charts/CChartBarExample.vue

@@ -17,7 +17,7 @@ export default {
           {
             label: 'GitHub Commits',
             backgroundColor: '#f87979',
-            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 12]
           }
         ]
       }

src/views/forms/ChecksRadios.vue

@@ -9,14 +9,14 @@
           <strong>Vue Checkbox</strong>
         </CCardHeader>
         <CCardBody>
-          <Example href="forms/checks-radios">
+          <DocsExample href="forms/checks-radios">
             <CFormCheck id="flexCheckDefault" label="Default checkbox" />
             <CFormCheck
               id="flexCheckChecked"
               label="Checked checkbox"
               defaultChecked
             />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -31,14 +31,14 @@
             <code>&lt;label&gt;</code>s are automatically styled to match with a
             lighter color to help indicate the input&#39;s state.
           </p>
-          <Example href="forms/checks-radios#disabled">
+          <DocsExample href="forms/checks-radios#disabled">
             <CFormCheck label="Disabled checkbox" disabled />
             <CFormCheck
               label="Disabled checked checkbox"
               defaultChecked
               disabled
             />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -53,7 +53,7 @@
             <code>&lt;label&gt;</code>s are automatically styled to match with a
             lighter color to help indicate the input&#39;s state.
           </p>
-          <Example href="forms/checks-radios#radios">
+          <DocsExample href="forms/checks-radios#radios">
             <CFormCheck
               type="radio"
               name="flexRadioDefault"
@@ -67,7 +67,7 @@
               label="Checked radio"
               defaultChecked
             />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -77,7 +77,7 @@
           <strong>Vue Radio</strong> <small>Disabled</small>
         </CCardHeader>
         <CCardBody>
-          <Example href="forms/checks-radios#disabled-1">
+          <DocsExample href="forms/checks-radios#disabled-1">
             <CFormCheck
               type="radio"
               name="flexRadioDisabled"
@@ -93,7 +93,7 @@
               defaultChecked
               disabled
             />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -108,7 +108,7 @@
             <code>switch</code> boolean properly to render a toggle switch.
             Switches also support the <code>disabled</code> attribute.
           </p>
-          <Example href="forms/checks-radios#switches">
+          <DocsExample href="forms/checks-radios#switches">
             <CFormSwitch
               label="Default switch checkbox input"
               id="formSwitchCheckDefault"
@@ -129,7 +129,7 @@
               defaultChecked
               disabled
             />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -139,7 +139,7 @@
           <strong>Vue Switches</strong> <small>Sizes</small>
         </CCardHeader>
         <CCardBody>
-          <Example href="forms/checks-radios#sizes">
+          <DocsExample href="forms/checks-radios#sizes">
             <CFormSwitch
               label="Default switch checkbox input"
               id="formSwitchCheckDefault"
@@ -154,7 +154,7 @@
               label="Extra large switch checkbox input"
               id="formSwitchCheckDefaultXL"
             />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -169,11 +169,11 @@
             By default, any number of checkboxes and radios that are immediate
             sibling will be vertically stacked and appropriately spaced.
           </p>
-          <Example href="forms/checks-radios#default-stacked">
+          <DocsExample href="forms/checks-radios#default-stacked">
             <CFormCheck id="defaultCheck1" label="Default checkbox" />
             <CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
-          </Example>
+          </DocsExample>
-          <Example href="forms/checks-radios#default-stacked">
+          <DocsExample href="forms/checks-radios#default-stacked">
             <CFormCheck
               type="radio"
               name="exampleRadios"
@@ -197,7 +197,7 @@
               label="Disabled radio"
               disabled
             />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -212,7 +212,7 @@
             <code>inline</code>  boolean property to any
             <code>&lt;CFormCheck&gt;</code>.
           </p>
-          <Example href="forms/checks-radios#inline">
+          <DocsExample href="forms/checks-radios#inline">
             <CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
             <CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
             <CFormCheck
@@ -222,8 +222,8 @@
               label="3 (disabled)"
               disabled
             />
-          </Example>
+          </DocsExample>
-          <Example href="forms/checks-radios#inline">
+          <DocsExample href="forms/checks-radios#inline">
             <CFormCheck
               inline
               type="radio"
@@ -249,7 +249,7 @@
               label="3 (disabled)"
               disabled
             />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -263,7 +263,7 @@
             Remember to still provide some form of accessible name for assistive
             technologies (for instance, using <code>aria-label</code>).
           </p>
-          <Example href="forms/checks-radios#without-labels">
+          <DocsExample href="forms/checks-radios#without-labels">
             <div>
               <CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
             </div>
@@ -276,7 +276,7 @@
                 aria-label="..."
               />
             </div>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -292,15 +292,15 @@
             <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
             further be grouped in a button group if needed.
           </p>
-          <Example href="forms/checks-radios#toggle-buttons">
+          <DocsExample href="forms/checks-radios#toggle-buttons">
             <CFormCheck
               :button="{ color: 'primary' }"
               id="btn-check"
               autoComplete="off"
               label="Single toggle"
             />
-          </Example>
+          </DocsExample>
-          <Example href="forms/checks-radios#toggle-buttons">
+          <DocsExample href="forms/checks-radios#toggle-buttons">
             <CFormCheck
               :button="{ color: 'primary' }"
               id="btn-check-2"
@@ -308,8 +308,8 @@
               label="Checked"
               defaultChecked
             />
-          </Example>
+          </DocsExample>
-          <Example href="forms/checks-radios#toggle-buttons">
+          <DocsExample href="forms/checks-radios#toggle-buttons">
             <CFormCheck
               :button="{ color: 'primary' }"
               id="btn-check-3"
@@ -317,9 +317,9 @@
               label="Disabled"
               disabled
             />
-          </Example>
+          </DocsExample>
           <h3>Radio toggle buttons</h3>
-          <Example href="forms/checks-radios#toggle-buttons">
+          <DocsExample href="forms/checks-radios#toggle-buttons">
             <CFormCheck
               :button="{ color: 'secondary' }"
               type="radio"
@@ -354,13 +354,13 @@
               autoComplete="off"
               label="Radio"
             />
-          </Example>
+          </DocsExample>
           <h3>Outlined styles</h3>
           <p class="text-medium-emphasis small">
             Different variants of button, such at the various outlined styles,
             are supported.
           </p>
-          <Example href="forms/checks-radios#toggle-buttons">
+          <DocsExample href="forms/checks-radios#toggle-buttons">
             <div>
               <CFormCheck
                 :button="{ color: 'primary', variant: 'outline' }"
@@ -397,7 +397,7 @@
                 label="Radio"
               />
             </div>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/forms/FloatingLabels.vue

@@ -17,7 +17,7 @@
               pseudo-element. Also note that the <code>&lt;CFormInput&gt;</code> must come first so
               we can utilize a sibling selector (e.g., <code>~</code>).
             </p>
-            <Example href="forms/floating-labels">
+            <DocsExample href="forms/floating-labels">
               <CFormFloating class="mb-3">
                 <CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
                 <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
@@ -26,12 +26,12 @@
                 <CFormInput type="password" id="floatingPassword" placeholder="Password" />
                 <CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
               </CFormFloating>
-            </Example>
+            </DocsExample>
             <p class="text-medium-emphasis small">
               When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>
               s will automatically adjust to their floated position.
             </p>
-            <Example href="forms/floating-labels">
+            <DocsExample href="forms/floating-labels">
               <CFormFloating>
                 <CFormInput
                   type="email"
@@ -41,7 +41,7 @@
                 />
                 <CFormLabel htmlFor="floatingInputValue">Input with value</CFormLabel>
               </CFormFloating>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -55,7 +55,7 @@
               By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as
               <code>&lt;CFormInput&gt;</code>s.
             </p>
-            <Example href="forms/floating-labels#textareas">
+            <DocsExample href="forms/floating-labels#textareas">
               <CFormFloating>
                 <CFormTextarea
                   id="floatingTextarea"
@@ -63,13 +63,13 @@
                 ></CFormTextarea>
                 <CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
               </CFormFloating>
-            </Example>
+            </DocsExample>
             <p class="text-medium-emphasis small">
               To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>, do not use the
               <code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
               inline or via custom CSS).
             </p>
-            <Example href="forms/floating-labels#textareas">
+            <DocsExample href="forms/floating-labels#textareas">
               <CFormFloating>
                 <CFormTextarea
                   placeholder="Leave a comment here"
@@ -78,7 +78,7 @@
                 ></CFormTextarea>
                 <CFormLabel htmlFor="floatingTextarea2">Comments</CFormLabel>
               </CFormFloating>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -97,7 +97,7 @@
                 Selects with <code>size</code> and <code>multiple</code> are not supported.
               </strong>
             </p>
-            <Example href="forms/floating-labels#selects">
+            <DocsExample href="forms/floating-labels#selects">
               <CFormFloating>
                 <CFormSelect id="floatingSelect" aria-label="Floating label select example">
                   <option>Open this select menu</option>
@@ -107,7 +107,7 @@
                 </CFormSelect>
                 <CFormLabel htmlFor="floatingSelect">Works with selects</CFormLabel>
               </CFormFloating>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -121,7 +121,7 @@
               When working with the CoreUI for Bootstrap grid system, be sure to place form elements
               within column classes.
             </p>
-            <Example href="forms/floating-labels#layout">
+            <DocsExample href="forms/floating-labels#layout">
               <CRow :xs="{ gutter: 2 }">
                 <CCol md>
                   <CFormFloating>
@@ -146,7 +146,7 @@
                   </CFormFloating>
                 </CCol>
               </CRow>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>

src/views/forms/FormControl.vue

@@ -9,7 +9,7 @@
           <strong>Vue Form Control</strong>
         </CCardHeader>
         <CCardBody>
-          <Example href="forms/form-control">
+          <DocsExample href="forms/form-control">
             <CForm>
               <div class="mb-3">
                 <CFormLabel for="exampleFormControlInput1"
@@ -31,7 +31,7 @@
                 ></CFormTextarea>
               </div>
             </CForm>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -45,7 +45,7 @@
             Set heights using <code>size</code> property like
             <code>size=&#34;lg&#34;</code> and <code>size=&#34;sm&#34;</code>.
           </p>
-          <Example href="forms/form-control#sizing">
+          <DocsExample href="forms/form-control#sizing">
             <CFormInput
               type="text"
               size="lg"
@@ -65,7 +65,7 @@
               placeholder="Small input"
               aria-label="sm input example"
             />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -79,7 +79,7 @@
             Add the <code>disabled</code> boolean attribute on an input to give
             it a grayed out appearance and remove pointer events.
           </p>
-          <Example href="forms/form-control#disabled">
+          <DocsExample href="forms/form-control#disabled">
             <CFormInput
               type="text"
               placeholder="Disabled input"
@@ -95,7 +95,7 @@
               readOnly
             />
             <br />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -111,14 +111,14 @@
             appear lighter (just like disabled inputs), but retain the standard
             cursor.
           </p>
-          <Example href="forms/form-control#readonly">
+          <DocsExample href="forms/form-control#readonly">
             <CFormInput
               type="text"
               placeholder="Readonly input here..."
               aria-label="readonly input example"
               readOnly
             />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -134,7 +134,7 @@
             <code>plainText</code> boolean property to remove the default form
             field styling and preserve the correct margin and padding.
           </p>
-          <Example href="components/accordion">
+          <DocsExample href="components/accordion">
             <CRow class="mb-3">
               <CFormLabel for="staticEmail" class="col-sm-2 col-form-label">
                 Email
@@ -157,8 +157,8 @@
                 <CFormInput type="password" id="inputPassword" />
               </div>
             </CRow>
-          </Example>
+          </DocsExample>
-          <Example href="components/accordion">
+          <DocsExample href="components/accordion">
             <CForm class="row g-3">
               <div class="col-auto">
                 <CFormLabel for="staticEmail2" class="visually-hidden">
@@ -186,7 +186,7 @@
                 <CButton type="submit" class="mb-3"> Confirm identity </CButton>
               </div>
             </CForm>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -196,7 +196,7 @@
           <strong>Vue Form Control</strong> <small>File input</small>
         </CCardHeader>
         <CCardBody>
-          <Example href="forms/form-control#file-input">
+          <DocsExample href="forms/form-control#file-input">
             <div class="mb-3">
               <CFormLabel for="formFile">Default file input example</CFormLabel>
               <CFormInput type="file" id="formFile" />
@@ -221,7 +221,7 @@
               <CFormLabel for="formFileLg">Large file input example</CFormLabel>
               <CFormInput type="file" size="lg" id="formFileLg" />
             </div>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -231,7 +231,7 @@
           <strong>Vue Form Control</strong> <small>Color</small>
         </CCardHeader>
         <CCardBody>
-          <Example href="forms/form-control#color">
+          <DocsExample href="forms/form-control#color">
             <CFormLabel for="exampleColorInput">Color picker</CFormLabel>
             <CFormInput
               type="color"
@@ -239,7 +239,7 @@
               defaultValue="#563d7c"
               title="Choose your color"
             />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/forms/InputGroup.vue

@@ -14,7 +14,7 @@
               sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the
               input group.
             </p>
-            <Example href="forms/input-group">
+            <DocsExample href="forms/input-group">
               <CInputGroup class="mb-3">
                 <CInputGroupText id="basic-addon1">@</CInputGroupText>
                 <CFormInput
@@ -50,7 +50,7 @@
                 <CInputGroupText>With textarea</CInputGroupText>
                 <CFormTextarea aria-label="With textarea"></CFormTextarea>
               </CInputGroup>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -65,7 +65,7 @@
               custom form field validation within an input group. You may disable this with
               <code>.flex-nowrap</code>.
             </p>
-            <Example href="forms/input-group#wrapping">
+            <DocsExample href="forms/input-group#wrapping">
               <CInputGroup class="flex-nowrap">
                 <CInputGroupText id="addon-wrapping">@</CInputGroupText>
                 <CFormInput
@@ -74,7 +74,7 @@
                   aria-describedby="addon-wrapping"
                 />
               </CInputGroup>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -92,7 +92,7 @@
             <p class="text-medium-emphasis small">
               <strong>Sizing on the individual input group elements isn&#39;tsupported.</strong>
             </p>
-            <Example href="forms/input-group#sizing">
+            <DocsExample href="forms/input-group#sizing">
               <CInputGroup size="sm" class="mb-3">
                 <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
                 <CFormInput
@@ -114,7 +114,7 @@
                   aria-describedby="inputGroup-sizing-lg"
                 />
               </CInputGroup>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -127,7 +127,7 @@
             <p class="text-medium-emphasis small">
               Place any checkbox or radio option within an input group&#39;s addon instead of text.
             </p>
-            <Example href="forms/input-group#checkboxes-and-radios">
+            <DocsExample href="forms/input-group#checkboxes-and-radios">
               <CInputGroup class="mb-3">
                 <CInputGroupText>
                   <CFormCheck
@@ -148,7 +148,7 @@
                 </CInputGroupText>
                 <CFormInput aria-label="Text input with radio button" />
               </CInputGroup>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -163,13 +163,13 @@
               styles are only available for input groups with a single
               <code>&lt;CFormInput&gt;</code>.
             </p>
-            <Example href="forms/input-group#multiple-inputs">
+            <DocsExample href="forms/input-group#multiple-inputs">
               <CInputGroup>
                 <CInputGroupText>First and last name</CInputGroupText>
                 <CFormInput aria-label="First name" />
                 <CFormInput aria-label="Last name" />
               </CInputGroup>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -183,7 +183,7 @@
               Multiple add-ons are supported and can be mixed with checkbox and radio input
               versions..
             </p>
-            <Example href="forms/input-group#multiple-addons">
+            <DocsExample href="forms/input-group#multiple-addons">
               <CInputGroup class="mb-3">
                 <CInputGroupText>$</CInputGroupText>
                 <CInputGroupText>0.00</CInputGroupText>
@@ -194,7 +194,7 @@
                 <CInputGroupText>$</CInputGroupText>
                 <CInputGroupText>0.00</CInputGroupText>
               </CInputGroup>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -208,7 +208,7 @@
               Multiple add-ons are supported and can be mixed with checkbox and radio input
               versions..
             </p>
-            <Example href="forms/input-group#button-addons">
+            <DocsExample href="forms/input-group#button-addons">
               <CInputGroup class="mb-3">
                 <CButton type="button" color="secondary" variant="outline" id="button-addon1">
                   Button
@@ -250,7 +250,7 @@
                   Button
                 </CButton>
               </CInputGroup>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -260,7 +260,7 @@
             <strong>Vue Input group</strong> <small>Buttons with dropdowns</small>
           </CCardHeader>
           <CCardBody>
-            <Example href="forms/input-group#buttons-with-dropdowns">
+            <DocsExample href="forms/input-group#buttons-with-dropdowns">
               <CInputGroup class="mb-3">
                 <CDropdown variant="input-group">
                   <CDropdownToggle color="secondary" variant="outline">
@@ -318,7 +318,7 @@
                   </CDropdownMenu>
                 </CDropdown>
               </CInputGroup>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -328,7 +328,7 @@
             <strong>Vue Input group</strong> <small>Segmented buttons</small>
           </CCardHeader>
           <CCardBody>
-            <Example href="forms/input-group#segmented-buttons">
+            <DocsExample href="forms/input-group#segmented-buttons">
               <CInputGroup class="mb-3">
                 <CDropdown variant="input-group">
                   <CButton type="button" color="secondary" variant="outline">
@@ -361,7 +361,7 @@
                   </CDropdownMenu>
                 </CDropdown>
               </CInputGroup>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -371,7 +371,7 @@
             <strong>Vue Input group</strong> <small>Custom select</small>
           </CCardHeader>
           <CCardBody>
-            <Example href="forms/input-group#custom-select">
+            <DocsExample href="forms/input-group#custom-select">
               <CInputGroup class="mb-3">
                 <CInputGroupText component="label" for="inputGroupSelect01">
                   Options
@@ -416,7 +416,7 @@
                   Button
                 </CButton>
               </CInputGroup>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>
@@ -426,7 +426,7 @@
             <strong>Vue Input group</strong> <small>Custom file input</small>
           </CCardHeader>
           <CCardBody>
-            <Example href="forms/input-group#custom-file-input">
+            <DocsExample href="forms/input-group#custom-file-input">
               <CInputGroup class="mb-3">
                 <CInputGroupText component="label" for="inputGroupFile01">
                   Upload
@@ -471,7 +471,7 @@
                   Button
                 </CButton>
               </CInputGroup>
-            </Example>
+            </DocsExample>
           </CCardBody>
         </CCard>
       </CCol>

src/views/forms/Layout.vue

@@ -11,7 +11,7 @@
             for form layouts that require multiple columns, varied widths, and
             additional alignment options.
           </p>
-          <Example href="forms/layout#form-grid">
+          <DocsExample href="forms/layout#form-grid">
             <CRow>
               <CCol xs>
                 <CFormInput placeholder="First name" aria-label="First name" />
@@ -20,7 +20,7 @@
                 <CFormInput placeholder="Last name" aria-label="Last name" />
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -38,7 +38,7 @@
             , you can have control over the gutter width in as well the inline
             as block direction.
           </p>
-          <Example href="forms/layout#gutters">
+          <DocsExample href="forms/layout#gutters">
             <CRow class="g-3">
               <CCol xs>
                 <CFormInput placeholder="First name" aria-label="First name" />
@@ -47,11 +47,11 @@
                 <CFormInput placeholder="Last name" aria-label="Last name" />
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             More complex layouts can also be created with the grid system.
           </p>
-          <Example href="forms/layout#gutters">
+          <DocsExample href="forms/layout#gutters">
             <CForm class="row g-3">
               <CCol :md="6">
                 <CFormLabel for="inputEmail4">Email</CFormLabel>
@@ -98,7 +98,7 @@
                 <CButton type="submit" color="primary">Sign in</CButton>
               </CCol>
             </CForm>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -122,7 +122,7 @@
             removed the <code>padding-top</code> on our stacked radio inputs
             label to better align the text baseline.
           </p>
-          <Example href="forms/layout#horizontal-form">
+          <DocsExample href="forms/layout#horizontal-form">
             <CForm>
               <CRow class="mb-3">
                 <CFormLabel
@@ -185,7 +185,7 @@
               </CRow>
               <CButton type="submit" color="primary">Sign in</CButton>
             </CForm>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -202,7 +202,7 @@
             correctly follow the size of <code>.form-control-lg</code> and
             <code>.form-control-sm</code>.
           </p>
-          <Example href="forms/layout#horizontal-form-label-sizing">
+          <DocsExample href="forms/layout#horizontal-form-label-sizing">
             <CRow class="mb-3">
               <CFormLabel
                 for="colFormLabelSm"
@@ -250,7 +250,7 @@
                 />
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -270,7 +270,7 @@
             rest, with specific column classes like
             <code>&lt;CCol sm=&#34;7&#34;&gt;</code>.
           </p>
-          <Example href="forms/layout#column-sizing">
+          <DocsExample href="forms/layout#column-sizing">
             <CRow class="g-3">
               <CCol sm="{7}">
                 <CFormInput placeholder="City" aria-label="City" />
@@ -282,7 +282,7 @@
                 <CFormInput placeholder="Zip" aria-label="Zip" />
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -300,7 +300,7 @@
             only take up as much space as needed. Put another way, the column
             sizes itself based on the contents.
           </p>
-          <Example href="forms/layout#auto-sizing">
+          <DocsExample href="forms/layout#auto-sizing">
             <CForm class="row gy-2 gx-3 align-items-center">
               <CCol xs="auto">
                 <CFormLabel
@@ -351,12 +351,12 @@
                 <CButton type="submit" color="primary">Submit</CButton>
               </CCol>
             </CForm>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             You can then remix that once again with size-specific column
             classes.
           </p>
-          <Example href="forms/layout#auto-sizing">
+          <DocsExample href="forms/layout#auto-sizing">
             <CForm class="row gx-3 gy-2 align-items-center">
               <CCol :sm="3">
                 <CFormLabel
@@ -407,7 +407,7 @@
                 <CButton type="submit" color="primary">Submit</CButton>
               </CCol>
             </CForm>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -426,7 +426,7 @@
             <code>.align-items-center</code> aligns the form elements to the
             middle, making the <code>&lt;CFormCheck&gt;</code> align properly.
           </p>
-          <Example href="forms/layout#inline-forms">
+          <DocsExample href="forms/layout#inline-forms">
             <CForm class="row row-cols-lg-auto g-3 align-items-center">
               <CCol :xs="12">
                 <CFormLabel
@@ -468,7 +468,7 @@
                 <CButton type="submit" color="primary">Submit</CButton>
               </CCol>
             </CForm>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/forms/Range.vue

@@ -14,10 +14,10 @@
             <code>&lt;input type=&#34;range&#34;&gt;</code> controls with
             <code>&lt;CFormRange&gt;</code>.
           </p>
-          <Example href="forms/range">
+          <DocsExample href="forms/range">
             <CFormLabel for="customRange1">Example range</CFormLabel>
             <CFormRange id="customRange1" />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -31,10 +31,10 @@
             Add the <code>disabled</code> boolean attribute on an input to give
             it a grayed out appearance and remove pointer events.
           </p>
-          <Example href="forms/range#disabled">
+          <DocsExample href="forms/range#disabled">
             <CFormLabel for="disabledRange">Disabled range</CFormLabel>
             <CFormRange id="disabledRange" disabled />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -50,10 +50,10 @@
             You may specify new values for those using the <code>min</code> and
             <code>max</code> attributes.
           </p>
-          <Example href="forms/range#min-and-max">
+          <DocsExample href="forms/range#min-and-max">
             <CFormLabel for="customRange2">Example range</CFormLabel>
             <CFormRange :min="0" :max="5" defaultValue="3" id="customRange2" />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -69,7 +69,7 @@
             below, we double the number of steps by using
             <code>step=&#34;0.5&#34;</code>.
           </p>
-          <Example href="forms/range#steps">
+          <DocsExample href="forms/range#steps">
             <CFormLabel for="customRange3">Example range</CFormLabel>
             <CFormRange
               :min="0"
@@ -78,7 +78,7 @@
               defaultValue="3"
               id="customRange3"
             />
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/forms/Select.vue

@@ -9,14 +9,14 @@
           <strong>Vue Select</strong> <small>Default</small>
         </CCardHeader>
         <CCardBody>
-          <Example href="forms/select">
+          <DocsExample href="forms/select">
             <CFormSelect aria-label="Default select example">
               <option>Open this select menu</option>
               <option value="1">One</option>
               <option value="2">Two</option>
               <option value="3">Three</option>
             </CFormSelect>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -30,7 +30,7 @@
             You may also choose from small and large custom selects to match our
             similarly sized text inputs.
           </p>
-          <Example href="forms/select#sizing">
+          <DocsExample href="forms/select#sizing">
             <CFormSelect
               size="lg"
               class="mb-3"
@@ -51,11 +51,11 @@
               <option value="2">Two</option>
               <option value="3">Three</option>
             </CFormSelect>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             The <code>multiple</code> attribute is also supported:
           </p>
-          <Example href="forms/select#sizing">
+          <DocsExample href="forms/select#sizing">
             <CFormSelect
               size="lg"
               multiple
@@ -66,11 +66,11 @@
               <option value="2">Two</option>
               <option value="3">Three</option>
             </CFormSelect>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             As is the <code>htmlSize</code> property:
           </p>
-          <Example href="forms/select#sizing">
+          <DocsExample href="forms/select#sizing">
             <CFormSelect
               size="lg"
               multiple
@@ -81,7 +81,7 @@
               <option value="2">Two</option>
               <option value="3">Three</option>
             </CFormSelect>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -95,14 +95,14 @@
             Add the <code>disabled</code> boolean attribute on a select to give
             it a grayed out appearance and remove pointer events.
           </p>
-          <Example href="forms/select#disabled">
+          <DocsExample href="forms/select#disabled">
             <CFormSelect aria-label="Disabled select example" disabled>
               <option>Open this select menu</option>
               <option value="1">One</option>
               <option value="2">Two</option>
               <option value="3">Three</option>
             </CFormSelect>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/forms/Validation.vue

@@ -24,7 +24,7 @@
             Custom feedback styles apply custom colors, borders, focus styles,
             and background icons to better communicate feedback.
           </p>
-          <Example href="forms/validation">
+          <DocsExample href="forms/validation">
             <CForm
               class="row g-3 needs-validation"
               noValidate
@@ -103,7 +103,7 @@
                 <CButton color="primary" type="submit">Submit form</CButton>
               </CCol>
             </CForm>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -124,7 +124,7 @@
             While these feedback styles cannot be styled with CSS, you can still
             customize the feedback text through JavaScript.
           </p>
-          <Example href="forms/validation#browser-defaults">
+          <DocsExample href="forms/validation#browser-defaults">
             <CForm
               class="row g-3 needs-validation"
               :validated="validatedDefault01"
@@ -204,7 +204,7 @@
                 <CButton color="primary" type="submit">Submit form</CButton>
               </CCol>
             </CForm>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -227,7 +227,7 @@
             more than one <code>id</code> to be referenced, in case the field
             already points to additional form text).
           </p>
-          <Example href="forms/validation#server-side">
+          <DocsExample href="forms/validation#server-side">
             <CForm class="row g-3 needs-validation">
               <CCol :md="4">
                 <CFormLabel htmlFor="validationServer01">Email</CFormLabel>
@@ -320,7 +320,7 @@
                 <CButton color="primary" type="submit"> Submit form </CButton>
               </CCol>
             </CForm>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -339,7 +339,7 @@
             <li><code>&lt;CFormSelect&gt;</code>s</li>
             <li><code>&lt;CFormCheck&gt;</code>s</li>
           </ul>
-          <Example href="forms/validation#supported-elements">
+          <DocsExample href="forms/validation#supported-elements">
             <CForm :validated="true">
               <div class="mb-3">
                 <CFormLabel for="validationTextarea" class="form-label"
@@ -410,7 +410,7 @@
                 >
               </div>
             </CForm>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -428,7 +428,7 @@
             the example below, our column classes have this already, but your
             project may require an alternative setup.
           </p>
-          <Example href="forms/validation#tooltips">
+          <DocsExample href="forms/validation#tooltips">
             <CForm
               class="row g-3 needs-validation"
               noValidate
@@ -498,7 +498,7 @@
                 <CButton color="primary" type="submit">Submit form</CButton>
               </CCol>
             </CForm>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/icons/Brands.vue

@@ -6,21 +6,14 @@
           <strong>Vue Brands</strong>
         </CCardHeader>
         <CCardBody>
-          <!-- TODO: icons, brands and flags href-s to documentation -->
-          <Example href="">
           <CRow class="text-center">
             <template v-for="(brand, brandName) in brands" :key="brandName">
-                    <CCol
+              <CCol class="mb-5" col="3" sm="2">
-                    class="mb-5"
-                    col="3"
-                    sm="2"
-                    >
                 <CIcon size="lg" :content="brand" />
                 <div>{{ toKebabCase(brandName) }}</div>
               </CCol>
             </template>
           </CRow>
-          </Example>
         </CCardBody>
       </CCard>
     </CCol>
@@ -30,16 +23,16 @@
 <script>
 import { brandSet as brands } from '@coreui/icons'
 export default {
-  name: "Brands",
+  name: 'Brands',
   data: function () {
     return {
-          brands: brands
+      brands: brands,
     }
   },
   methods: {
     toKebabCase(str) {
       return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
-    }
     },
-};
+  },
+}
 </script>

src/views/icons/CoreUIIcons.vue

@@ -6,20 +6,14 @@
           <strong>Vue CoreUI Icons</strong>
         </CCardHeader>
         <CCardBody>
-          <Example href="">
           <CRow class="text-center">
             <template v-for="(icon, iconName) in freeSet" :key="iconName">
-                    <CCol
+              <CCol class="mb-5" col="3" sm="2">
-                    class="mb-5"
-                    col="3"
-                    sm="2"
-                    >
                 <CIcon :content="icon" size="lg" />
                 <div>{{ toKebabCase(iconName) }}</div>
               </CCol>
             </template>
           </CRow>
-          </Example>
         </CCardBody>
       </CCard>
     </CCol>
@@ -29,16 +23,16 @@
 <script>
 import { freeSet } from '@coreui/icons'
 export default {
-  name: "CoreUIIcons",
+  name: 'CoreUIIcons',
   data: function () {
     return {
-          freeSet: freeSet
+      freeSet: freeSet,
     }
   },
   methods: {
     toKebabCase(str) {
       return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
-    }
     },
-};
+  },
+}
 </script>

src/views/icons/Flags.vue

@@ -6,7 +6,6 @@
           <strong>Vue Flags</strong>
         </CCardHeader>
         <CCardBody>
-            <Example href="">
           <CRow class="text-center">
             <!-- For using the flags inline with text add the classes
                         <code>.flag-icon</code> and <code>.flag-icon-xx</code>
@@ -14,17 +13,12 @@
                         span. If you want to have a squared version flag then add the class
                         flag-icon-squared as well. -->
             <template v-for="(flag, flagName) in flagSet" :key="flagName">
-                        <CCol
+              <CCol class="mb-5" col="3" sm="2">
-                        class="mb-5"
-                        col="3"
-                        sm="2"
-                        >
                 <CIcon size="lg" :content="flag" />
                 <div>{{ toKebabCase(flagName) }}</div>
               </CCol>
             </template>
           </CRow>
-            </Example>
         </CCardBody>
       </CCard>
     </CCol>
@@ -34,16 +28,16 @@
 <script>
 import { flagSet } from '@coreui/icons'
 export default {
-  name: "Flags",
+  name: 'Flags',
   data: function () {
     return {
-          flagSet: flagSet
+      flagSet: flagSet,
     }
   },
   methods: {
     toKebabCase(str) {
       return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
-    }
     },
-};
+  },
+}
 </script>

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>

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>

src/views/notifications/Modals.vue

@@ -1,5 +1,8 @@
 <template>
   <CRow>
+    <CCol :xs="12">
+      <DocsCallout name="Modal" href="components/spinner" />
+    </CCol>
     <CCol :xs="12">
       <CCard class="mb-4">
         <CCardHeader>
@@ -14,7 +17,7 @@
             include modal headers with dismiss actions whenever possible, or
             provide another explicit dismiss action.
           </p>
-          <Example href="components/modal.html#modal-components">
+          <DocsExample href="components/modal.html#modal-components">
             <CModal
               class="show d-block position-static"
               :backdrop="false"
@@ -30,7 +33,7 @@
                 <CButton color="primary">Save changes</CButton>
               </CModalFooter>
             </CModal>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -44,7 +47,7 @@
             Toggle a working modal demo by clicking the button below. It will
             slide down and fade in from the top of the page.
           </p>
-          <Example href="components/modal.html#live-demo">
+          <DocsExample href="components/modal.html#live-demo">
             <CButton
               color="primary"
               @click="
@@ -89,7 +92,7 @@
                 <CButton color="primary">Save changes</CButton>
               </CModalFooter>
             </CModal>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -105,7 +108,7 @@
             meaning it will not close when clicking outside it. Click the button
             below to try it.
           </p>
-          <Example href="components/modal.html#static-backdrop">
+          <DocsExample href="components/modal.html#static-backdrop">
             <CButton
               color="primary"
               @click="
@@ -151,7 +154,7 @@
                 <CButton color="primary">Save changes</CButton>
               </CModalFooter>
             </CModal>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -167,7 +170,7 @@
             meaning it will not close when clicking outside it. Click the button
             below to try it.
           </p>
-          <Example href="components/modal.html#scrolling-long-content">
+          <DocsExample href="components/modal.html#scrolling-long-content">
             <CButton
               color="primary"
               @click="
@@ -294,13 +297,13 @@
                 </p>
               </CModalBody>
             </CModal>
-          </Example>
+          </DocsExample>
           <p class="text-medium-emphasis small">
             You can also create a scrollable modal that allows scroll the modal
             body by adding
             <code>scrollable</code> prop.
           </p>
-          <Example href="components/modal.html#scrolling-long-content">
+          <DocsExample href="components/modal.html#scrolling-long-content">
             <CButton
               color="primary"
               @click="
@@ -428,7 +431,7 @@
                 </p>
               </CModalBody>
             </CModal>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -442,7 +445,7 @@
             Add <code>alignment=&#34;center&#34;</code> to
             <code>&lt;CModal&gt;</code> to vertically center the modal.
           </p>
-          <Example href="components/modal.html#vertically-centered">
+          <DocsExample href="components/modal.html#vertically-centered">
             <CButton
               color="primary"
               @click="
@@ -490,9 +493,9 @@
                 <CButton color="primary">Save changes</CButton>
               </CModalFooter>
             </CModal>
-          </Example>
+          </DocsExample>
 
-          <Example href="components/modal.html#vertically-centered">
+          <DocsExample href="components/modal.html#vertically-centered">
             <CButton
               color="primary"
               @click="
@@ -541,7 +544,7 @@
                 <CButton color="primary">Save changes</CButton>
               </CModalFooter>
             </CModal>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -557,7 +560,7 @@
             needed. When modals are closed, any tooltips and popovers within are
             also automatically dismissed.
           </p>
-          <Example href="components/modal.html#tooltips-and-popovers">
+          <DocsExample href="components/modal.html#tooltips-and-popovers">
             <CButton
               color="primary"
               @click="
@@ -620,7 +623,7 @@
                 <CButton color="primary">Save changes</CButton>
               </CModalFooter>
             </CModal>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -681,7 +684,7 @@
               </tr>
             </tbody>
           </table>
-          <Example href="components/modal.html#optional-sizes">
+          <DocsExample href="components/modal.html#optional-sizes">
             <CButton
               color="primary"
               @click="
@@ -772,7 +775,7 @@
               </CModalHeader>
               <CModalBody> ... </CModalBody>
             </CModal>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -832,7 +835,7 @@
               </tr>
             </tbody>
           </table>
-          <Example href="components/modal.html#fullscreen-modal">
+          <DocsExample href="components/modal.html#fullscreen-modal">
             <CButton
               color="primary"
               @click="
@@ -1013,7 +1016,7 @@
               </CModalHeader>
               <CModalBody> ... </CModalBody>
             </CModal>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>

src/views/widgets/Widgets.vue

@@ -6,10 +6,10 @@
           <strong>Vue Widgets</strong>
         </CCardHeader>
         <CCardBody>
-          <Example href="">
+          <DocsExample href="">
             <WidgetsStatsA />
-          </Example>
+          </DocsExample>
-          <Example href="">
+          <DocsExample href="">
             <CRow>
               <CCol :xs="3">
                 <CWidgetStatsB
@@ -49,8 +49,8 @@
                 />
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
-          <Example href="">
+          <DocsExample href="">
             <CRow>
               <CCol :xs="3">
                 <CWidgetStatsB
@@ -98,9 +98,9 @@
                 />
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
 
-          <Example href="">
+          <DocsExample href="">
             <CRow>
               <CCol :xs="2">
                 <CWidgetStatsE title="title" value="1,123">
@@ -247,8 +247,8 @@
                 </CWidgetStatsE>
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
-          <Example href="">
+          <DocsExample href="">
             <CRow>
               <CCol :xs="3">
                 <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
@@ -279,8 +279,8 @@
                 </CWidgetStatsF>
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
-          <Example href="">
+          <DocsExample href="">
             <CRow>
               <CCol :xs="3">
                 <CWidgetStatsF color="primary" title="Title" value="$1.999,50">
@@ -371,8 +371,8 @@
                 </CWidgetStatsF>
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
-          <Example href="">
+          <DocsExample href="">
             <CRow>
               <CCol :xs="3">
                 <CWidgetStatsF
@@ -423,11 +423,11 @@
                 </CWidgetStatsF>
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
-          <Example href="">
+          <DocsExample href="">
             <WidgetsStatsD />
-          </Example>
+          </DocsExample>
-          <Example href="">
+          <DocsExample href="">
             <CCardGroup>
               <CWidgetStatsC
                 class="mb-3"
@@ -480,8 +480,8 @@
                 /></template>
               </CWidgetStatsC>
             </CCardGroup>
-          </Example>
+          </DocsExample>
-          <Example href="">
+          <DocsExample href="">
             <CRow>
               <CCol :xs="2">
                 <CWidgetStatsC
@@ -556,8 +556,8 @@
                 </CWidgetStatsC>
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
-          <Example href="">
+          <DocsExample href="">
             <CRow>
               <CCol :xs="2">
                 <CWidgetStatsC
@@ -644,7 +644,7 @@
                 </CWidgetStatsC>
               </CCol>
             </CRow>
-          </Example>
+          </DocsExample>
         </CCardBody>
       </CCard>
     </CCol>
@@ -656,7 +656,7 @@ import { getStyle } from "@coreui/utils";
 import { CChart } from "@coreui/vue-chartjs";
 import WidgetsStatsA from "./WidgetsStatsTypeA.vue";
 import WidgetsStatsD from "./WidgetsStatsTypeD.vue";
-import Example from "../../components/Example.vue";
+import Example from "../../components/DocsExample.vue";
 export default {
   name: "Widgets",
   components: {

src/views/widgets/WidgetsStatsTypeA.vue

@@ -46,7 +46,7 @@
                   backgroundColor: 'transparent',
                   borderColor: 'rgba(255,255,255,.55)',
                   pointBackgroundColor: '#321fdb',
-                  data: [65, 59, 84, 84, 51, 55, 40],
+                  data: [68, 59, 84, 84, 51, 55, 40],
                 },
               ],
             }"