From 3977cbd88e6c757d696af85171bab4e13b8948e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcin=20Micha=C5=82ek?= <rakieta2015@gmail.com>
Date: Thu, 5 Aug 2021 14:57:37 +0200
Subject: [PATCH] Add views to sections: buttons, icons, notifications

---
 src/_nav.js                           | 178 +++++------
 src/router/index.js                   |  88 ++++++
 src/views/Widgets.vue                 |  22 ++
 src/views/base/Tabs.vue               |  55 +++-
 src/views/buttons/BrandButtons.vue    |  81 +++++
 src/views/buttons/ButtonDropdowns.vue | 305 ++++++++++++++++++
 src/views/buttons/ButtonGroups.vue    | 232 ++++++++++++++
 src/views/buttons/Buttons.vue         | 185 +++++++++++
 src/views/icons/Brands.vue            |  45 +++
 src/views/icons/CoreUIIcons.vue       |  44 +++
 src/views/icons/Flags.vue             |  49 +++
 src/views/notifications/Alerts.vue    |  82 +++++
 src/views/notifications/Badges.vue    |  61 ++++
 src/views/notifications/Modals.vue    | 433 ++++++++++++++++++++++++++
 14 files changed, 1769 insertions(+), 91 deletions(-)
 create mode 100644 src/views/Widgets.vue
 create mode 100644 src/views/buttons/BrandButtons.vue
 create mode 100644 src/views/buttons/ButtonDropdowns.vue
 create mode 100644 src/views/buttons/ButtonGroups.vue
 create mode 100644 src/views/buttons/Buttons.vue
 create mode 100644 src/views/icons/Brands.vue
 create mode 100644 src/views/icons/CoreUIIcons.vue
 create mode 100644 src/views/icons/Flags.vue
 create mode 100644 src/views/notifications/Alerts.vue
 create mode 100644 src/views/notifications/Badges.vue
 create mode 100644 src/views/notifications/Modals.vue

diff --git a/src/_nav.js b/src/_nav.js
index ae945eb2..4f2f6d20 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -119,101 +119,101 @@ export default [
       }
     ]
   },
-  // {
-  //   _name: 'CNavGroup',
-  //   name: 'Buttons',
-  //   route: '/buttons',
-  //   icon: 'cil-cursor',
-  //   children: [
-  //     {
-  //       _name: 'CNavItem',
-  //       name: 'Buttons',
-  //       to: '/buttons/standard-buttons'
-  //     },
-  //     {
-  //       _name: 'CNavItem',
-  //       name: 'Button Dropdowns',
-  //       to: '/buttons/dropdowns'
-  //     },
-  //     {
-  //       _name: 'CNavItem',
-  //       name: 'Button Groups',
-  //       to: '/buttons/button-groups'
-  //     },
-  //     {
-  //       _name: 'CNavItem',
-  //       name: 'Brand Buttons',
-  //       to: '/buttons/brand-buttons'
-  //     }
-  //   ]
-  // },
+  {
+    _name: 'CNavGroup',
+    name: 'Buttons',
+    route: '/buttons',
+    icon: 'cil-cursor',
+    children: [
+      {
+        _name: 'CNavItem',
+        name: 'Buttons',
+        to: '/buttons/standard-buttons'
+      },
+      {
+        _name: 'CNavItem',
+        name: 'Button Dropdowns',
+        to: '/buttons/dropdowns'
+      },
+      {
+        _name: 'CNavItem',
+        name: 'Button Groups',
+        to: '/buttons/button-groups'
+      },
+      {
+        _name: 'CNavItem',
+        name: 'Brand Buttons',
+        to: '/buttons/brand-buttons'
+      }
+    ]
+  },
   // {
   //   _name: 'CNavItem',
   //   name: 'Charts',
   //   to: '/charts',
   //   icon: 'cil-chart-pie'
   // },
-  // {
-  //   _name: 'CNavGroup',
-  //   name: 'Icons',
-  //   route: '/icons',
-  //   icon: 'cil-star',
-  //   children: [
-  //     {
-  //       _name: 'CNavItem',
-  //       name: 'CoreUI Icons',
-  //       to: '/icons/coreui-icons',
-  //       badge: {
-  //         color: 'info',
-  //         text: 'NEW'
-  //       }
-  //     },
-  //     {
-  //       _name: 'CNavItem',
-  //       name: 'Brands',
-  //       to: '/icons/brands'
-  //     },
-  //     {
-  //       _name: 'CNavItem',
-  //       name: 'Flags',
-  //       to: '/icons/flags'
-  //     }
-  //   ]
-  // },
-  // {
-  //   _name: 'CNavGroup',
-  //   name: 'Notifications',
-  //   route: '/notifications',
-  //   icon: 'cil-bell',
-  //   children: [
-  //     {
-  //       _name: 'CNavItem',
-  //       name: 'Alerts',
-  //       to: '/notifications/alerts'
-  //     },
-  //     {
-  //       _name: 'CNavItem',
-  //       name: 'Badges',
-  //       to: '/notifications/badges'
-  //     },
-  //     {
-  //       _name: 'CNavItem',
-  //       name: 'Modals',
-  //       to: '/notifications/modals'
-  //     }
-  //   ]
-  // },
-  // {
-  //   _name: 'CNavItem',
-  //   name: 'Widgets',
-  //   to: '/widgets',
-  //   icon: 'cil-calculator',
-  //   badge: {
-  //     color: 'primary',
-  //     text: 'NEW',
-  //     shape: 'pill'
-  //   }
-  // },
+  {
+   _name: 'CNavGroup',
+    name: 'Icons',
+    route: '/icons',
+    icon: 'cil-star',
+    children: [
+      {
+        _name: 'CNavItem',
+        name: 'CoreUI Icons',
+        to: '/icons/coreui-icons',
+        badge: {
+          color: 'info',
+          text: 'NEW'
+        }
+      },
+      {
+        _name: 'CNavItem',
+        name: 'Brands',
+        to: '/icons/brands'
+      },
+      {
+        _name: 'CNavItem',
+        name: 'Flags',
+        to: '/icons/flags'
+      }
+    ]
+  },
+  {
+    _name: 'CNavGroup',
+    name: 'Notifications',
+    route: '/notifications',
+    icon: 'cil-bell',
+    children: [
+      {
+        _name: 'CNavItem',
+        name: 'Alerts',
+        to: '/notifications/alerts'
+      },
+      {
+        _name: 'CNavItem',
+        name: 'Badges',
+        to: '/notifications/badges'
+      },
+      {
+        _name: 'CNavItem',
+        name: 'Modals',
+        to: '/notifications/modals'
+      }
+    ]
+  },
+  {
+    _name: 'CNavItem',
+    name: 'Widgets',
+    to: '/widgets',
+    icon: 'cil-calculator',
+    badge: {
+      color: 'primary',
+      text: 'NEW',
+      shape: 'pill'
+    }
+  },
   // {
   //   _name: 'CSidebarNavDivider',
   //   _class: 'm-2'
