refactor: update examples

Author: mrholek

src/components/DocsExample.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="example">
-    <CNav variant="tabs">
+    <CNav variant="underline-border">
       <CNavItem>
         <CNavLink href="#" active>
           <CIcon icon="cil-media-play" class="me-2" />
+          Preview
         </CNavLink>
       </CNavItem>
       <CNavItem>
@@ -13,7 +14,7 @@
         </CNavLink>
       </CNavItem>
     </CNav>
-    <CTabContent class="rounded-bottom">
+    <CTabContent :class="['rounded-bottom', addClass]">
       <CTabPane class="p-3 preview" visible>
         <slot></slot>
       </CTabPane>
@@ -25,16 +26,15 @@
 export default {
   name: 'DocsExample',
   props: {
-    href: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
+    href: String,
+    tabContentClass: String,
   },
   setup(props) {
     const url = `https://coreui.io/vue/docs/${props.href}`
-
+    const addClass = props.tabContentClass
+ 
     return {
+      addClass,
       url,
     }
   },

src/styles/_examples.scss

@@ -9,7 +9,7 @@
   }
 
   .tab-content {
-    background-color: var(--#{$prefix}tertiary-bg) !important;
+    background-color: var(--#{$prefix}tertiary-bg);
   }
 
   & + p {
@@ -51,6 +51,9 @@
     }
 
     // Buttons
+    .col > .btn,
+    .col-auto > .btn,
+    .d-md-block > .btn,
     > .btn,
     > .btn-group {
       margin: .25rem .125rem;

src/views/base/Tables.vue

@@ -447,7 +447,7 @@
             </CTable>
           </DocsExample>
           <p class="text-body-secondary small">
-            <a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
+            <a href="https://coreui.io/docs/utilities/borders#border-color">
               Border color utilities
             </a>
             can be added to change colors:

src/views/buttons/Buttons.vue

@@ -59,7 +59,7 @@
         <CCardBody>
           <p class="text-body-secondary small">
             You can combine button with our
-            <a href="https://icons.coreui.io/">CoreUI Icons</a>.
+            <a href="https://coreui.io/icons/">CoreUI Icons</a>.
           </p>
           <DocsExample href="components/button.html">
             <template

src/views/notifications/Alerts.vue

@@ -12,7 +12,7 @@
             <strong>required</strong> contextual <code>color</code> props (e.g.,
             <code>primary</code>). For inline dismissal, use the
             <a
-              href="https://coreui.io/vue/docs/4.0/components/alert.html#dismissing"
+              href="https://coreui.io/vue/docs/components/alert.html#dismissing"
             >
               dismissing prop
             </a>

src/views/notifications/Toasts.vue

@@ -133,11 +133,11 @@
         <CCardBody>
           <p class="text-body-secondary small">
             Customize your toasts by removing sub-components, tweaking them with
-            <a href="https://coreui.io/docs/4.0/utilities/api">utilities</a>, or by adding your own
+            <a href="https://coreui.io/docs/utilities/api">utilities</a>, or by adding your own
             markup. Here we&#39;ve created a simpler toast by removing the default
             <code>&lt;CToastHeader&gt;</code>, adding a custom hide icon from
-            <a href="https://icons.coreui.io">CoreUI Icons</a>, and using some
-            <a href="https://coreui.io/docs/4.0/utilities/flex">flexbox utilities</a> to adjust the
+            <a href="https://coreui.io/icons/">CoreUI Icons</a>, and using some
+            <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a> to adjust the
             layout.
           </p>
           <DocsExample href="components/toast.html#custom-content">
@@ -173,8 +173,8 @@
         <CCardBody>
           <p class="text-body-secondary small">
             Building on the above example, you can create different toast color schemes with our
-            <a href="https://coreui.io/docs/4.0/utilities/colors">color</a> and
-            <a href="https://coreui.io/docs/4.0//utilities/background">background</a> utilities.
+            <a href="https://coreui.io/docs/utilities/colors">color</a> and
+            <a href="https://coreui.io/docs//utilities/background">background</a> utilities.
             Here we&#39;ve set <code>color=&#34;primary&#34;</code> and added
             <code>.text-white</code> class to the <code>&lt;Ctoast&gt;</code>, and then set
             <code>white</code> property to our close button. For a crisp edge, we remove the default