diff --git a/src/router/index.js b/src/router/index.js
index 425f0512..08017f68 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -118,6 +118,94 @@ const routes = [
           }, 
         ],
       },
+      {
+        path: "/buttons",
+        name: "Buttons",
+        component: {
+          render() {
+            return h(resolveComponent('router-view'))
+          }
+        },
+        children: [
+          {
+            path: "/buttons/standard-buttons",
+            name: "Buttons",
+            component: () => import("@/views/buttons/Buttons.vue"),
+          }, 
+          {
+            path: "/buttons/dropdowns",
+            name: "Button Dropdowns",
+            component: () => import("@/views/buttons/ButtonDropdowns.vue"),
+          }, 
+          {
+            path: "/buttons/button-groups",
+            name: "Button Groups",
+            component: () => import("@/views/buttons/ButtonGroups.vue"),
+          }, 
+          {
+            path: "/buttons/brand-buttons",
+            name: "Brand Buttons",
+            component: () => import("@/views/buttons/BrandButtons.vue"),
+          }, 
+        ]
+      },
+      {
+        path: "/icons",
+        name: "Icons",
+        component: {
+          render() {
+            return h(resolveComponent('router-view'))
+          }
+        },
+        children: [
+          {
+            path: "/icons/coreui-icons",
+            name: "CoreUI Icons",
+            component: () => import("@/views/icons/CoreUIIcons.vue"),
+          },
+          {
+            path: "/icons/brands",
+            name: "Brands",
+            component: () => import("@/views/icons/Brands.vue"),
+          },
+          {
+            path: "/icons/flags",
+            name: "Flags",
+            component: () => import("@/views/icons/Flags.vue"),
+          }, 
+        ]
+      },
+      {
+        path: "/notifications",
+        name: "Notifications",
+        component: {
+          render() {
+            return h(resolveComponent('router-view'))
+          }
+        },
+        children: [
+          {
+            path: "/notifications/alerts",
+            name: "Alerts",
+            component: () => import("@/views/notifications/Alerts.vue"),
+          },
+          {
+            path: "/notifications/badges",
+            name: "Badges",
+            component: () => import("@/views/notifications/Badges.vue"),
+          },
+          {
+            path: "/notifications/modals",
+            name: "Modals",
+            component: () => import("@/views/notifications/Modals.vue"),
+          },
+        ]
+      },
+      {
+        path: "/widgets",
+        name: "Widgets",
+        component: () => import("@/views/Widgets.vue"),
+      },
     ],
   },
   // {
diff --git a/src/views/Widgets.vue b/src/views/Widgets.vue
new file mode 100644
index 00000000..cf31189c
--- /dev/null
+++ b/src/views/Widgets.vue
@@ -0,0 +1,22 @@
+<template>
+  <CRow>
+    <CCol>
+      <CCard>
+        <CCardHeader>
+          <strong>Vue Widgets</strong>
+        </CCardHeader>
+        <CCardBody>
+          <Example href="">
+
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+export default {
+  name: "Widgets",
+};
+</script>
\ No newline at end of file
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
index 3f8cd800..16da3f09 100644
--- a/src/views/base/Tabs.vue
+++ b/src/views/base/Tabs.vue
@@ -6,8 +6,53 @@
           <strong>Vue Tabs</strong>
         </CCardHeader>
         <CCardBody>
-          <Example href="breadcrumbs">
-
+          <Example href="components/tabs.html">
+            <CNav variant="tabs">
+              <CNavItem>
+                <CNavLink href="#" @click="activeTabA=1">
+                  Active
+                </CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#" @click="activeTabA=2">
+                  Link
+                </CNavLink>
+              </CNavItem>
+              <CNavItem>
+                <CNavLink href="#" @click="activeTabA=3">
+                  Link
+                </CNavLink>
+              </CNavItem>
+            </CNav>
+            <CTabContent>
+              <CTabPane :visible="activeTabA == 1">
+                Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
+                aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
+                helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
+                banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
+                Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
+              </CTabPane>
+              <CTabPane :visible="activeTabA == 2">
+                Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
+                Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
+                artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
+                enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
+                organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
+                yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
+                anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
+                biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
+                accusamus tattooed echo park.
+              </CTabPane>
+              <CTabPane :visible="activeTabA == 3">
+                Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's
+                organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
+                pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
+                hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred
+                pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie
+                etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl
+                craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
+              </CTabPane>
+            </CTabContent>
           </Example>
         </CCardBody>
       </CCard>
@@ -18,5 +63,11 @@
 <script>
 export default {
   name: "Tabs",
+  data: function(){
+    return {
+      activeTabA: 1,
+      activeTabB: 1
+    }
+  }
 };
 </script>
\ No newline at end of file
diff --git a/src/views/buttons/BrandButtons.vue b/src/views/buttons/BrandButtons.vue
new file mode 100644
index 00000000..b05b7f59
--- /dev/null
+++ b/src/views/buttons/BrandButtons.vue
@@ -0,0 +1,81 @@
+<template>
+  <CRow>
+    <CCol>
+      <CCard>
+        <CCardHeader>
+          <strong>Vue Brand Buttons</strong>
+        </CCardHeader>
+        <CCardBody>
+
+             TODO: check did I should remove brand-buttons
+
+          <Example href="breadcrumbs">
+            <template v-for="(brandName, key) in brands" :key="key">
+              <CButton
+                :name="brandName"
+                :color="brandName"
+                class="btn-brand"
+              >
+                <CIcon :name="'cib-' + brandName"/>
+                <span>{{brandName}}</span>
+              </CButton>
+            </template>
+            
+            <template v-for="(brandName, key) in brands" :key="key">
+              <CButton
+                :name="brandName"
+                size="sm"
+                :color="brandName"
+                class="btn-brand"
+              >
+                <CIcon size="sm" :name="'cib-' + brandName"/>
+                <span>{{brandName}}</span>
+              </CButton>
+            </template>
+
+            <template v-for="(brandName, key) in brands" :key="key">
+              <CButton
+                :name="brandName"
+                size="lg"
+                :color="brandName"
+                class="btn-brand"
+              >
+                <CIcon size="lg" :name="'cib-' + brandName"/>
+                <span>{{brandName}}</span>
+              </CButton>
+            </template>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+export default {
+  name: "BrandButtons",
+  data: function(){
+      return {
+        brands: [
+            'facebook',
+            'twitter',
+            'linkedin',
+            'flickr',
+            'tumblr',
+            'xing',
+            'github',
+            'stackoverflow',
+            'youtube',
+            'dribbble',
+            'instagram',
+            'pinterest',
+            'vk',
+            'yahoo',
+            'behance',
+            'reddit',
+            'vimeo'
+        ]
+      }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/views/buttons/ButtonDropdowns.vue b/src/views/buttons/ButtonDropdowns.vue
new file mode 100644
index 00000000..f4867580
--- /dev/null
+++ b/src/views/buttons/ButtonDropdowns.vue
@@ -0,0 +1,305 @@
+<template>
+  <CRow>
+    <CCol>
+      <CCard>
+        <CCardHeader>
+          <strong>Vue Button Dropdowns</strong>
+        </CCardHeader>
+        <CCardBody>
+
+
+            <h4 class="mt-4">Single button</h4>
+            <CRow>
+            <CCol md="6">
+            <Example href="components/dropdown.html#single-button">
+                <CDropdown color="secondary">
+                    <CDropdownToggle color="primary">Dropdown Button</CDropdownToggle>
+                    <CDropdownMenu>
+                        <CDropdownItem href="#">Action</CDropdownItem>
+                        <CDropdownItem href="#">Another action</CDropdownItem>
+                        <CDropdownItem href="#">Something else here</CDropdownItem>
+                    </CDropdownMenu>
+                </CDropdown>
+            </Example>
+            </CCol>
+            <CCol md="6">
+            <Example href="components/dropdown.html#single-button">
+                <CDropdown color="secondary" togglerText="Dropdown button">
+                    <CDropdownToggle component="a" color="primary">Dropdown Button</CDropdownToggle>
+                    <CDropdownMenu>
+                        <CDropdownItem href="#">Action</CDropdownItem>
+                        <CDropdownItem href="#">Another action</CDropdownItem>
+                        <CDropdownItem href="#">Something else here</CDropdownItem>
+                    </CDropdownMenu>  
+                </CDropdown>
+            </Example>
+            </CCol>
+            </CRow>
+            <Example href="components/dropdown.html#single-button">
+                <template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
+                    <CDropdown :color="item" :togglerText="item" variant="btn-group">
+                        <CDropdownToggle :color="item">{{item}}</CDropdownToggle>
+                        <CDropdownMenu>
+                        <CDropdownItem href="#">Action</CDropdownItem>
+                        <CDropdownItem href="#">Another action</CDropdownItem>
+                        <CDropdownItem href="#">Something else here</CDropdownItem>
+                        </CDropdownMenu>
+                    </CDropdown>
+                </template>
+            </Example>
+
+            <h4 class="mt-4">Split button</h4>
+            <Example href="components/dropdown.html#split-button">
+                <template v-for="(item) in ['primary', 'secondary', 'success', 'info', 'warning', 'danger']">
+                    <CDropdown :color="item" :togglerText="item" variant="btn-group">
+                        <CButton :color="item">{{ item }}</CButton>
+                        <CDropdownToggle :color="item" split>{{item}}</CDropdownToggle>
+                        <CDropdownMenu>
+                        <CDropdownItem href="#">Action</CDropdownItem>
+                        <CDropdownItem href="#">Another action</CDropdownItem>
+                        <CDropdownItem href="#">Something else here</CDropdownItem>
+                        </CDropdownMenu>
+                    </CDropdown>
+                </template>
+            </Example>
+
+            <h4 class="mt-4">Sizing</h4>
+            <Example href="components/dropdown.html#sizing">
+                <CDropdown variant="btn-group">
+                    <CDropdownToggle color="secondary" size="lg">Large button</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>
+                    <CDropdown variant="btn-group">
+                    <CButton color="secondary" size="lg">Large split button</CButton>
+                    <CDropdownToggle color="secondary" size="lg" split>Large button</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>
+                <CDropdown variant="btn-group">
+                    <CDropdownToggle color="secondary" size="sm">Small button</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>
+                    <CDropdown variant="btn-group">
+                    <CButton color="secondary" size="sm">Small split button</CButton>
+                    <CDropdownToggle color="secondary" size="sm" split>Small button</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>
+            </Example>
+
+            <h4 class="mt-4">Dark dropdowns</h4>
+            <Example href="components/dropdown.html#dark-dropdowns">
+                <CDropdown color="secondary" dark>
+                    <CDropdownToggle color="primary">Dropdown Button</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>
+            </Example>
+            <p>In navbar:</p>
+            <Example href="components/dropdown.html#dark-dropdowns">
+                <CNavbar expand="lg" colorScheme="dark" class="bg-dark">
+                    <CContainer fluid>
+                        <CNavbarBrand href="#">Navbar</CNavbarBrand>
+                        <CNavbarNav>
+                        <CDropdown dark variant="nav-item">
+                            <CDropdownToggle color="primary">Dropdown Button</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>
+                        </CNavbarNav>
+                    </CContainer>
+                </CNavbar>
+            </Example>
+
+            <h4 class="mt-4">Directions</h4>
+            <Example href="components/dropdown.html#directions">
+                <CDropdown color="secondary" direction="dropup">
+                    <CDropdownToggle color="secondary">Dropup</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>
+                    <CDropdown color="secondary" direction="dropup">
+                    <CButton color="secondary">Split dropup</CButton>
+                    <CDropdownToggle color="secondary" 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>
+            </Example>
+            <Example href="components/dropdown.html#directions">
+                <CDropdown color="secondary" direction="dropend">
+                    <CDropdownToggle color="secondary">Dropend</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>
+                    <CDropdown color="secondary" direction="dropend">
+                    <CButton color="secondary">Split dropend</CButton>
+                    <CDropdownToggle color="secondary" 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>
+            </Example>
+            <Example href="components/dropdown.html#directions">
+                <CDropdown color="secondary" direction="dropstart">
+                    <CDropdownToggle color="secondary">Dropstart</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>
+                    <CButtonGroup>
+                    <CDropdown color="secondary" direction="dropstart">
+                        <CDropdownToggle color="secondary" 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>
+                    <CButton color="secondary">Split dropstart</CButton>
+                </CButtonGroup>
+            </Example>
+
+            <h4 class="mt-4">Responsive alignment</h4>
+            <Example href="components/dropdown.html#responsive-alignment">
+                <CDropdown color="secondary" :alignment="{ 'lg': 'end' }">
+                    <CDropdownToggle color="secondary">Left-aligned but right aligned when large screen</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>
+            </Example>
+            <Example href="components/dropdown.html#responsive-alignment">
+                <CDropdown color="secondary" :alignment="{ 'xs': 'end', 'lg': 'start' }">
+                    <CDropdownToggle color="secondary">Right-aligned but left aligned when large screen</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>
+            </Example>
+
+            <h4 class="mt-4">Dropdown menu content examples</h4>
+            <Example href="components/dropdown.html#menu-content">
+                <div class="border rounded py-2">
+                    <CDropdownHeader>Dropdown header</CDropdownHeader>
+                    <CDropdownItem href="#">Action</CDropdownItem>
+                    <CDropdownItem href="#">Another action</CDropdownItem>
+                </div>
+            </Example>
+            <Example href="components/dropdown.html#menu-content">
+                <div class="border rounded py-2">
+                    <CDropdownItem href="#">Action</CDropdownItem>
+                    <CDropdownItem href="#">Another action</CDropdownItem>
+                    <CDropdownItem href="#">Something else here</CDropdownItem>
+                    <CDropdownDivider/>
+                    <CDropdownItem href="#">Separated link</CDropdownItem>
+                </div>
+            </Example>
+            <Example href="components/dropdown.html#menu-content">
+                <div class="border rounded p-4 text-muted" style="max-width: 200px">
+                    <p>
+                        Some example text that's free-flowing within the dropdown menu.
+                    </p>
+                    <p class="mb-0">
+                        And this is more example text.
+                    </p>
+                </div>
+            </Example>
+            <Example href="components/dropdown.html#menu-content">
+                <div class="border rounded py-2">
+                    <CForm class="px-4 py-4">
+                        <div class="mb-3">
+                        <CFormLabel for="exampleDropdownFormEmail1">Email address</CFormLabel>
+                        <CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com"/>
+                        </div>
+                        <div class="mb-3">
+                        <CFormLabel for="exampleDropdownFormPassword1">Password</CFormLabel>
+                        <CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password"/>
+                        </div>
+                        <div class="mb-3">
+                        <CFormCheck id="dropdownCheck" label="Remember me"/>
+                        </div>
+                        <CButton type="submit">Sign in</CButton>
+                    </CForm>
+                    <CDropdownDivider/>
+                    <CDropdownItem href="#">New around here? Sign up</CDropdownItem>
+                    <CDropdownItem href="#">Forgot password?</CDropdownItem>
+                </div>
+            </Example>
+
+
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+export default {
+  name: "ButtonDropdowns",
+};
+</script>
\ No newline at end of file
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
new file mode 100644
index 00000000..5f5021b4
--- /dev/null
+++ b/src/views/buttons/ButtonGroups.vue
@@ -0,0 +1,232 @@
+<template>
+  <CRow>
+    <CCol>
+      <CCard>
+        <CCardHeader>
+          <strong>Vue Button Groups</strong>
+        </CCardHeader>
+        <CCardBody>
+            <h4 class="mt-4">Basic example</h4>
+            <CRow>
+            <CCol md="6">
+                <Example href="components/button-group.html#basic-example">
+                    <CButtonGroup role="group" aria-label="Basic example">
+                        <CButton color="primary">Left</CButton>
+                        <CButton color="primary">Middle</CButton>
+                        <CButton color="primary">Right</CButton>
+                    </CButtonGroup>
+                </Example>
+            </CCol>
+            <CCol md="6">
+                <Example href="components/button-group.html#basic-example">
+                    <CButtonGroup>
+                        <CButton href="#" color="primary" active>Active link</CButton>
+                        <CButton href="#" color="primary">Link</CButton>
+                        <CButton href="#" color="primary">Link</CButton>
+                    </CButtonGroup>
+                </Example>
+            </CCol>
+            </CRow>
+
+
+            <CRow>
+            <CCol md="6">
+                <h4 class="mt-4">Mixed styles</h4>
+                <Example href="components/button-group.html#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>
+            </CCol>
+            <CCol md="6">
+                <h4 class="mt-4">Outlined styles</h4>
+                <Example href="components/button-group.html#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>
+            </CCol>
+            </CRow>
+
+
+            <h4 class="mt-4">Checkbox and radio button groups</h4>
+            <CRow>
+            <CCol md="6">
+                <Example href="components/button-group.html#checkbox-and-radio-button-groups">
+                    <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
+                        <CFormCheck button buttonVariant="outline" id="btncheck1" autoComplete="off" label="Checkbox 1"/>
+                        <CFormCheck button buttonVariant="outline" id="btncheck2" autoComplete="off" label="Checkbox 2"/>
+                        <CFormCheck button buttonVariant="outline" id="btncheck3" autoComplete="off" label="Checkbox 3"/>
+                    </CButtonGroup>
+                </Example>
+            </CCol>
+            <CCol md="6">
+                <Example href="components/button-group.html#checkbox-and-radio-button-groups">
+                    <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
+                        <CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio1" autoComplete="off" label="Radio 1"/>
+                        <CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio2" autoComplete="off" label="Radio 2"/>
+                        <CFormCheck type="radio" button buttonVariant="outline" name="btnradio" id="btnradio3" autoComplete="off" label="Radio 3"/>
+                    </CButtonGroup>
+                </Example>
+            </CCol>
+            </CRow>
+
+
+            <h4 class="mt-4">Button toolbar</h4>
+                <Example href="components/button-group.html#button-toolbar">
+                    <CButtonToolbar role="group" aria-label="Toolbar with button groups">
+                        <CButtonGroup class="me-2" role="group" aria-label="First group">
+                            <CButton color="primary">1</CButton>
+                            <CButton color="primary">2</CButton>
+                            <CButton color="primary">3</CButton>
+                            <CButton color="primary">4</CButton>
+                        </CButtonGroup>
+                        <CButtonGroup class="me-2" role="group" aria-label="Second group">
+                            <CButton color="secondary">5</CButton>
+                            <CButton color="secondary">6</CButton>
+                            <CButton color="secondary">7</CButton>
+                        </CButtonGroup>
+                        <CButtonGroup class="me-2" role="group" aria-label="Third group">
+                            <CButton color="info">8</CButton>
+                        </CButtonGroup>
+                    </CButtonToolbar>
+                </Example>
+                <Example href="components/button-group.html#button-toolbar">
+                    <CButtonToolbar class="mb-3" role="group" aria-label="Toolbar with button groups">
+                        <CButtonGroup class="me-2" role="group" aria-label="First group">
+                            <CButton color="secondary" variant="outline">1</CButton>
+                            <CButton color="secondary" variant="outline">2</CButton>
+                            <CButton color="secondary" variant="outline">3</CButton>
+                            <CButton color="secondary" variant="outline">4</CButton>
+                        </CButtonGroup>
+                        <CInputGroup>
+                            <CInputGroupText>@</CInputGroupText>
+                            <CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
+                        </CInputGroup>
+                        </CButtonToolbar>
+                        <CButtonToolbar class="justify-content-between" role="group" aria-label="Toolbar with button groups">
+                        <CButtonGroup class="me-2" role="group" aria-label="First group">
+                            <CButton color="secondary" variant="outline">1</CButton>
+                            <CButton color="secondary" variant="outline">2</CButton>
+                            <CButton color="secondary" variant="outline">3</CButton>
+                            <CButton color="secondary" variant="outline">4</CButton>
+                        </CButtonGroup>
+                        <CInputGroup>
+                            <CInputGroupText>@</CInputGroupText>
+                            <CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
+                        </CInputGroup>
+                    </CButtonToolbar>
+                </Example>
+
+            <h4 class="mt-4">Sizing</h4>
+                <Example href="components/button-group.html#sizing">
+                    <CButtonGroup size="lg" role="group" aria-label="Large button group">
+                        <CButton color="dark" variant="outline">Left</CButton>
+                        <CButton color="dark" variant="outline">Middle</CButton>
+                        <CButton color="dark" variant="outline">Right</CButton>
+                    </CButtonGroup>
+                    <br/>
+                    <CButtonGroup role="group" aria-label="Default button group">
+                        <CButton color="dark" variant="outline">Left</CButton>
+                        <CButton color="dark" variant="outline">Middle</CButton>
+                        <CButton color="dark" variant="outline">Right</CButton>
+                    </CButtonGroup>
+                    <br/>
+                    <CButtonGroup size="sm" role="group" aria-label="Small button group">
+                        <CButton color="dark" variant="outline">Left</CButton>
+                        <CButton color="dark" variant="outline">Middle</CButton>
+                        <CButton color="dark" variant="outline">Right</CButton>
+                    </CButtonGroup>
+                </Example>
+
+            <h4 class="mt-4">Vertical variation</h4>
+            <CRow>
+            <CCol md="4">
+                <Example href="components/button-group.html#vertical-variation">
+                    <CButtonGroup vertical role="group" aria-label="Vertical button group">
+                        <CButton color="dark">Button</CButton>
+                        <CButton color="dark">Button</CButton>
+                        <CButton color="dark">Button</CButton>
+                        <CButton color="dark">Button</CButton>
+                        <CButton color="dark">Button</CButton>
+                        <CButton color="dark">Button</CButton>
+                        <CButton color="dark">Button</CButton>
+                    </CButtonGroup>
+                </Example>
+            </CCol>
+            <CCol md="4">
+                <Example href="components/button-group.html#vertical-variation">
+                    <CButtonGroup vertical role="group" aria-label="Vertical button group">
+                        <CButton color="primary">Button</CButton>
+                        <CButton color="primary">Button</CButton>
+                        <CDropdown variant="btn-group">
+                            <CDropdownToggle color="primary">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>
+                        <CButton color="primary">Button</CButton>
+                        <CButton color="primary">Button</CButton>
+                        <CDropdown variant="btn-group">
+                            <CDropdownToggle color="primary">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>
+                        <CDropdown variant="btn-group">
+                            <CDropdownToggle color="primary">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>
+                        <CDropdown variant="btn-group">
+                            <CDropdownToggle color="primary">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>
+                    </CButtonGroup>
+                </Example>
+            </CCol>
+            <CCol md="4">
+                <Example href="components/button-group.html#vertical-variation">
+                    <CButtonGroup vertical role="group" aria-label="Vertical button group">
+                        <CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio1" autoComplete="off" label="Radio 1" defaultChecked/>
+                        <CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio2" autoComplete="off" label="Radio 2"/>
+                        <CFormCheck type="radio" button buttonColor="danger" buttonVariant="outline" name="vbtnradio" id="vbtnradio3" autoComplete="off" label="Radio 3"/>
+                    </CButtonGroup>
+                </Example>
+            </CCol>
+            </CRow>
+
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+export default {
+  name: "ButtonGroups",
+};
+</script>
\ No newline at end of file
diff --git a/src/views/buttons/Buttons.vue b/src/views/buttons/Buttons.vue
new file mode 100644
index 00000000..9b02d9aa
--- /dev/null
+++ b/src/views/buttons/Buttons.vue
@@ -0,0 +1,185 @@
+<template>
+  <CRow>
+    <CCol>
+      <CCard>
+        <CCardHeader>
+          <strong>Vue Buttons</strong>
+        </CCardHeader>
+        <CCardBody>
+          <Example href="components/button.html#examples">
+
+            <template v-for="(shape) in [null, 'rounded-pill', 'rounded-0', 'rounded-circle']">
+                <h4 class="mt-4">Shape {{ shape === null ? 'standard' : shape === 'rounded-0' ? ' square' : shape }}:</h4>
+                <CRow>
+                    <CCol md="12" class="mt-4">
+                        <strong>Standard</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" class="m-2" :shape="shape">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                    <CCol md="12" class="mt-4">
+                        <strong>Standard disabled</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" disabled class="m-2" :shape="shape">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                    <CCol md="12" class="mt-4">
+                        <strong>Variant outline</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" variant="outline" class="m-2" :shape="shape">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                    <CCol md="12" class="mt-4">
+                        <strong>Variant outline disabled</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" variant="outline" disabled class="m-2" :shape="shape">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                    <CCol md="12" class="mt-4">
+                        <strong>Variant ghost</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" variant="ghost" class="m-2" :shape="shape">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                    <CCol md="12" class="mt-4">
+                        <strong>Variant ghost disabled</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                </CRow>
+
+                <CRow>
+                    <CCol md="12" class="mt-4">
+                        <strong>Standard size="sm"</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                    <CCol md="12" class="mt-4">
+                        <strong>Standard disabled size="sm"</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                    <CCol md="12" class="mt-4">
+                        <strong>Variant outline size="sm"</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" variant="outline" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                    <CCol md="12" class="mt-4">
+                        <strong>Variant outline disabled size="sm"</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" variant="outline" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                    <CCol md="12" class="mt-4">
+                        <strong>Variant ghost size="sm"</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" variant="ghost" class="m-2" :shape="shape" size="sm">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                    <CCol md="12" class="mt-4">
+                        <strong>Variant ghost disabled size="sm"</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape" size="sm">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                </CRow>
+
+
+                <CRow>
+                    <CCol md="12" class="mt-4">
+                        <strong>Standard size="lg"</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                    <CCol md="12" class="mt-4">
+                        <strong>Standard disabled size="lg"</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                    <CCol md="12" class="mt-4">
+                        <strong>Variant outline size="lg"</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" variant="outline" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                    <CCol md="12" class="mt-4">
+                        <strong>Variant outline disabled size="lg"</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" variant="outline" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                    <CCol md="12" class="mt-4">
+                        <strong>Variant ghost size="lg"</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" variant="ghost" class="m-2" :shape="shape" size="lg">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                    <CCol md="12" class="mt-4">
+                        <strong>Variant ghost disabled size="lg"</strong>
+                        <br>
+                        <template v-for="(item) in ['primary', 'secondary', 'success', 'danger', 'info', 'light', 'dark', 'link']">
+                            <CButton :color="item" variant="ghost" disabled class="m-2" :shape="shape" size="lg">{{item}}</CButton>
+                        </template>
+                    </CCol>
+                </CRow>
+            </template>
+          </Example>
+
+            <h4 class="mt-4">Block buttons</h4>
+
+            <Example href="components/button.html#block-buttons">
+                <div class="d-grid gap-2">
+                    <CButton color="primary">Button</CButton>
+                    <CButton color="primary">Button</CButton>
+                </div>
+                <br><br>
+                <div class="d-grid gap-2 d-md-block">
+                    <CButton color="primary">Button</CButton>
+                    <CButton color="primary">Button</CButton>
+                </div>
+                <br><br>
+                <div class="d-grid gap-2 col-6 mx-auto">
+                    <CButton color="primary">Button</CButton>
+                    <CButton color="primary">Button</CButton>
+                </div>
+                <br><br>
+                <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>
+
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+export default {
+  name: "Buttons",
+};
+</script>
\ No newline at end of file
diff --git a/src/views/icons/Brands.vue b/src/views/icons/Brands.vue
new file mode 100644
index 00000000..03f277a2
--- /dev/null
+++ b/src/views/icons/Brands.vue
@@ -0,0 +1,45 @@
+<template>
+  <CRow>
+    <CCol>
+      <CCard>
+        <CCardHeader>
+          <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
+                    class="mb-5"
+                    col="3"
+                    sm="2"
+                    >
+                    <CIcon size="lg" :content="brand"/>
+                    <div>{{toKebabCase(brandName)}}</div>
+                    </CCol>
+                </template>
+            </CRow>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+import { brandSet as brands } from '@coreui/icons'
+export default {
+  name: "Brands",
+  data: function(){
+      return {
+          brands: brands
+      }
+  },
+  methods: {
+    toKebabCase (str) {
+      return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+    }
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
new file mode 100644
index 00000000..906f3fa9
--- /dev/null
+++ b/src/views/icons/CoreUIIcons.vue
@@ -0,0 +1,44 @@
+<template>
+  <CRow>
+    <CCol>
+      <CCard>
+        <CCardHeader>
+          <strong>Vue CoreUI Icons</strong>
+        </CCardHeader>
+        <CCardBody>
+          <Example href="">
+            <CRow class="text-center">
+                <template v-for="(icon, iconName) in freeSet" :key="iconName">
+                    <CCol
+                    class="mb-5"
+                    col="3"
+                    sm="2"
+                    >
+                        <CIcon :content="icon" size="lg"/>
+                        <div>{{toKebabCase(iconName)}}</div>
+                    </CCol>
+                </template>
+            </CRow>
+          </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+import { freeSet } from '@coreui/icons'
+export default {
+  name: "CoreUIIcons",
+  data: function(){
+      return {
+          freeSet: freeSet
+      }
+  },
+  methods: {
+    toKebabCase (str) {
+      return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+    }
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/icons/Flags.vue b/src/views/icons/Flags.vue
new file mode 100644
index 00000000..5e0e35d2
--- /dev/null
+++ b/src/views/icons/Flags.vue
@@ -0,0 +1,49 @@
+<template>
+  <CRow>
+    <CCol>
+      <CCard>
+        <CCardHeader>
+          <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>
+                        (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
+                        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
+                        class="mb-5"
+                        col="3"
+                        sm="2"
+                        >
+                        <CIcon size="lg" :content="flag"/>
+                        <div>{{toKebabCase(flagName)}}</div>
+                        </CCol>
+                    </template>
+                </CRow>
+            </Example>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+import { flagSet } from '@coreui/icons'
+export default {
+  name: "Flags",
+  data: function(){
+      return {
+          flagSet: flagSet
+      }
+  },
+  methods: {
+    toKebabCase (str) {
+      return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+    }
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
new file mode 100644
index 00000000..abe76de7
--- /dev/null
+++ b/src/views/notifications/Alerts.vue
@@ -0,0 +1,82 @@
+<template>
+  <CRow>
+    <CCol>
+      <CCard>
+        <CCardHeader>
+          <strong>Vue Alerts</strong>
+        </CCardHeader>
+        <CCardBody>
+            <h4 class="mt-4">Alerts examples</h4>
+            <Example href="components/alert.html#examples">
+                <CAlert color="primary">A simple primary alert—check it out!</CAlert>
+                <CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
+                <CAlert color="success">A simple success alert—check it out!</CAlert>
+                <CAlert color="danger">A simple danger alert—check it out!</CAlert>
+                <CAlert color="warning">A simple warning alert—check it out!</CAlert>
+                <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>
+
+            <h4 class="mt-4">Link color</h4>
+            <Example href="components/alert.html#link-color">
+                <CAlert color="primary">
+                    A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
+                </CAlert>
+                <CAlert color="secondary">
+                    A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
+                </CAlert>
+                <CAlert color="success">
+                    A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
+                </CAlert>
+                <CAlert color="danger">
+                    A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
+                </CAlert>
+                <CAlert color="warning">
+                    A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
+                </CAlert>
+                <CAlert color="info">
+                    A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
+                </CAlert>
+                <CAlert color="light">
+                    A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
+                </CAlert>
+                <CAlert color="dark">
+                    A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
+                </CAlert>
+            </Example>
+
+            <h4 class="mt-4">Additional content</h4>
+            <Example href="components/alert.html#additional-content">
+                <CAlert color="success" v-bind:visible="true">
+                    <CAlertHeading>Well done!</CAlertHeading>
+                    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+                    <hr />
+                    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+                </CAlert>
+            </Example>
+
+            <h4 class="mt-4">Dismissing</h4>
+            <Example href="components/alert.html#dismissing">
+                <CAlert color="warning" dismissible @dismiss="alert">
+                    <strong>Go right ahead</strong> and click that dimiss over there on the right.
+                </CAlert>
+            </Example>
+
+
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+export default {
+    name: "Alerts",
+    methods: {
+      alert: function(){
+        alert("👋 Well, hi there! Thanks for dismissing me.")
+      },
+    }
+};
+</script>
\ No newline at end of file
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
new file mode 100644
index 00000000..ee46e077
--- /dev/null
+++ b/src/views/notifications/Badges.vue
@@ -0,0 +1,61 @@
+<template>
+  <CRow>
+    <CCol>
+      <CCard>
+        <CCardHeader>
+          <strong>Vue Badges</strong>
+        </CCardHeader>
+        <CCardBody>
+            <h4 class="mt-4">Basic usage</h4>
+            <Example href="components/badge.html#basic-usage">
+                <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>
+            <Example href="components/badge.html#basic-usage">
+                <CButton color="primary">
+                    Notifications <CBadge color="secondary">4</CBadge>
+                </CButton>
+                <br>
+                <CButton color="primary">
+                    Profile <CBadge color="secondary">9</CBadge>
+                    <span class="visually-hidden">unread messages</span>
+                </CButton>
+
+            </Example>
+
+            <h4 class="mt-4">Contextual variations</h4>
+            <Example href="components/badge.html#contextual-variations">
+                <CBadge color="primary">primary</CBadge>
+                <CBadge color="success">success</CBadge>
+                <CBadge color="danger">danger</CBadge>
+                <CBadge color="warning">warning</CBadge>
+                <CBadge color="info">info</CBadge>
+                <CBadge color="light">light</CBadge>
+                <CBadge color="dark">dark</CBadge>
+            </Example>
+
+            <h4 class="mt-4">Pill badges</h4>
+            <Example href="components/badge.html#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>
+                <CBadge color="warning" shape="rounded-pill">warning</CBadge>
+                <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>
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+export default {
+  name: "Badges",
+};
+</script>
\ No newline at end of file
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
new file mode 100644
index 00000000..240a6fdf
--- /dev/null
+++ b/src/views/notifications/Modals.vue
@@ -0,0 +1,433 @@
+<template>
+  <CRow>
+    <CCol>
+      <CCard>
+        <CCardHeader>
+          <strong>Vue Modals</strong>
+        </CCardHeader>
+        <CCardBody>
+            <h4 class="mt-4">Example</h4>
+            <Example href="components/modal.html#modal-components">
+                <CModal class="show d-block position-static" :backdrop="false" :keyboard="false" visible>
+                    <CModalHeader dismiss>
+                        <CModalTitle>Modal title</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>Modal body text goes here.</CModalBody>
+                    <CModalFooter>
+                        <CButton color="secondary">Close</CButton>
+                        <CButton color="primary">Save changes</CButton>
+                    </CModalFooter>
+                </CModal>
+            </Example>
+
+            <h4 class="mt-4">Live demo</h4>
+            <Example href="components/modal.html#live-demo">
+                <CButton color="primary" @click="() => { visibleLiveDemo = true }">Launch demo modal</CButton>
+                <CModal :visible="visibleLiveDemo" @dismiss="() => { visibleLiveDemo = false }">
+                    <CModalHeader dismiss @dismiss="() => { visibleLiveDemo = false }">
+                        <CModalTitle>Modal title</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
+                    <CModalFooter>
+                        <CButton color="secondary" @click="() => { visibleLiveDemo = false }">
+                            Close
+                        </CButton>
+                        <CButton color="primary">Save changes</CButton>
+                    </CModalFooter>
+                </CModal>
+            </Example>
+
+            <h4 class="mt-4">Static backdrop</h4>
+            <Example href="components/modal.html#static-backdrop">
+                <CButton color="primary" @click="() => { visibleStaticBackdropDemo = true }">Launch demo modal</CButton>
+                <CModal backdrop="static" :visible="visibleStaticBackdropDemo" @dismiss="() => { visibleStaticBackdropDemo = false }">
+                    <CModalHeader dismiss @dismiss="() => { visibleStaticBackdropDemo = false }">
+                        <CModalTitle>Modal title</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
+                    <CModalFooter>
+                        <CButton color="secondary" @click="() => { visibleStaticBackdropDemo = false }">
+                            Close
+                        </CButton>
+                        <CButton color="primary">Save changes</CButton>
+                    </CModalFooter>
+                </CModal>
+            </Example>
+
+
+            <h4 class="mt-4">Scrolling long content</h4>
+            <Example href="components/modal.html#scrolling-long-content">
+                <CButton color="primary" @click="() => { visibleScrollingLongContentDemo = true }">Launch demo modal</CButton>
+                <CModal :visible="visibleScrollingLongContentDemo" @dismiss="() => { visibleScrollingLongContentDemo = false }">
+                    <CModalHeader dismiss @dismiss="() => { visibleScrollingLongContentDemo = false }">
+                        <CModalTitle>Modal title</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>
+                        <p>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+                            at eros.
+                        </p>
+                        <p>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+                            lacus vel augue laoreet rutrum faucibus dolor auctor.
+                        </p>
+                        <p>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+                            auctor fringilla.
+                        </p>
+                        <p>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+                            at eros.
+                        </p>
+                        <p>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+                            lacus vel augue laoreet rutrum faucibus dolor auctor.
+                        </p>
+                        <p>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+                            auctor fringilla.
+                        </p>
+                        <p>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+                            at eros.
+                        </p>
+                        <p>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+                            lacus vel augue laoreet rutrum faucibus dolor auctor.
+                        </p>
+                        <p>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+                            auctor fringilla.
+                        </p>
+                        <p>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+                            at eros.
+                        </p>
+                        <p>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+                            lacus vel augue laoreet rutrum faucibus dolor auctor.
+                        </p>
+                        <p>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+                            auctor fringilla.
+                        </p>
+                        <p>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+                            at eros.
+                        </p>
+                        <p>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+                            lacus vel augue laoreet rutrum faucibus dolor auctor.
+                        </p>
+                        <p>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+                            auctor fringilla.
+                        </p>
+                        <p>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+                            at eros.
+                        </p>
+                        <p>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+                            lacus vel augue laoreet rutrum faucibus dolor auctor.
+                        </p>
+                        <p>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+                            auctor fringilla.
+                        </p>
+                    </CModalBody>
+                </CModal>
+            </Example>
+
+
+            <h4 class="mt-4">Visible scrollable</h4>
+            <Example href="components/modal.html#scrolling-long-content">
+                <CButton color="primary" @click="() => { visibleScrollableDemo = true }">Launch demo modal</CButton>
+                <CModal scrollable :visible="visibleScrollableDemo" @dismiss="() => { visibleScrollableDemo = false }">
+                    <CModalHeader dismiss @dismiss="() => { visibleScrollableDemo = false }">
+                        <CModalTitle>Modal title</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>
+                        <p>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+                            at eros.
+                        </p>
+                        <p>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+                            lacus vel augue laoreet rutrum faucibus dolor auctor.
+                        </p>
+                        <p>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+                            auctor fringilla.
+                        </p>
+                        <p>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+                            at eros.
+                        </p>
+                        <p>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+                            lacus vel augue laoreet rutrum faucibus dolor auctor.
+                        </p>
+                        <p>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+                            auctor fringilla.
+                        </p>
+                        <p>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+                            at eros.
+                        </p>
+                        <p>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+                            lacus vel augue laoreet rutrum faucibus dolor auctor.
+                        </p>
+                        <p>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+                            auctor fringilla.
+                        </p>
+                        <p>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+                            at eros.
+                        </p>
+                        <p>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+                            lacus vel augue laoreet rutrum faucibus dolor auctor.
+                        </p>
+                        <p>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+                            auctor fringilla.
+                        </p>
+                        <p>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+                            at eros.
+                        </p>
+                        <p>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+                            lacus vel augue laoreet rutrum faucibus dolor auctor.
+                        </p>
+                        <p>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+                            auctor fringilla.
+                        </p>
+                        <p>
+                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+                            facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+                            at eros.
+                        </p>
+                        <p>
+                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+                            lacus vel augue laoreet rutrum faucibus dolor auctor.
+                        </p>
+                        <p>
+                            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+                            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+                            auctor fringilla.
+                        </p>
+                    </CModalBody>
+                </CModal>
+            </Example>
+
+            <h4 class="mt-4">Vertically centered</h4>
+            <Example href="components/modal.html#vertically-centered">
+                <CButton color="primary" @click="() => { visibleVerticallyCenteredDemo = true }">Launch demo modal</CButton>
+                <CModal alignment="center" :visible="visibleVerticallyCenteredDemo" @dismiss="() => { visibleVerticallyCenteredDemo = false }">
+                    <CModalHeader dismiss @dismiss="() => { visibleVerticallyCenteredDemo = false }">
+                        <CModalTitle>Modal title</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>
+                        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+                    </CModalBody>
+                    <CModalFooter>
+                        <CButton color="secondary" @click="() => { visibleVerticallyCenteredDemo = false }">
+                            Close
+                        </CButton>
+                        <CButton color="primary">Save changes</CButton>
+                    </CModalFooter>
+                </CModal>
+            </Example>
+
+            <h4 class="mt-4">Vertically scrollable demo</h4>
+            <Example href="components/modal.html#vertically-centered">
+                <CButton color="primary" @click="() => { visibleVerticallyCenteredScrollableDemo = true }">Vertically centered scrollable modal</CButton>
+                <CModal alignment="center" scrollable :visible="visibleVerticallyCenteredScrollableDemo" @dismiss="() => { visibleVerticallyCenteredScrollableDemo = false }">
+                    <CModalHeader dismiss @dismiss="() => { visibleVerticallyCenteredScrollableDemo = false }">
+                        <CModalTitle>Modal title</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>
+                        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+                    </CModalBody>
+                    <CModalFooter>
+                        <CButton color="secondary" @click="() => { visibleVerticallyCenteredScrollableDemo = false }">
+                            Close
+                        </CButton>
+                        <CButton color="primary">Save changes</CButton>
+                    </CModalFooter>
+                </CModal>
+            </Example>
+
+            <h4 class="mt-4">Tooltips and popovers</h4>
+            <Example href="components/modal.html#tooltips-and-popovers">
+                <CButton color="primary" @click="() => { tooltipsAndPopoversDemo = true }">Launch demo modal</CButton>
+                <CModal :visible="tooltipsAndPopoversDemo" @dismiss="() => { tooltipsAndPopoversDemo = false }">
+                    <CModalHeader dismiss @dismiss="() => { tooltipsAndPopoversDemo = false }">
+                        <CModalTitle>Modal title</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>
+                        <h5>Popover in a modal</h5>
+                        <p>This <CButton color="secondary" v-c-popover="{header: 'Popover title', content: 'Popover body content is set in this property.'}">button</CButton></p>
+                        <hr/>
+                        <h5>Tooltips in a modal</h5>
+                        <p>
+                            <CLink v-c-tooltip="'Tooltip'">This link</CLink> and <CLink v-c-tooltip="'Tooltip'">that link</CLink> have tooltips on hover.
+                        </p>
+                    </CModalBody>
+                    <CModalFooter>
+                        <CButton color="secondary" @click="() => { tooltipsAndPopoversDemo = false }">
+                            Close
+                        </CButton>
+                        <CButton color="primary">Save changes</CButton>
+                    </CModalFooter>
+                </CModal>
+            </Example>
+
+
+            <h4 class="mt-4">Optional sizes</h4>
+            <Example href="components/modal.html#optional-sizes">
+                <CButton color="primary" @click="() => { xlDemo = true }">Extra large modal</CButton>
+                <CButton color="primary" @click="() => { lgDemo = true }">Large modal</CButton>
+                <CButton color="primary" @click="() => { smDemo = true }">Small modal</CButton>
+                <CModal size="xl" :visible="xlDemo" @dismiss="() => { xlDemo = false }">
+                    <CModalHeader dismiss @dismiss="() => { xlDemo = false }">
+                        <CModalTitle>Extra large modal</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>
+                        ...
+                    </CModalBody>
+                </CModal>
+                <CModal size="lg" :visible="lgDemo" @dismiss="() => { lgDemo = false }">
+                    <CModalHeader dismiss @dismiss="() => { lgDemo = false }">
+                        <CModalTitle>Large modal</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>
+                        ...
+                    </CModalBody>
+                </CModal>
+                <CModal size="sm" :visible="smDemo" @dismiss="() => { smDemo = false }">
+                    <CModalHeader dismiss @dismiss="() => { smDemo = false }">
+                        <CModalTitle>Small modal</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>
+                        ...
+                    </CModalBody>
+                </CModal>
+            </Example>
+
+            <h4 class="mt-4">Fullscreen Modal</h4>
+            <Example href="components/modal.html#fullscreen-modal">
+                <CButton color="primary" @click="() => { fullscreenDemo = true }">Full screen</CButton>
+                <CButton color="primary" @click="() => { fullscreenSmDemo = true }">Full screen below sm</CButton>
+                <CButton color="primary" @click="() => { fullscreenMdDemo = true }">Full screen below md</CButton>
+                <CButton color="primary" @click="() => { fullscreenLgDemo = true }">Full screen below lg</CButton>
+                <CButton color="primary" @click="() => { fullscreenXlDemo = true }">Full screen below xl</CButton>
+                <CButton color="primary" @click="() => { fullscreenXxlDemo = true }">Full screen below xxl</CButton>
+                <CModal fullscreen :visible="fullscreenDemo" @dismiss="() => { fullscreenDemo = false }">
+                    <CModalHeader dismiss @dismiss="() => { xlDemo = false }">
+                        <CModalTitle>Full screen</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>
+                        ...
+                    </CModalBody>
+                </CModal>
+                <CModal fullscreen="sm" :visible="fullscreenSmDemo" @dismiss="() => { fullscreenSmDemo = false }">
+                    <CModalHeader dismiss @dismiss="() => { fullscreenSmDemo = false }">
+                        <CModalTitle>Full screen below sm</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>
+                        ...
+                    </CModalBody>
+                </CModal>
+                <CModal fullscreen="md" :visible="fullscreenMdDemo" @dismiss="() => { fullscreenMdDemo = false }">
+                    <CModalHeader dismiss @dismiss="() => { fullscreenMdDemo = false }">
+                        <CModalTitle>Full screen below md</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>
+                        ...
+                    </CModalBody>
+                </CModal>
+                <CModal fullscreen="lg" :visible="fullscreenLgDemo" @dismiss="() => { fullscreenLgDemo = false }">
+                    <CModalHeader dismiss @dismiss="() => { fullscreenLgDemo = false }">
+                        <CModalTitle>Full screen below lg</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>
+                        ...
+                    </CModalBody>
+                </CModal>
+                <CModal fullscreen="xl" :visible="fullscreenXlDemo" @dismiss="() => { fullscreenXlDemo = false }">
+                    <CModalHeader dismiss @dismiss="() => { fullscreenXlDemo = false }">
+                        <CModalTitle>Full screen below xl</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>
+                        ...
+                    </CModalBody>
+                </CModal>
+                <CModal fullscreen="xxl" :visible="fullscreenXxlDemo" @dismiss="() => { fullscreenXxlDemo = false }">
+                    <CModalHeader dismiss @dismiss="() => { fullscreenXxlDemo = false }">
+                        <CModalTitle>Full screen below xxl</CModalTitle>
+                    </CModalHeader>
+                    <CModalBody>
+                        ...
+                    </CModalBody>
+                </CModal>
+            </Example>
+
+        </CCardBody>
+      </CCard>
+    </CCol>
+  </CRow>
+</template>
+
+<script>
+export default {
+    name: "Modals",
+    data: function(){
+        return {
+            visibleLiveDemo: false,
+            visibleStaticBackdropDemo: false,
+            visibleScrollingLongContentDemo: false,
+            visibleScrollableDemo: false,
+            visibleVerticallyCenteredDemo: false,
+            visibleVerticallyCenteredScrollableDemo: false,
+            xlDemo: false,
+            lgDemo: false,
+            smDemo: false,
+            fullscreenDemo: false,
+            fullscreenSmDemo: false,
+            fullscreenMdDemo: false,
+            fullscreenLgDemo: false,
+            fullscreenXlDemo: false,
+            fullscreenXxlDemo: false,
+      }
+  }
+};
+</script>
\ No newline at end of file