From 9db23d8e46b74384d835a587f595df89dff6dbcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 24 Mar 2021 20:37:09 +0300
Subject: [PATCH] refactor

---
 src/views/accordion/AccordionDoc.vue          |   4 +-
 src/views/autocomplete/AutoCompleteDoc.vue    |   4 +-
 src/views/badge/BadgeDoc.vue                  |   4 +-
 src/views/blockui/BlockUIDoc.vue              |   4 +-
 src/views/breadcrumb/BreadcrumbDoc.vue        |   8 +-
 src/views/button/ButtonDemo.vue               |   2 +-
 src/views/button/ButtonDoc.vue                | 396 +++++++++---------
 src/views/calendar/CalendarDoc.vue            | 280 ++++++-------
 src/views/card/CardDoc.vue                    | 116 ++---
 src/views/carousel/CarouselDoc.vue            |   6 +-
 src/views/cascadeselect/CascadeSelectDoc.vue  |  64 ++-
 src/views/chart/BarChartDoc.vue               |   4 +-
 src/views/chart/ComboChartDoc.vue             |   4 +-
 src/views/chart/DoughnutChartDoc.vue          |   4 +-
 src/views/chart/LineChartDoc.vue              |   4 +-
 src/views/chart/PieChartDoc.vue               |   4 +-
 src/views/chart/PolarAreaChartDoc.vue         |   4 +-
 src/views/chart/RadarChartDoc.vue             |   4 +-
 src/views/checkbox/CheckboxDoc.vue            | 114 +++--
 src/views/chip/ChipDoc.vue                    |   4 +-
 src/views/colorpicker/ColorPickerDoc.vue      |  26 +-
 src/views/contextmenu/ContextMenuDoc.vue      |   4 +-
 src/views/datatable/DataTableBasicDoc.vue     |  30 +-
 src/views/datatable/DataTableSizeDemo.vue     |  18 +-
 .../deferredcontent/DeferredContentDoc.vue    |   5 +-
 src/views/dialog/DialogDoc.vue                |   4 +-
 src/views/dropdown/DropdownDoc.vue            | 134 +++---
 src/views/editor/EditorDoc.vue                |  52 ++-
 src/views/fieldset/FieldsetDemo.vue           |   7 -
 src/views/fieldset/FieldsetDoc.vue            |  23 +-
 src/views/fileupload/FileUploadDoc.vue        |   4 +-
 src/views/floatlabel/FloatLabelDemo.vue       |   8 +-
 src/views/fullcalendar/FullCalendarDoc.vue    |   4 +-
 src/views/inplace/InplaceDoc.vue              |   4 +-
 src/views/inputgroup/InputGroupDoc.vue        |   4 +-
 src/views/inputmask/InputMaskDoc.vue          |   6 +-
 src/views/inputnumber/InputNumberDoc.vue      |   6 +-
 src/views/inputswitch/InputSwitchDoc.vue      |   4 +-
 src/views/inputtext/InputTextDoc.vue          |   4 +-
 src/views/invalid/InvalidDemo.vue             |   4 +-
 src/views/knob/KnobDoc.vue                    |   4 +-
 src/views/listbox/ListboxDoc.vue              |   4 +-
 src/views/megamenu/MegaMenuDoc.vue            |   4 +-
 src/views/menu/MenuDoc.vue                    |   4 +-
 src/views/menubar/MenubarDoc.vue              |   4 +-
 src/views/message/MessageDoc.vue              |   4 +-
 src/views/multiselect/MultiSelectDoc.vue      |   4 +-
 .../OrganizationChartDoc.vue                  |  96 +++--
 src/views/overlaypanel/OverlayPanelDoc.vue    |   4 +-
 src/views/paginator/PaginatorDoc.vue          |   4 +-
 src/views/panel/PanelDoc.vue                  |   4 +-
 src/views/panelmenu/PanelMenuDoc.vue          |   4 +-
 src/views/password/PasswordDoc.vue            |   4 +-
 src/views/picklist/PickListDoc.vue            |   4 +-
 src/views/progressbar/ProgressBarDoc.vue      |   7 +-
 .../progressspinner/ProgressSpinnerDoc.vue    |   4 +-
 src/views/radiobutton/RadioButtonDoc.vue      |   4 +-
 src/views/rating/RatingDoc.vue                |   4 +-
 src/views/responsive/ResponsiveDemo.vue       |   2 +-
 src/views/scrollpanel/ScrollPanelDoc.vue      |   4 +-
 src/views/scrolltop/ScrollTopDemo.vue         |   2 +-
 src/views/scrolltop/ScrollTopDoc.vue          |  12 +-
 src/views/selectbutton/SelectButtonDoc.vue    |   4 +-
 src/views/sidebar/SidebarDoc.vue              |   4 +-
 src/views/skeleton/SkeletonDemo.vue           |   2 +-
 src/views/skeleton/SkeletonDoc.vue            |   4 +-
 src/views/slider/SliderDoc.vue                |   4 +-
 src/views/spacing/SpacingDoc.vue              |  12 +
 src/views/splitbutton/SplitButtonDoc.vue      |   6 +-
 src/views/tabmenu/TabMenuDoc.vue              |   4 +-
 src/views/tag/TagDoc.vue                      |   4 +-
 src/views/terminal/TerminalDoc.vue            |   4 +-
 src/views/textarea/TextareaDoc.vue            |   4 +-
 src/views/tieredmenu/TieredMenuDoc.vue        |   4 +-
 src/views/togglebutton/ToggleButtonDoc.vue    |   4 +-
 src/views/toolbar/ToolbarDoc.vue              |   4 +-
 src/views/tooltip/TooltipDoc.vue              |   4 +-
 src/views/tree/TreeDoc.vue                    |   4 +-
 src/views/tree/TreeFilterDemo.vue             |   4 +-
 src/views/tree/TreeLazyDemo.vue               |   4 +-
 src/views/tree/TreeSelectionDemo.vue          |   4 +-
 src/views/tree/TreeTemplatingDemo.vue         |   4 +-
 .../treetable/TreeTableColToggleDemo.vue      |  10 +-
 src/views/treetable/TreeTableLazyDemo.vue     |  13 +-
 .../treetable/TreeTablePaginatorDemo.vue      |   4 +-
 .../treetable/TreeTableResponsiveDemo.vue     |   4 +-
 .../treetable/TreeTableTemplatingDemo.vue     |   4 +-
 .../tristatecheckbox/TriStateCheckboxDoc.vue  |  10 +-
 88 files changed, 838 insertions(+), 867 deletions(-)

diff --git a/src/views/accordion/AccordionDoc.vue b/src/views/accordion/AccordionDoc.vue
index 43ad10cb3..bb3df8058 100755
--- a/src/views/accordion/AccordionDoc.vue
+++ b/src/views/accordion/AccordionDoc.vue
@@ -312,7 +312,7 @@ export default {
 					tabName: 'Source',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Default</h5>
         <Accordion :activeIndex="0">
             <AccordionTab header="Header I">
@@ -441,7 +441,7 @@ export default {
 					tabName: 'Composition API',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Default</h5>
         <Accordion :activeIndex="0">
             <AccordionTab header="Header I">
diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
index de5104d58..814a59faf 100755
--- a/src/views/autocomplete/AutoCompleteDoc.vue
+++ b/src/views/autocomplete/AutoCompleteDoc.vue
@@ -375,7 +375,7 @@ export default {
                     content:`
 <template>
     <div>
-        <div class="card">
+        <div>
             <h5>Basic</h5>
             <AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
 
@@ -492,7 +492,7 @@ export default {
                     content:`
 <template>
     <div>
-        <div class="card">
+        <div>
             <h5>Basic</h5>
             <AutoComplete v-model="selectedCountry1" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
 
diff --git a/src/views/badge/BadgeDoc.vue b/src/views/badge/BadgeDoc.vue
index e4fa0b74e..13b8d32f6 100644
--- a/src/views/badge/BadgeDoc.vue
+++ b/src/views/badge/BadgeDoc.vue
@@ -179,7 +179,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Numbers</h5>
         <Badge value="2" class="p-mr-2"></Badge>
         <Badge value="8" severity="success" class="p-mr-2"></Badge>
@@ -213,7 +213,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Numbers</h5>
         <Badge value="2" class="p-mr-2"></Badge>
         <Badge value="8" severity="success" class="p-mr-2"></Badge>
diff --git a/src/views/blockui/BlockUIDoc.vue b/src/views/blockui/BlockUIDoc.vue
index 36bd916d1..ab32ef3b1 100755
--- a/src/views/blockui/BlockUIDoc.vue
+++ b/src/views/blockui/BlockUIDoc.vue
@@ -149,7 +149,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Document</h5>
         <BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
 
@@ -211,7 +211,7 @@ button {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Document</h5>
         <BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
 
diff --git a/src/views/breadcrumb/BreadcrumbDoc.vue b/src/views/breadcrumb/BreadcrumbDoc.vue
index 3988f58fc..fa8f8afeb 100755
--- a/src/views/breadcrumb/BreadcrumbDoc.vue
+++ b/src/views/breadcrumb/BreadcrumbDoc.vue
@@ -108,7 +108,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <Breadcrumb :home="home" :model="items" />
     </div>
 </template>
@@ -119,7 +119,7 @@ export default {
         return {
             home: {
                 icon: 'pi pi-home', 
-                to: '/fileupload',
+                to: '/',
             },
             items: [
                 {label: 'Computer'},
@@ -138,7 +138,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <Breadcrumb :home="home" :model="items" />
     </div>
 </template>
@@ -150,7 +150,7 @@ export default {
     setup() {
         const home = ref({
             icon: 'pi pi-home', 
-            to: '/fileupload',
+            to: '/',
         });
         const items = ref([
             {label: 'Computer'},
diff --git a/src/views/button/ButtonDemo.vue b/src/views/button/ButtonDemo.vue
index 8b0ac941f..d06c235d6 100755
--- a/src/views/button/ButtonDemo.vue
+++ b/src/views/button/ButtonDemo.vue
@@ -159,7 +159,7 @@ export default {
     }
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 6400px) {
     .p-button {
         margin-bottom: .5rem;
 
diff --git a/src/views/button/ButtonDoc.vue b/src/views/button/ButtonDoc.vue
index e54f53892..d4f1596e4 100755
--- a/src/views/button/ButtonDoc.vue
+++ b/src/views/button/ButtonDoc.vue
@@ -225,118 +225,116 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="card">
-            <h5>Basic</h5>
-            <Button label="Submit" />
-            <Button label="Disabled" disabled="disabled" />
-            <Button label="Link" class="p-button-link" />
+        <h5>Basic</h5>
+        <Button label="Submit" />
+        <Button label="Disabled" disabled="disabled" />
+        <Button label="Link" class="p-button-link" />
 
-            <h5>Icons</h5>
-            <Button icon="pi pi-check" />
-            <Button label="Submit" icon="pi pi-check" />
-            <Button label="Submit" icon="pi pi-check" iconPos="right" />
+        <h5>Icons</h5>
+        <Button icon="pi pi-check" />
+        <Button label="Submit" icon="pi pi-check" />
+        <Button label="Submit" icon="pi pi-check" iconPos="right" />
 
-            <h5>Severities</h5>
-            <Button label="Primary" />
-            <Button label="Secondary" class="p-button-secondary" />
-            <Button label="Success" class="p-button-success" />
-            <Button label="Info" class="p-button-info" />
-            <Button label="Warning" class="p-button-warning" />
-            <Button label="Help" class="p-button-help" />
-            <Button label="Danger" class="p-button-danger" />
+        <h5>Severities</h5>
+        <Button label="Primary" />
+        <Button label="Secondary" class="p-button-secondary" />
+        <Button label="Success" class="p-button-success" />
+        <Button label="Info" class="p-button-info" />
+        <Button label="Warning" class="p-button-warning" />
+        <Button label="Help" class="p-button-help" />
+        <Button label="Danger" class="p-button-danger" />
 
-            <h5>Raised Buttons</h5>
-            <Button label="Primary" class="p-button-raised" />
-            <Button label="Secondary" class="p-button-raised p-button-secondary" />
-            <Button label="Success" class="p-button-raised p-button-success" />
-            <Button label="Info" class="p-button-raised p-button-info" />
-            <Button label="Warning" class="p-button-raised p-button-warning" />
-            <Button label="Help" class="p-button-raised p-button-help" />
-            <Button label="Danger" class="p-button-raised p-button-danger" />
+        <h5>Raised Buttons</h5>
+        <Button label="Primary" class="p-button-raised" />
+        <Button label="Secondary" class="p-button-raised p-button-secondary" />
+        <Button label="Success" class="p-button-raised p-button-success" />
+        <Button label="Info" class="p-button-raised p-button-info" />
+        <Button label="Warning" class="p-button-raised p-button-warning" />
+        <Button label="Help" class="p-button-raised p-button-help" />
+        <Button label="Danger" class="p-button-raised p-button-danger" />
 
-            <h5>Rounded Buttons</h5>
-            <Button label="Primary" class="p-button-rounded" />
-            <Button label="Secondary" class="p-button-rounded p-button-secondary" />
-            <Button label="Success" class="p-button-rounded p-button-success" />
-            <Button label="Info" class="p-button-rounded p-button-info" />
-            <Button label="Warning" class="p-button-rounded p-button-warning" />
-            <Button label="Help" class="p-button-rounded p-button-help" />
-            <Button label="Danger" class="p-button-rounded p-button-danger" />
+        <h5>Rounded Buttons</h5>
+        <Button label="Primary" class="p-button-rounded" />
+        <Button label="Secondary" class="p-button-rounded p-button-secondary" />
+        <Button label="Success" class="p-button-rounded p-button-success" />
+        <Button label="Info" class="p-button-rounded p-button-info" />
+        <Button label="Warning" class="p-button-rounded p-button-warning" />
+        <Button label="Help" class="p-button-rounded p-button-help" />
+        <Button label="Danger" class="p-button-rounded p-button-danger" />
 
-            <h5>Text Buttons</h5>
-            <Button label="Primary" class="p-button-text" />
-            <Button label="Secondary" class="p-button-secondary p-button-text" />
-            <Button label="Success" class="p-button-success p-button-text" />
-            <Button label="Info" class="p-button-info p-button-text" />
-            <Button label="Warning" class="p-button-warning p-button-text" />
-            <Button label="Help" class="p-button-help p-button-text" />
-            <Button label="Danger" class="p-button-danger p-button-text" />
-            <Button label="Plain" class="p-button-text p-button-plain" />
+        <h5>Text Buttons</h5>
+        <Button label="Primary" class="p-button-text" />
+        <Button label="Secondary" class="p-button-secondary p-button-text" />
+        <Button label="Success" class="p-button-success p-button-text" />
+        <Button label="Info" class="p-button-info p-button-text" />
+        <Button label="Warning" class="p-button-warning p-button-text" />
+        <Button label="Help" class="p-button-help p-button-text" />
+        <Button label="Danger" class="p-button-danger p-button-text" />
+        <Button label="Plain" class="p-button-text p-button-plain" />
 
-            <h5>Raised Text Buttons</h5>
-            <Button label="Primary" class="p-button-raised p-button-text" />
-            <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
-            <Button label="Success" class="p-button-raised p-button-success p-button-text" />
-            <Button label="Info" class="p-button-raised p-button-info p-button-text" />
-            <Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
-            <Button label="Help" class="p-button-raised p-button-help p-button-text" />
-            <Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
-            <Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
+        <h5>Raised Text Buttons</h5>
+        <Button label="Primary" class="p-button-raised p-button-text" />
+        <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
+        <Button label="Success" class="p-button-raised p-button-success p-button-text" />
+        <Button label="Info" class="p-button-raised p-button-info p-button-text" />
+        <Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
+        <Button label="Help" class="p-button-raised p-button-help p-button-text" />
+        <Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
+        <Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
 
-            <h5>Outlined Buttons</h5>
-            <Button label="Primary" class="p-button-outlined" />
-            <Button label="Secondary" class="p-button-outlined p-button-secondary" />
-            <Button label="Success" class="p-button-outlined p-button-success" />
-            <Button label="Info" class="p-button-outlined p-button-info" />
-            <Button label="Warning" class="p-button-outlined p-button-warning" />
-            <Button label="Help" class="p-button-outlined p-button-help" />
-            <Button label="Danger" class="p-button-outlined p-button-danger" />
+        <h5>Outlined Buttons</h5>
+        <Button label="Primary" class="p-button-outlined" />
+        <Button label="Secondary" class="p-button-outlined p-button-secondary" />
+        <Button label="Success" class="p-button-outlined p-button-success" />
+        <Button label="Info" class="p-button-outlined p-button-info" />
+        <Button label="Warning" class="p-button-outlined p-button-warning" />
+        <Button label="Help" class="p-button-outlined p-button-help" />
+        <Button label="Danger" class="p-button-outlined p-button-danger" />
 
-            <h5>Rounded Icon Buttons</h5>
-            <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
-            <Button icon="pi pi-search" class="p-button-rounded p-button-success" />
-            <Button icon="pi pi-user" class="p-button-rounded p-button-info" />
-            <Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
-            <Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
-            <Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
-            <Button icon="pi pi-check" class="p-button-rounded" />
+        <h5>Rounded Icon Buttons</h5>
+        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
+        <Button icon="pi pi-search" class="p-button-rounded p-button-success" />
+        <Button icon="pi pi-user" class="p-button-rounded p-button-info" />
+        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
+        <Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
+        <Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
+        <Button icon="pi pi-check" class="p-button-rounded" />
 
-            <h5>Rounded Text Icon Buttons</h5>
-            <Button icon="pi pi-check" class="p-button-rounded p-button-text" />
-            <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
-            <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
-            <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
-            <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
-            <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
-            <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
-            <Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
+        <h5>Rounded Text Icon Buttons</h5>
+        <Button icon="pi pi-check" class="p-button-rounded p-button-text" />
+        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
+        <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
+        <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
+        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
+        <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
+        <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
+        <Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
 
-            <h5>Rounded and Outlined Icon Buttons</h5>
-            <Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
-            <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
-            <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
-            <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
-            <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
-            <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
-            <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
+        <h5>Rounded and Outlined Icon Buttons</h5>
+        <Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
+        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
+        <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
+        <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
+        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
+        <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
+        <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
 
-            <h5>Badges</h5>
-            <Button type="button" label="Emails" badge="8" />
-            <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
+        <h5>Badges</h5>
+        <Button type="button" label="Emails" badge="8" />
+        <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
 
-            <h5>Button Set</h5>
-            <span class="p-buttonset">
-                <Button label="Save" icon="pi pi-check" />
-                <Button label="Delete" icon="pi pi-trash" />
-                <Button label="Cancel" icon="pi pi-times" />
-            </span>
+        <h5>Button Set</h5>
+        <span class="p-buttonset">
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Delete" icon="pi pi-trash" />
+            <Button label="Cancel" icon="pi pi-times" />
+        </span>
 
-            <h5>Sizes</h5>
-            <div class="sizes">
-                <Button label="Small" icon="pi pi-check" class="p-button-sm"  />
-                <Button label="Normal" icon="pi pi-check" class="p-button"  />
-                <Button label="Large" icon="pi pi-check" class="p-button-lg" />
-            </div>
+        <h5>Sizes</h5>
+        <div class="sizes">
+            <Button label="Small" icon="pi pi-check" class="p-button-sm"  />
+            <Button label="Normal" icon="pi pi-check" class="p-button"  />
+            <Button label="Large" icon="pi pi-check" class="p-button-lg" />
         </div>
     </div>
 </template>
@@ -368,7 +366,7 @@ export default {
     }
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 640px) {
     .p-button {
         margin-bottom: .5rem;
 
@@ -391,118 +389,116 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="card">
-            <h5>Basic</h5>
-            <Button label="Submit" />
-            <Button label="Disabled" disabled="disabled" />
-            <Button label="Link" class="p-button-link" />
+        <h5>Basic</h5>
+        <Button label="Submit" />
+        <Button label="Disabled" disabled="disabled" />
+        <Button label="Link" class="p-button-link" />
 
-            <h5>Icons</h5>
-            <Button icon="pi pi-check" />
-            <Button label="Submit" icon="pi pi-check" />
-            <Button label="Submit" icon="pi pi-check" iconPos="right" />
+        <h5>Icons</h5>
+        <Button icon="pi pi-check" />
+        <Button label="Submit" icon="pi pi-check" />
+        <Button label="Submit" icon="pi pi-check" iconPos="right" />
 
-            <h5>Severities</h5>
-            <Button label="Primary" />
-            <Button label="Secondary" class="p-button-secondary" />
-            <Button label="Success" class="p-button-success" />
-            <Button label="Info" class="p-button-info" />
-            <Button label="Warning" class="p-button-warning" />
-            <Button label="Help" class="p-button-help" />
-            <Button label="Danger" class="p-button-danger" />
+        <h5>Severities</h5>
+        <Button label="Primary" />
+        <Button label="Secondary" class="p-button-secondary" />
+        <Button label="Success" class="p-button-success" />
+        <Button label="Info" class="p-button-info" />
+        <Button label="Warning" class="p-button-warning" />
+        <Button label="Help" class="p-button-help" />
+        <Button label="Danger" class="p-button-danger" />
 
-            <h5>Raised Buttons</h5>
-            <Button label="Primary" class="p-button-raised" />
-            <Button label="Secondary" class="p-button-raised p-button-secondary" />
-            <Button label="Success" class="p-button-raised p-button-success" />
-            <Button label="Info" class="p-button-raised p-button-info" />
-            <Button label="Warning" class="p-button-raised p-button-warning" />
-            <Button label="Help" class="p-button-raised p-button-help" />
-            <Button label="Danger" class="p-button-raised p-button-danger" />
+        <h5>Raised Buttons</h5>
+        <Button label="Primary" class="p-button-raised" />
+        <Button label="Secondary" class="p-button-raised p-button-secondary" />
+        <Button label="Success" class="p-button-raised p-button-success" />
+        <Button label="Info" class="p-button-raised p-button-info" />
+        <Button label="Warning" class="p-button-raised p-button-warning" />
+        <Button label="Help" class="p-button-raised p-button-help" />
+        <Button label="Danger" class="p-button-raised p-button-danger" />
 
-            <h5>Rounded Buttons</h5>
-            <Button label="Primary" class="p-button-rounded" />
-            <Button label="Secondary" class="p-button-rounded p-button-secondary" />
-            <Button label="Success" class="p-button-rounded p-button-success" />
-            <Button label="Info" class="p-button-rounded p-button-info" />
-            <Button label="Warning" class="p-button-rounded p-button-warning" />
-            <Button label="Help" class="p-button-rounded p-button-help" />
-            <Button label="Danger" class="p-button-rounded p-button-danger" />
+        <h5>Rounded Buttons</h5>
+        <Button label="Primary" class="p-button-rounded" />
+        <Button label="Secondary" class="p-button-rounded p-button-secondary" />
+        <Button label="Success" class="p-button-rounded p-button-success" />
+        <Button label="Info" class="p-button-rounded p-button-info" />
+        <Button label="Warning" class="p-button-rounded p-button-warning" />
+        <Button label="Help" class="p-button-rounded p-button-help" />
+        <Button label="Danger" class="p-button-rounded p-button-danger" />
 
-            <h5>Text Buttons</h5>
-            <Button label="Primary" class="p-button-text" />
-            <Button label="Secondary" class="p-button-secondary p-button-text" />
-            <Button label="Success" class="p-button-success p-button-text" />
-            <Button label="Info" class="p-button-info p-button-text" />
-            <Button label="Warning" class="p-button-warning p-button-text" />
-            <Button label="Help" class="p-button-help p-button-text" />
-            <Button label="Danger" class="p-button-danger p-button-text" />
-            <Button label="Plain" class="p-button-text p-button-plain" />
+        <h5>Text Buttons</h5>
+        <Button label="Primary" class="p-button-text" />
+        <Button label="Secondary" class="p-button-secondary p-button-text" />
+        <Button label="Success" class="p-button-success p-button-text" />
+        <Button label="Info" class="p-button-info p-button-text" />
+        <Button label="Warning" class="p-button-warning p-button-text" />
+        <Button label="Help" class="p-button-help p-button-text" />
+        <Button label="Danger" class="p-button-danger p-button-text" />
+        <Button label="Plain" class="p-button-text p-button-plain" />
 
-            <h5>Raised Text Buttons</h5>
-            <Button label="Primary" class="p-button-raised p-button-text" />
-            <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
-            <Button label="Success" class="p-button-raised p-button-success p-button-text" />
-            <Button label="Info" class="p-button-raised p-button-info p-button-text" />
-            <Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
-            <Button label="Help" class="p-button-raised p-button-help p-button-text" />
-            <Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
-            <Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
+        <h5>Raised Text Buttons</h5>
+        <Button label="Primary" class="p-button-raised p-button-text" />
+        <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
+        <Button label="Success" class="p-button-raised p-button-success p-button-text" />
+        <Button label="Info" class="p-button-raised p-button-info p-button-text" />
+        <Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
+        <Button label="Help" class="p-button-raised p-button-help p-button-text" />
+        <Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
+        <Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
 
-            <h5>Outlined Buttons</h5>
-            <Button label="Primary" class="p-button-outlined" />
-            <Button label="Secondary" class="p-button-outlined p-button-secondary" />
-            <Button label="Success" class="p-button-outlined p-button-success" />
-            <Button label="Info" class="p-button-outlined p-button-info" />
-            <Button label="Warning" class="p-button-outlined p-button-warning" />
-            <Button label="Help" class="p-button-outlined p-button-help" />
-            <Button label="Danger" class="p-button-outlined p-button-danger" />
+        <h5>Outlined Buttons</h5>
+        <Button label="Primary" class="p-button-outlined" />
+        <Button label="Secondary" class="p-button-outlined p-button-secondary" />
+        <Button label="Success" class="p-button-outlined p-button-success" />
+        <Button label="Info" class="p-button-outlined p-button-info" />
+        <Button label="Warning" class="p-button-outlined p-button-warning" />
+        <Button label="Help" class="p-button-outlined p-button-help" />
+        <Button label="Danger" class="p-button-outlined p-button-danger" />
 
-            <h5>Rounded Icon Buttons</h5>
-            <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
-            <Button icon="pi pi-search" class="p-button-rounded p-button-success" />
-            <Button icon="pi pi-user" class="p-button-rounded p-button-info" />
-            <Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
-            <Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
-            <Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
-            <Button icon="pi pi-check" class="p-button-rounded" />
+        <h5>Rounded Icon Buttons</h5>
+        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
+        <Button icon="pi pi-search" class="p-button-rounded p-button-success" />
+        <Button icon="pi pi-user" class="p-button-rounded p-button-info" />
+        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
+        <Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
+        <Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
+        <Button icon="pi pi-check" class="p-button-rounded" />
 
-            <h5>Rounded Text Icon Buttons</h5>
-            <Button icon="pi pi-check" class="p-button-rounded p-button-text" />
-            <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
-            <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
-            <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
-            <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
-            <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
-            <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
-            <Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
+        <h5>Rounded Text Icon Buttons</h5>
+        <Button icon="pi pi-check" class="p-button-rounded p-button-text" />
+        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
+        <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
+        <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
+        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
+        <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
+        <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
+        <Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
 
-            <h5>Rounded and Outlined Icon Buttons</h5>
-            <Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
-            <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
-            <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
-            <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
-            <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
-            <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
-            <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
+        <h5>Rounded and Outlined Icon Buttons</h5>
+        <Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
+        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
+        <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
+        <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
+        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
+        <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
+        <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
 
-            <h5>Badges</h5>
-            <Button type="button" label="Emails" badge="8" />
-            <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
+        <h5>Badges</h5>
+        <Button type="button" label="Emails" badge="8" />
+        <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
 
-            <h5>Button Set</h5>
-            <span class="p-buttonset">
-                <Button label="Save" icon="pi pi-check" />
-                <Button label="Delete" icon="pi pi-trash" />
-                <Button label="Cancel" icon="pi pi-times" />
-            </span>
+        <h5>Button Set</h5>
+        <span class="p-buttonset">
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Delete" icon="pi pi-trash" />
+            <Button label="Cancel" icon="pi pi-times" />
+        </span>
 
-            <h5>Sizes</h5>
-            <div class="sizes">
-                <Button label="Small" icon="pi pi-check" class="p-button-sm"  />
-                <Button label="Normal" icon="pi pi-check" class="p-button"  />
-                <Button label="Large" icon="pi pi-check" class="p-button-lg" />
-            </div>
+        <h5>Sizes</h5>
+        <div class="sizes">
+            <Button label="Small" icon="pi pi-check" class="p-button-sm"  />
+            <Button label="Normal" icon="pi pi-check" class="p-button"  />
+            <Button label="Large" icon="pi pi-check" class="p-button-lg" />
         </div>
     </div>
 </template>
@@ -535,7 +531,7 @@ export default defineComponent({});
     }
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 640px) {
     .p-button {
         margin-bottom: .5rem;
 
diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
index 7e458122d..372eb74a3 100755
--- a/src/views/calendar/CalendarDoc.vue
+++ b/src/views/calendar/CalendarDoc.vue
@@ -576,79 +576,77 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="card">
-            <h5>Popup</h5>
-            <div class="p-fluid p-grid p-formgrid">
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="basic">Basic</label>
-                    <Calendar id="basic" v-model="date1" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="dateformat">DateFormat</label>
-                    <Calendar id="dateformat" v-model="date2"  dateFormat="mm-dd-yy" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="icon">Icon</label>
-                    <Calendar id="icon" v-model="date3" :showIcon="true" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="minmax">MinMax</label>
-                    <Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="disableddays">Disabled Days</label>
-                    <Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="navigators">Navigators</label>
-                    <Calendar id="navigators" v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="multiple">Multiple</label>
-                    <Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="range">Range</label>
-                    <Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="buttonbar">Button Bar</label>
-                    <Calendar id="buttonbar" v-model="date7" :showButtonBar="true" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="time24">Time / 24h</label>
-                    <Calendar id="time24" v-model="date8" :showTime="true" :showSeconds="true" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="time12">Time / 12h</label>
-                    <Calendar id="time12" v-model="date9" :timeOnly="true" hourFormat="12" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="monthpicker">Month Picker</label>
-                    <Calendar id="monthpicker" v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="multiplemonths">Multiple Months</label>
-                    <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="datetemplate">Date Template</label>
-                    <Calendar id="datetemplate" v-model="date12">
-                        <template #date="slotProps">
-                            <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</strong>
-                            <template v-else>{{slotProps.date.day}}</template>
-                        </template>
-                    </Calendar>
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="touchUI">TouchUI</label>
-                    <Calendar id="touchUI" v-model="date13" :touchUI="true" />
-                </div>
+        <h5>Popup</h5>
+        <div class="p-fluid p-grid p-formgrid">
+            <div class="p-field p-col-12 p-md-4">
+                <label for="basic">Basic</label>
+                <Calendar id="basic" v-model="date1" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="dateformat">DateFormat</label>
+                <Calendar id="dateformat" v-model="date2"  dateFormat="mm-dd-yy" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="icon">Icon</label>
+                <Calendar id="icon" v-model="date3" :showIcon="true" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="minmax">MinMax</label>
+                <Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="disableddays">Disabled Days</label>
+                <Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="navigators">Navigators</label>
+                <Calendar id="navigators" v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="multiple">Multiple</label>
+                <Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="range">Range</label>
+                <Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="buttonbar">Button Bar</label>
+                <Calendar id="buttonbar" v-model="date7" :showButtonBar="true" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="time24">Time / 24h</label>
+                <Calendar id="time24" v-model="date8" :showTime="true" :showSeconds="true" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="time12">Time / 12h</label>
+                <Calendar id="time12" v-model="date9" :timeOnly="true" hourFormat="12" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="monthpicker">Month Picker</label>
+                <Calendar id="monthpicker" v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="multiplemonths">Multiple Months</label>
+                <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="datetemplate">Date Template</label>
+                <Calendar id="datetemplate" v-model="date12">
+                    <template #date="slotProps">
+                        <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</strong>
+                        <template v-else>{{slotProps.date.day}}</template>
+                    </template>
+                </Calendar>
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="touchUI">TouchUI</label>
+                <Calendar id="touchUI" v-model="date13" :touchUI="true" />
             </div>
-
-            <h5>Inline</h5>
-            <Calendar v-model="date14" :inline="true" :showWeek="true" />
         </div>
+
+        <h5>Inline</h5>
+        <Calendar v-model="date14" :inline="true" :showWeek="true" />
     </div>
 </template>
 
@@ -711,79 +709,77 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="card">
-            <h5>Popup</h5>
-            <div class="p-fluid p-grid p-formgrid">
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="basic">Basic</label>
-                    <Calendar id="basic" v-model="date1" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="dateformat">DateFormat</label>
-                    <Calendar id="dateformat" v-model="date2"  dateFormat="mm-dd-yy" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="icon">Icon</label>
-                    <Calendar id="icon" v-model="date3" :showIcon="true" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="minmax">MinMax</label>
-                    <Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="disableddays">Disabled Days</label>
-                    <Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="navigators">Navigators</label>
-                    <Calendar id="navigators" v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="multiple">Multiple</label>
-                    <Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="range">Range</label>
-                    <Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="buttonbar">Button Bar</label>
-                    <Calendar id="buttonbar" v-model="date7" :showButtonBar="true" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="time24">Time / 24h</label>
-                    <Calendar id="time24" v-model="date8" :showTime="true" :showSeconds="true" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="time12">Time / 12h</label>
-                    <Calendar id="time12" v-model="date9" :timeOnly="true" hourFormat="12" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="monthpicker">Month Picker</label>
-                    <Calendar id="monthpicker" v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="multiplemonths">Multiple Months</label>
-                    <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="datetemplate">Date Template</label>
-                    <Calendar id="datetemplate" v-model="date12">
-                        <template #date="slotProps">
-                            <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</strong>
-                            <template v-else>{{slotProps.date.day}}</template>
-                        </template>
-                    </Calendar>
-                </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <label for="touchUI">TouchUI</label>
-                    <Calendar id="touchUI" v-model="date13" :touchUI="true" />
-                </div>
+        <h5>Popup</h5>
+        <div class="p-fluid p-grid p-formgrid">
+            <div class="p-field p-col-12 p-md-4">
+                <label for="basic">Basic</label>
+                <Calendar id="basic" v-model="date1" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="dateformat">DateFormat</label>
+                <Calendar id="dateformat" v-model="date2"  dateFormat="mm-dd-yy" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="icon">Icon</label>
+                <Calendar id="icon" v-model="date3" :showIcon="true" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="minmax">MinMax</label>
+                <Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="disableddays">Disabled Days</label>
+                <Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="navigators">Navigators</label>
+                <Calendar id="navigators" v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="multiple">Multiple</label>
+                <Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="range">Range</label>
+                <Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="buttonbar">Button Bar</label>
+                <Calendar id="buttonbar" v-model="date7" :showButtonBar="true" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="time24">Time / 24h</label>
+                <Calendar id="time24" v-model="date8" :showTime="true" :showSeconds="true" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="time12">Time / 12h</label>
+                <Calendar id="time12" v-model="date9" :timeOnly="true" hourFormat="12" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="monthpicker">Month Picker</label>
+                <Calendar id="monthpicker" v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="multiplemonths">Multiple Months</label>
+                <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="datetemplate">Date Template</label>
+                <Calendar id="datetemplate" v-model="date12">
+                    <template #date="slotProps">
+                        <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</strong>
+                        <template v-else>{{slotProps.date.day}}</template>
+                    </template>
+                </Calendar>
+            </div>
+            <div class="p-field p-col-12 p-md-4">
+                <label for="touchUI">TouchUI</label>
+                <Calendar id="touchUI" v-model="date13" :touchUI="true" />
             </div>
-
-            <h5>Inline</h5>
-            <Calendar v-model="date14" :inline="true" :showWeek="true" />
         </div>
+
+        <h5>Inline</h5>
+        <Calendar v-model="date14" :inline="true" :showWeek="true" />
     </div>
 </template>
 
diff --git a/src/views/card/CardDoc.vue b/src/views/card/CardDoc.vue
index 5e8f36b73..898988c63 100755
--- a/src/views/card/CardDoc.vue
+++ b/src/views/card/CardDoc.vue
@@ -111,35 +111,37 @@ export default {
                     tabName: 'Source',
 					content: `
 <template>
-    <Card style="width: 25rem; margin-bottom: 2em">
-        <template #title>
-            Simple Card
-        </template>
-        <template #content>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
-            quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
-        </template>
-    </Card>
+    <div>
+        <Card style="width: 25rem; margin-bottom: 2em">
+            <template #title>
+                Simple Card
+            </template>
+            <template #content>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+                quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
+            </template>
+        </Card>
 
-    <Card style="width: 25em">
-        <template #header>
-            <img src="https://www.primefaces.org/wp-content/uploads/2020/02/primefacesorg-primevue-2020.png" style="height: 10rem" />
-        </template>
-        <template #title>
-            Advanced Card
-        </template>
-        <template #subtitle>
-            Card subtitle
-        </template>
-        <template #content>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
-            quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
-        </template>
-        <template #footer>
-            <Button icon="pi pi-check" label="Save" />
-            <Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
-        </template>
-    </Card>
+        <Card style="width: 25em">
+            <template #header>
+                <img src="https://www.primefaces.org/wp-content/uploads/2020/02/primefacesorg-primevue-2020.png" style="height: 15rem" />
+            </template>
+            <template #title>
+                Advanced Card
+            </template>
+            <template #subtitle>
+                Card subtitle
+            </template>
+            <template #content>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+                quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
+            </template>
+            <template #footer>
+                <Button icon="pi pi-check" label="Save" />
+                <Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
+            </template>
+        </Card>
+    </div>
 </template>
 
 <script>
@@ -158,35 +160,37 @@ p {
                     tabName: 'Composition API',
 					content: `
 <template>
-    <Card style="width: 25rem; margin-bottom: 2em">
-        <template #title>
-            Simple Card
-        </template>
-        <template #content>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
-            quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
-        </template>
-    </Card>
+    <div>
+        <Card style="width: 25rem; margin-bottom: 2em">
+            <template #title>
+                Simple Card
+            </template>
+            <template #content>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+                quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
+            </template>
+        </Card>
 
-    <Card style="width: 25em">
-        <template #header>
-            <img src="https://www.primefaces.org/wp-content/uploads/2020/02/primefacesorg-primevue-2020.png" style="height: 10rem" />
-        </template>
-        <template #title>
-            Advanced Card
-        </template>
-        <template #subtitle>
-            Card subtitle
-        </template>
-        <template #content>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
-            quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
-        </template>
-        <template #footer>
-            <Button icon="pi pi-check" label="Save" />
-            <Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
-        </template>
-    </Card>
+        <Card style="width: 25em">
+            <template #header>
+                <img src="https://www.primefaces.org/wp-content/uploads/2020/02/primefacesorg-primevue-2020.png" style="height: 15rem" />
+            </template>
+            <template #title>
+                Advanced Card
+            </template>
+            <template #subtitle>
+                Card subtitle
+            </template>
+            <template #content>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+                quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
+            </template>
+            <template #footer>
+                <Button icon="pi pi-check" label="Save" />
+                <Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
+            </template>
+        </Card>
+    </div>
 </template>
 
 <script>
diff --git a/src/views/carousel/CarouselDoc.vue b/src/views/carousel/CarouselDoc.vue
index fd77ca6ee..03da51e74 100755
--- a/src/views/carousel/CarouselDoc.vue
+++ b/src/views/carousel/CarouselDoc.vue
@@ -300,7 +300,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-	<div class="card">
+	<div>
         <div class="card">
             <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
                 <template #header>
@@ -356,7 +356,7 @@ export default {
         </div>
 
         <div class="card">
-            <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="500px"
+            <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="430px"
                         style="max-width: 400px; margin-top: 2em">
                 <template #header>
                     <h5>Vertical</h5>
@@ -498,7 +498,7 @@ export default {
         </div>
 
         <div class="card">
-            <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="500px"
+            <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="430px"
                         style="max-width: 400px; margin-top: 2em">
                 <template #header>
                     <h5>Vertical</h5>
diff --git a/src/views/cascadeselect/CascadeSelectDoc.vue b/src/views/cascadeselect/CascadeSelectDoc.vue
index f2eb1809a..4785ff12e 100644
--- a/src/views/cascadeselect/CascadeSelectDoc.vue
+++ b/src/views/cascadeselect/CascadeSelectDoc.vue
@@ -341,24 +341,22 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="card">
-            <h5>Basic</h5>
-            <CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
-                    :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" />
+        <h5>Basic</h5>
+        <CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
+                :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" />
 
-            <h5>Templating</h5>
-            <CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" 
-                    :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City">
-                <template #option="slotProps">
-                    <div class="country-item">
-                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
-                        <i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
-                        <i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
-                        <span>{{slotProps.option.cname || slotProps.option.name}}</span>
-                    </div>
-                </template>
-            </CascadeSelect>
-        </div>
+        <h5>Templating</h5>
+        <CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" 
+                :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City">
+            <template #option="slotProps">
+                <div class="country-item">
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
+                    <i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
+                    <i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
+                    <span>{{slotProps.option.cname || slotProps.option.name}}</span>
+                </div>
+            </template>
+        </CascadeSelect>
     </div>
 </template>
 
@@ -462,24 +460,22 @@ img {
                     content: `
 <template>
     <div>
-        <div class="card">
-            <h5>Basic</h5>
-            <CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
-                    :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" />
+        <h5>Basic</h5>
+        <CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
+                :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" />
 
-            <h5>Templating</h5>
-            <CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" 
-                    :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City">
-                <template #option="slotProps">
-                    <div class="country-item">
-                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
-                        <i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
-                        <i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
-                        <span>{{slotProps.option.cname || slotProps.option.name}}</span>
-                    </div>
-                </template>
-            </CascadeSelect>
-        </div>
+        <h5>Templating</h5>
+        <CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" 
+                :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City">
+            <template #option="slotProps">
+                <div class="country-item">
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
+                    <i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
+                    <i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
+                    <span>{{slotProps.option.cname || slotProps.option.name}}</span>
+                </div>
+            </template>
+        </CascadeSelect>
     </div>
 </template>
 
diff --git a/src/views/chart/BarChartDoc.vue b/src/views/chart/BarChartDoc.vue
index b783dabc1..fbe7a1599 100755
--- a/src/views/chart/BarChartDoc.vue
+++ b/src/views/chart/BarChartDoc.vue
@@ -11,7 +11,7 @@ export default {
 					tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <div class="card">
             <h5>Vertical</h5>
             <Chart type="bar" :data="basicData" :options="basicOptions" />
@@ -144,7 +144,7 @@ export default {
 					tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <div class="card">
             <h5>Vertical</h5>
             <Chart type="bar" :data="basicData" :options="basicOptions" />
diff --git a/src/views/chart/ComboChartDoc.vue b/src/views/chart/ComboChartDoc.vue
index 252567c6a..d6db20416 100755
--- a/src/views/chart/ComboChartDoc.vue
+++ b/src/views/chart/ComboChartDoc.vue
@@ -11,7 +11,7 @@ export default {
 					tabName: 'Source',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <Chart type="bar" :data="chartData"/>
     </div>
 </template>
@@ -53,7 +53,7 @@ export default {
 					tabName: 'Composition API',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <Chart type="bar" :data="chartData"/>
     </div>
 </template>
diff --git a/src/views/chart/DoughnutChartDoc.vue b/src/views/chart/DoughnutChartDoc.vue
index f06747b41..3bdb684fa 100755
--- a/src/views/chart/DoughnutChartDoc.vue
+++ b/src/views/chart/DoughnutChartDoc.vue
@@ -11,7 +11,7 @@ export default {
 					tabName :'Source',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <Chart type="doughnut" :data="chartData" />
     </div>
 </template>
@@ -40,7 +40,7 @@ export default {
 					tabName :'Composition API',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <Chart type="doughnut" :data="chartData" />
     </div>
 </template>
diff --git a/src/views/chart/LineChartDoc.vue b/src/views/chart/LineChartDoc.vue
index 600f534fe..e1a0de9b7 100755
--- a/src/views/chart/LineChartDoc.vue
+++ b/src/views/chart/LineChartDoc.vue
@@ -11,7 +11,7 @@ export default {
 					tabName: 'Source',
 					content: `
 <template>
-    <div class="card">
+    <div
         <div class="card">
             <h5>Basic</h5>
             <Chart type="line" :data="basicData" :options="basicOptions" />
@@ -123,7 +123,7 @@ export default {
 					tabName: 'Composition API',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <div class="card">
             <h5>Basic</h5>
             <Chart type="line" :data="basicData" :options="basicOptions" />
diff --git a/src/views/chart/PieChartDoc.vue b/src/views/chart/PieChartDoc.vue
index 0930a6940..591ea0584 100755
--- a/src/views/chart/PieChartDoc.vue
+++ b/src/views/chart/PieChartDoc.vue
@@ -12,7 +12,7 @@ export default {
 					tabName: 'Source',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <Chart type="pie" :data="chartData" />
     </div>
 </template>
@@ -41,7 +41,7 @@ export default {
 					tabName: 'Composition API',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <Chart type="pie" :data="chartData" />
     </div>
 </template>
diff --git a/src/views/chart/PolarAreaChartDoc.vue b/src/views/chart/PolarAreaChartDoc.vue
index 600dd917e..b3be69b6e 100755
--- a/src/views/chart/PolarAreaChartDoc.vue
+++ b/src/views/chart/PolarAreaChartDoc.vue
@@ -11,7 +11,7 @@ export default {
 					tabName: 'Source',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <Chart type="polarArea" :data="chartData" />
     </div>
 </template>
@@ -38,7 +38,7 @@ export default {
 					tabName: 'Composition API',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <Chart type="polarArea" :data="chartData" />
     </div>
 </template>
diff --git a/src/views/chart/RadarChartDoc.vue b/src/views/chart/RadarChartDoc.vue
index 72ba825eb..befbc5e4d 100755
--- a/src/views/chart/RadarChartDoc.vue
+++ b/src/views/chart/RadarChartDoc.vue
@@ -11,7 +11,7 @@ export default {
 					tabName: 'Source',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <Chart type="radar" :data="chartData" />
     </div>
 </template>
@@ -55,7 +55,7 @@ export default {
 					tabName: 'Composition API',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <Chart type="radar" :data="chartData" />
     </div>
 </template>
diff --git a/src/views/checkbox/CheckboxDoc.vue b/src/views/checkbox/CheckboxDoc.vue
index e2049c2fd..e0271bdc9 100755
--- a/src/views/checkbox/CheckboxDoc.vue
+++ b/src/views/checkbox/CheckboxDoc.vue
@@ -114,38 +114,37 @@ export default {
             sources: {
                 'options-api': {
                     tabName: 'Source',
-                    content: `<template>
+                    content: `
+<template>
     <div>
-        <div class="card">
-            <h5>Basic</h5>
-            <div class="p-field-checkbox">
-                <Checkbox id="binary" v-model="checked" :binary="true" />
-                <label for="binary">{{checked}}</label>
-            </div>
+        <h5>Basic</h5>
+        <div class="p-field-checkbox">
+            <Checkbox id="binary" v-model="checked" :binary="true" />
+            <label for="binary">{{checked}}</label>
+        </div>
 
-            <h5>Multiple</h5>
-            <div class="p-field-checkbox">
-                <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
-                <label for="city1">Chicago</label>
-            </div>
-            <div class="p-field-checkbox">
-                <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
-                <label for="city2">Los Angeles</label>
-            </div>
-            <div class="p-field-checkbox">
-                <Checkbox id="city3" name="city" value="New York" v-model="cities" />
-                <label for="city3">New York</label>
-            </div>
-            <div class="p-field-checkbox">
-                <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
-                <label for="city4">San Francisco</label>
-            </div>
+        <h5>Multiple</h5>
+        <div class="p-field-checkbox">
+            <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
+            <label for="city1">Chicago</label>
+        </div>
+        <div class="p-field-checkbox">
+            <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
+            <label for="city2">Los Angeles</label>
+        </div>
+        <div class="p-field-checkbox">
+            <Checkbox id="city3" name="city" value="New York" v-model="cities" />
+            <label for="city3">New York</label>
+        </div>
+        <div class="p-field-checkbox">
+            <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
+            <label for="city4">San Francisco</label>
+        </div>
 
-            <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
-            <div v-for="category of categories" :key="category.key" class="p-field-checkbox">
-                <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
-                <label :for="category.key">{{category.name}}</label>
-            </div>
+        <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
+        <div v-for="category of categories" :key="category.key" class="p-field-checkbox">
+            <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
+            <label :for="category.key">{{category.name}}</label>
         </div>
     </div>
 </template>
@@ -168,38 +167,37 @@ export default {
                 },
                 'composition-api': {
                     tabName: 'Composition API',
-                    content: `<template>
+                    content: `
+<template>
     <div>
-        <div class="card">
-            <h5>Basic</h5>
-            <div class="p-field-checkbox">
-                <Checkbox id="binary" v-model="checked" :binary="true" />
-                <label for="binary">{{checked}}</label>
-            </div>
+        <h5>Basic</h5>
+        <div class="p-field-checkbox">
+            <Checkbox id="binary" v-model="checked" :binary="true" />
+            <label for="binary">{{checked}}</label>
+        </div>
 
-            <h5>Multiple</h5>
-            <div class="p-field-checkbox">
-                <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
-                <label for="city1">Chicago</label>
-            </div>
-            <div class="p-field-checkbox">
-                <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
-                <label for="city2">Los Angeles</label>
-            </div>
-            <div class="p-field-checkbox">
-                <Checkbox id="city3" name="city" value="New York" v-model="cities" />
-                <label for="city3">New York</label>
-            </div>
-            <div class="p-field-checkbox">
-                <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
-                <label for="city4">San Francisco</label>
-            </div>
+        <h5>Multiple</h5>
+        <div class="p-field-checkbox">
+            <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
+            <label for="city1">Chicago</label>
+        </div>
+        <div class="p-field-checkbox">
+            <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
+            <label for="city2">Los Angeles</label>
+        </div>
+        <div class="p-field-checkbox">
+            <Checkbox id="city3" name="city" value="New York" v-model="cities" />
+            <label for="city3">New York</label>
+        </div>
+        <div class="p-field-checkbox">
+            <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
+            <label for="city4">San Francisco</label>
+        </div>
 
-            <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
-            <div v-for="category of categories" :key="category.key" class="p-field-checkbox">
-                <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
-                <label :for="category.key">{{category.name}}</label>
-            </div>
+        <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
+        <div v-for="category of categories" :key="category.key" class="p-field-checkbox">
+            <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
+            <label :for="category.key">{{category.name}}</label>
         </div>
     </div>
 </template>
diff --git a/src/views/chip/ChipDoc.vue b/src/views/chip/ChipDoc.vue
index 5adb30bdc..d7f51c8f8 100644
--- a/src/views/chip/ChipDoc.vue
+++ b/src/views/chip/ChipDoc.vue
@@ -144,7 +144,7 @@ export default {
 					tabName: 'Source',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
             <Chip label="Action" class="p-mr-2 p-mb-2" />
@@ -195,7 +195,7 @@ export default {
 					tabName: 'Composition API',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
             <Chip label="Action" class="p-mr-2 p-mb-2" />
diff --git a/src/views/colorpicker/ColorPickerDoc.vue b/src/views/colorpicker/ColorPickerDoc.vue
index 72d2ef54d..dfeea74c0 100755
--- a/src/views/colorpicker/ColorPickerDoc.vue
+++ b/src/views/colorpicker/ColorPickerDoc.vue
@@ -169,15 +169,14 @@ export default {
             sources: {
                 'options-api': {
                     tabName: 'Source',
-                    content: `<template>
+                    content: `
+<template>
     <div>
-        <div class="card">
-            <h5>Inline</h5>
-            <ColorPicker v-model="color1" :inline="true" />
+        <h5>Inline</h5>
+        <ColorPicker v-model="color1" :inline="true" />
 
-            <h5>Overlay</h5>
-            <ColorPicker v-model="color2" />
-        </div>
+        <h5>Overlay</h5>
+        <ColorPicker v-model="color2" />
     </div>
 </template>
 
@@ -195,15 +194,14 @@ export default {
                 },
                 'composition-api': {
                     tabName: 'Composition API',
-                    content: `<template>
+                    content: `
+<template>
     <div>
-        <div class="card">
-            <h5>Inline</h5>
-            <ColorPicker v-model="color1" :inline="true" />
+        <h5>Inline</h5>
+        <ColorPicker v-model="color1" :inline="true" />
 
-            <h5>Overlay</h5>
-            <ColorPicker v-model="color2" />
-        </div>
+        <h5>Overlay</h5>
+        <ColorPicker v-model="color2" />
     </div>
 </template>
 
diff --git a/src/views/contextmenu/ContextMenuDoc.vue b/src/views/contextmenu/ContextMenuDoc.vue
index de9c60a25..992cc4c56 100755
--- a/src/views/contextmenu/ContextMenuDoc.vue
+++ b/src/views/contextmenu/ContextMenuDoc.vue
@@ -315,7 +315,7 @@ export default {
                tabName: 'Source',
                content: `
 <template>
-   <div class="card">
+   <div>
       <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
       <ContextMenu ref="menu" :model="items" />
     </div>
@@ -471,7 +471,7 @@ export default {
                tabName: 'Composition API',
                content: `
 <template>
-   <div class="card">
+   <div>
       <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
       <ContextMenu ref="menu" :model="items" />
    </div>
diff --git a/src/views/datatable/DataTableBasicDoc.vue b/src/views/datatable/DataTableBasicDoc.vue
index 8645e4bba..6676d55ea 100644
--- a/src/views/datatable/DataTableBasicDoc.vue
+++ b/src/views/datatable/DataTableBasicDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
+    <AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" />
 </template>
 
 <script>
@@ -12,14 +12,12 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="card">
-            <DataTable :value="products" responsiveLayout="scroll">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </div>
+        <DataTable :value="products" responsiveLayout="scroll">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
     </div>
 </template>
 
@@ -48,14 +46,12 @@ export default {
                     content: `
 <template>
 	<div>
-        <div class="card">
-            <DataTable :value="products" responsiveLayout="scroll">
-                <Column field="code" header="Code"></Column>
-                <Column field="name" header="Name"></Column>
-                <Column field="category" header="Category"></Column>
-                <Column field="quantity" header="Quantity"></Column>
-            </DataTable>
-        </div>
+        <DataTable :value="products" responsiveLayout="scroll">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableSizeDemo.vue b/src/views/datatable/DataTableSizeDemo.vue
index c6144c637..f0940efed 100644
--- a/src/views/datatable/DataTableSizeDemo.vue
+++ b/src/views/datatable/DataTableSizeDemo.vue
@@ -9,7 +9,7 @@
 
 		<div class="content-section implementation">
             <div class="card">
-                <DataTable :value="products" class="p-datatable-sm">
+                <DataTable :value="products" class="p-datatable-sm" responsiveLayout="scroll">
                     <template #header>
                         Small Table
                     </template>
@@ -21,7 +21,7 @@
             </div>
 
             <div class="card">
-                <DataTable :value="products">
+                <DataTable :value="products" responsiveLayout="scroll">
                     <template #header>
                         Normal Table
                     </template>
@@ -33,7 +33,7 @@
             </div>
 
             <div class="card">
-                <DataTable :value="products" class="p-datatable-lg">
+                <DataTable :value="products" class="p-datatable-lg" responsiveLayout="scroll">
                     <template #header>
                         Large Table
                     </template>
@@ -64,7 +64,7 @@ export default {
 <template>
 	<div>
         <div class="card">
-            <DataTable :value="products" class="p-datatable-sm">
+            <DataTable :value="products" class="p-datatable-sm" responsiveLayout="scroll">
                 <template #header>
                     Small Table
                 </template>
@@ -76,7 +76,7 @@ export default {
         </div>
 
         <div class="card">
-            <DataTable :value="products">
+            <DataTable :value="products" responsiveLayout="scroll">
                 <template #header>
                     Normal Table
                 </template>
@@ -88,7 +88,7 @@ export default {
         </div>
 
         <div class="card">
-            <DataTable :value="products" class="p-datatable-lg">
+            <DataTable :value="products" class="p-datatable-lg" responsiveLayout="scroll">
                 <template #header>
                     Large Table
                 </template>
@@ -127,7 +127,7 @@ export default {
 <template>
 	<div>
         <div class="card">
-            <DataTable :value="products" class="p-datatable-sm">
+            <DataTable :value="products" class="p-datatable-sm" responsiveLayout="scroll">
                 <template #header>
                     Small Table
                 </template>
@@ -139,7 +139,7 @@ export default {
         </div>
 
         <div class="card">
-            <DataTable :value="products">
+            <DataTable :value="products" responsiveLayout="scroll">
                 <template #header>
                     Normal Table
                 </template>
@@ -151,7 +151,7 @@ export default {
         </div>
 
         <div class="card">
-            <DataTable :value="products" class="p-datatable-lg">
+            <DataTable :value="products" class="p-datatable-lg" responsiveLayout="scroll">
                 <template #header>
                     Large Table
                 </template>
diff --git a/src/views/deferredcontent/DeferredContentDoc.vue b/src/views/deferredcontent/DeferredContentDoc.vue
index 35f2b29e7..dc6322669 100755
--- a/src/views/deferredcontent/DeferredContentDoc.vue
+++ b/src/views/deferredcontent/DeferredContentDoc.vue
@@ -74,7 +74,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <Toast />
 
         <div style="height: 800px">
@@ -129,8 +129,9 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <Toast />
+        
         <div style="height: 800px">
             Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
         </div>
diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue
index 17dfc469f..1fe3a3c53 100755
--- a/src/views/dialog/DialogDoc.vue
+++ b/src/views/dialog/DialogDoc.vue
@@ -296,7 +296,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <Button label="Show" icon="pi pi-external-link" @click="openBasic" />
         <Dialog header="Header" v-model:visible="displayBasic" :style="{width: '50vw'}">
@@ -499,7 +499,7 @@ p {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <Button label="Show" icon="pi pi-external-link" @click="openBasic" />
         <Dialog header="Header" v-model:visible="displayBasic" :style="{width: '50vw'}">
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index 673832f3d..76c725a56 100755
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -464,44 +464,43 @@ export default {
             sources: {
                 'options-api': {
                     tabName: 'Source',
-                    content: `<template>
+                    content: `
+<template>
     <div>
-        <div class="card">
-            <h5>Basic</h5>
-            <Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" optionValue="code" placeholder="Select a City" />
+        <h5>Basic</h5>
+        <Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" optionValue="code" placeholder="Select a City" />
 
-            <h5>Editable</h5>
-            <Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
+        <h5>Editable</h5>
+        <Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
 
-            <h5>Grouped</h5>
-            <Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
-                <template #optiongroup="slotProps">
-                    <div class="p-d-flex p-ai-center country-item">
-                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
-                        <div>{{slotProps.option.label}}</div>
-                    </div>
-                </template>
-            </Dropdown>
+        <h5>Grouped</h5>
+        <Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
+            <template #optiongroup="slotProps">
+                <div class="p-d-flex p-ai-center country-item">
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
+                    <div>{{slotProps.option.label}}</div>
+                </div>
+            </template>
+        </Dropdown>
 
-            <h5>Advanced with Templating, Filtering and Clear Icon</h5>
-            <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
-                <template #value="slotProps">
-                    <div class="country-item country-item-value" v-if="slotProps.value">
-                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
-                        <div>{{slotProps.value.name}}</div>
-                    </div>
-                    <span v-else>
-                        {{slotProps.placeholder}}
-                    </span>
-                </template>
-                <template #option="slotProps">
-                    <div class="country-item">
-                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
-                        <div>{{slotProps.option.name}}</div>
-                    </div>
-                </template>
-            </Dropdown>
-        </div>
+        <h5>Advanced with Templating, Filtering and Clear Icon</h5>
+        <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
+            <template #value="slotProps">
+                <div class="country-item country-item-value" v-if="slotProps.value">
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
+                    <div>{{slotProps.value.name}}</div>
+                </div>
+                <span v-else>
+                    {{slotProps.placeholder}}
+                </span>
+            </template>
+            <template #option="slotProps">
+                <div class="country-item">
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
+                    <div>{{slotProps.option.name}}</div>
+                </div>
+            </template>
+        </Dropdown>
     </div>
 </template>
 
@@ -579,44 +578,43 @@ export default {
                 },
                 'composition-api': {
                     tabName: 'Source',
-                    content: `<template>
+                    content: `
+<template>
     <div>
-        <div class="card">
-            <h5>Basic</h5>
-            <Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" optionValue="code" placeholder="Select a City" />
+        <h5>Basic</h5>
+        <Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" optionValue="code" placeholder="Select a City" />
 
-            <h5>Editable</h5>
-            <Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
+        <h5>Editable</h5>
+        <Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
 
-            <h5>Grouped</h5>
-            <Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
-                <template #optiongroup="slotProps">
-                    <div class="p-d-flex p-ai-center country-item">
-                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
-                        <div>{{slotProps.option.label}}</div>
-                    </div>
-                </template>
-            </Dropdown>
+        <h5>Grouped</h5>
+        <Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
+            <template #optiongroup="slotProps">
+                <div class="p-d-flex p-ai-center country-item">
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
+                    <div>{{slotProps.option.label}}</div>
+                </div>
+            </template>
+        </Dropdown>
 
-            <h5>Advanced with Templating, Filtering and Clear Icon</h5>
-            <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
-                <template #value="slotProps">
-                    <div class="country-item country-item-value" v-if="slotProps.value">
-                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
-                        <div>{{slotProps.value.name}}</div>
-                    </div>
-                    <span v-else>
-                        {{slotProps.placeholder}}
-                    </span>
-                </template>
-                <template #option="slotProps">
-                    <div class="country-item">
-                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
-                        <div>{{slotProps.option.name}}</div>
-                    </div>
-                </template>
-            </Dropdown>
-        </div>
+        <h5>Advanced with Templating, Filtering and Clear Icon</h5>
+        <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
+            <template #value="slotProps">
+                <div class="country-item country-item-value" v-if="slotProps.value">
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
+                    <div>{{slotProps.value.name}}</div>
+                </div>
+                <span v-else>
+                    {{slotProps.placeholder}}
+                </span>
+            </template>
+            <template #option="slotProps">
+                <div class="country-item">
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
+                    <div>{{slotProps.option.name}}</div>
+                </div>
+            </template>
+        </Dropdown>
     </div>
 </template>
 
diff --git a/src/views/editor/EditorDoc.vue b/src/views/editor/EditorDoc.vue
index 236c8dc63..d091b5d8d 100755
--- a/src/views/editor/EditorDoc.vue
+++ b/src/views/editor/EditorDoc.vue
@@ -170,21 +170,19 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="card">
-            <h5>Default</h5>
-            <Editor v-model="value1" editorStyle="height: 320px"/>
+        <h5>Default</h5>
+        <Editor v-model="value1" editorStyle="height: 320px"/>
 
-            <h5>Customized</h5>
-            <Editor v-model="value2" editorStyle="height: 320px">
-                <template v-slot:toolbar>
-                    <span class="ql-formats">
-                        <button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
-                        <button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
-                        <button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
-                    </span>
-                </template>
-            </Editor>
-        </div>
+        <h5>Customized</h5>
+        <Editor v-model="value2" editorStyle="height: 320px">
+            <template v-slot:toolbar>
+                <span class="ql-formats">
+                    <button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
+                    <button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
+                    <button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
+                </span>
+            </template>
+        </Editor>
     </div>
 </template>
 
@@ -205,21 +203,19 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="card">
-            <h5>Default</h5>
-            <Editor v-model="value1" editorStyle="height: 320px"/>
+        <h5>Default</h5>
+        <Editor v-model="value1" editorStyle="height: 320px"/>
 
-            <h5>Customized</h5>
-            <Editor v-model="value2" editorStyle="height: 320px">
-                <template v-slot:toolbar>
-                    <span class="ql-formats">
-                        <button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
-                        <button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
-                        <button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
-                    </span>
-                </template>
-            </Editor>
-        </div>
+        <h5>Customized</h5>
+        <Editor v-model="value2" editorStyle="height: 320px">
+            <template v-slot:toolbar>
+                <span class="ql-formats">
+                    <button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
+                    <button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
+                    <button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
+                </span>
+            </template>
+        </Editor>
     </div>
 </template>
 
diff --git a/src/views/fieldset/FieldsetDemo.vue b/src/views/fieldset/FieldsetDemo.vue
index 9db060fb5..316175e19 100755
--- a/src/views/fieldset/FieldsetDemo.vue
+++ b/src/views/fieldset/FieldsetDemo.vue
@@ -35,13 +35,6 @@
 import FieldsetDoc from './FieldsetDoc';
 
 export default {
-    data() {
-        return {
-            value1: '',
-            value2: '',
-            value3: 'PrimeVue'
-        }
-    },
     components: {
         'FieldsetDoc': FieldsetDoc
     }
diff --git a/src/views/fieldset/FieldsetDoc.vue b/src/views/fieldset/FieldsetDoc.vue
index 76bf97864..e8f8f31ed 100755
--- a/src/views/fieldset/FieldsetDoc.vue
+++ b/src/views/fieldset/FieldsetDoc.vue
@@ -180,7 +180,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Regular</h5>
         <Fieldset legend="Header">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -201,13 +201,6 @@ export default {
 
 <script>
 export default {
-    data() {
-        return {
-            value1: '',
-            value2: '',
-            value3: 'PrimeVue'
-        }
-    }
 }
 <\\/script>
 
@@ -220,8 +213,9 @@ export default {
                 },
                 'composition-api': {
                     tabName: 'Composition API',
-                    content: `<template>
-    <div class="card">
+                    content: `
+<template>
+    <div>
         <h5>Regular</h5>
         <Fieldset legend="Header">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -241,16 +235,7 @@ export default {
 </template>
 
 <script>
-import { ref } from 'vue';
-
 export default {
-    setup() {
-        const value1 = ref('');
-        const value2 = ref('');
-        const value3 = ref('PrimeVue');
-
-        return { value1, value2, value3 }
-    }
 }
 <\\/script>
 
diff --git a/src/views/fileupload/FileUploadDoc.vue b/src/views/fileupload/FileUploadDoc.vue
index 584068e48..92fb8fd3c 100755
--- a/src/views/fileupload/FileUploadDoc.vue
+++ b/src/views/fileupload/FileUploadDoc.vue
@@ -341,7 +341,7 @@ export default {
 					tabName: 'Source',
 					content: `
 <template>
-    <div class="card">
+    <div>
 		<Toast />
 
         <h5>Advanced</h5>
@@ -374,7 +374,7 @@ export default {
 					tabName: 'Composition API',
 					content: `
 <template>
-    <div class="card">
+    <div>
 		<Toast />
 
         <h5>Advanced</h5>
diff --git a/src/views/floatlabel/FloatLabelDemo.vue b/src/views/floatlabel/FloatLabelDemo.vue
index f500cbc35..0817a6efe 100644
--- a/src/views/floatlabel/FloatLabelDemo.vue
+++ b/src/views/floatlabel/FloatLabelDemo.vue
@@ -346,6 +346,8 @@ export default {
             value9: null,
             value10: null,
             value11: null,
+            valueIconLeft: null,
+            valueIconRight: null,
             selectedCity: null,
             cascadeCountries: [
                 {
@@ -556,7 +558,7 @@ export default {
 
 <script>
 import { ref, onMounted } from 'vue';
-import CountryService from '../service/CountryService';
+import CountryService from './service/CountryService';
 
 export default {
     setup() {
@@ -667,10 +669,10 @@ export default {
         const searchCountry = (event) => {
             setTimeout(() => {
                 if (!event.query.trim().length) {
-                    this.filteredCountries = [...this.countries];
+                    filteredCountries.value = [...countries.value];
                 }
                 else {
-                    this.filteredCountries = this.countries.filter((country) => {
+                    filteredCountries.value = countries.value.filter((country) => {
                         return country.name.toLowerCase().startsWith(event.query.toLowerCase());
                     });
                 }
diff --git a/src/views/fullcalendar/FullCalendarDoc.vue b/src/views/fullcalendar/FullCalendarDoc.vue
index f7aabe9cc..1b38c1901 100755
--- a/src/views/fullcalendar/FullCalendarDoc.vue
+++ b/src/views/fullcalendar/FullCalendarDoc.vue
@@ -211,7 +211,7 @@ export default {
                     tabName: 'Source',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <FullCalendar :events="events" :options="options" />
     </div>
 </template>
@@ -262,7 +262,7 @@ export default {
                     tabName: 'Composition API',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <FullCalendar :events="events" :options="options" />
     </div>
 </template>
diff --git a/src/views/inplace/InplaceDoc.vue b/src/views/inplace/InplaceDoc.vue
index f66e06295..3a20811ac 100755
--- a/src/views/inplace/InplaceDoc.vue
+++ b/src/views/inplace/InplaceDoc.vue
@@ -194,7 +194,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Input</h5>
         <Inplace :closable="true">
             <template #display>
@@ -260,7 +260,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Input</h5>
         <Inplace :closable="true">
             <template #display>
diff --git a/src/views/inputgroup/InputGroupDoc.vue b/src/views/inputgroup/InputGroupDoc.vue
index f3d063cb7..f5a656aab 100755
--- a/src/views/inputgroup/InputGroupDoc.vue
+++ b/src/views/inputgroup/InputGroupDoc.vue
@@ -11,7 +11,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Addons</h5>
         <div class="p-grid p-fluid">
             <div class="p-col-12 p-md-4">
@@ -133,7 +133,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Addons</h5>
         <div class="p-grid p-fluid">
             <div class="p-col-12 p-md-4">
diff --git a/src/views/inputmask/InputMaskDoc.vue b/src/views/inputmask/InputMaskDoc.vue
index fad3f6c2a..e4e8bda45 100755
--- a/src/views/inputmask/InputMaskDoc.vue
+++ b/src/views/inputmask/InputMaskDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc name="InputMaskDoc" :sources="sources">
+    <AppDoc name="InputMaskDemo" :sources="sources">
         <h5>Import</h5>
 <pre v-code.script><code>
 import InputMask from 'primevue/inputmask';
@@ -131,7 +131,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <div class="p-fluid p-formgrid p-grid">
             <div class="p-field p-col-12 p-md-4">
                 <label for="basic">Basic</label>
@@ -186,7 +186,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <div class="p-fluid p-formgrid p-grid">
             <div class="p-field p-col-12 p-md-4">
                 <label for="basic">Basic</label>
diff --git a/src/views/inputnumber/InputNumberDoc.vue b/src/views/inputnumber/InputNumberDoc.vue
index 64bcc904e..81b7f2704 100755
--- a/src/views/inputnumber/InputNumberDoc.vue
+++ b/src/views/inputnumber/InputNumberDoc.vue
@@ -363,8 +363,7 @@ export default {
                     tabName : 'Source',
                     content: `
 <template>
-    <div class="card">
-
+    <div>
         <h5>Numerals</h5>
         <div class="p-fluid p-grid p-formgrid">
             <div class="p-field p-col-12 p-md-3">
@@ -501,8 +500,7 @@ export default {
                     tabName : 'Composition API',
                     content: `
 <template>
-    <div class="card">
-
+    <div>
         <h5>Numerals</h5>
         <div class="p-fluid p-grid p-formgrid">
             <div class="p-field p-col-12 p-md-3">
diff --git a/src/views/inputswitch/InputSwitchDoc.vue b/src/views/inputswitch/InputSwitchDoc.vue
index 27b244b5a..6ccde2206 100755
--- a/src/views/inputswitch/InputSwitchDoc.vue
+++ b/src/views/inputswitch/InputSwitchDoc.vue
@@ -104,7 +104,7 @@ export default {
 					tabName: 'Source',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <InputSwitch v-model="checked1" />
 
@@ -129,7 +129,7 @@ export default {
 					tabName: 'Composition API',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <InputSwitch v-model="checked1" />
 
diff --git a/src/views/inputtext/InputTextDoc.vue b/src/views/inputtext/InputTextDoc.vue
index 42587e39e..dcf70c998 100755
--- a/src/views/inputtext/InputTextDoc.vue
+++ b/src/views/inputtext/InputTextDoc.vue
@@ -152,7 +152,7 @@ export default {
                     tabName: 'Source',
                     content:`
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <InputText type="text" v-model="value1" />
         <span :style="{marginLeft: '.5em'}">{{value1}}</span>
@@ -236,7 +236,7 @@ export default {
                     tabName: 'Composition API',
                     content:`
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <InputText type="text" v-model="value1" />
         <span :style="{marginLeft: '.5em'}">{{value1}}</span>
diff --git a/src/views/invalid/InvalidDemo.vue b/src/views/invalid/InvalidDemo.vue
index fed5b64f2..50094003a 100644
--- a/src/views/invalid/InvalidDemo.vue
+++ b/src/views/invalid/InvalidDemo.vue
@@ -160,7 +160,7 @@ export default {
                     tabName :'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <div class="p-fluid p-grid">
             <div class="p-field p-col-12 p-md-4">
                 <InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
@@ -333,7 +333,7 @@ export default {
                     tabName :'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <div class="p-fluid p-grid">
             <div class="p-field p-col-12 p-md-4">
                 <InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
diff --git a/src/views/knob/KnobDoc.vue b/src/views/knob/KnobDoc.vue
index f280442cf..9837a914a 100644
--- a/src/views/knob/KnobDoc.vue
+++ b/src/views/knob/KnobDoc.vue
@@ -210,7 +210,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <div class="p-grid p-formgrid p-text-center">
             <div class="p-field p-col-12 p-md-4">
                 <h5>Basic</h5>
@@ -275,7 +275,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <div class="p-grid p-formgrid p-text-center">
             <div class="p-field p-col-12 p-md-4">
                 <h5>Basic</h5>
diff --git a/src/views/listbox/ListboxDoc.vue b/src/views/listbox/ListboxDoc.vue
index 2dc09ba88..6890ba90c 100755
--- a/src/views/listbox/ListboxDoc.vue
+++ b/src/views/listbox/ListboxDoc.vue
@@ -358,7 +358,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Single</h5>
         <Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" />
 
@@ -447,7 +447,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Single</h5>
         <Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" />
 
diff --git a/src/views/megamenu/MegaMenuDoc.vue b/src/views/megamenu/MegaMenuDoc.vue
index e660d840f..c0a4ed409 100755
--- a/src/views/megamenu/MegaMenuDoc.vue
+++ b/src/views/megamenu/MegaMenuDoc.vue
@@ -254,7 +254,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Horizontal</h5>
         <MegaMenu :model="items" />
 
@@ -389,7 +389,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Horizontal</h5>
         <MegaMenu :model="items" />
 
diff --git a/src/views/menu/MenuDoc.vue b/src/views/menu/MenuDoc.vue
index 0691cd767..dff58451a 100755
--- a/src/views/menu/MenuDoc.vue
+++ b/src/views/menu/MenuDoc.vue
@@ -213,7 +213,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <Toast />
 
         <h5>Inline</h5>
@@ -281,7 +281,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
        <Toast />
 
         <h5>Inline</h5>
diff --git a/src/views/menubar/MenubarDoc.vue b/src/views/menubar/MenubarDoc.vue
index d6b37cf38..4176c7d43 100755
--- a/src/views/menubar/MenubarDoc.vue
+++ b/src/views/menubar/MenubarDoc.vue
@@ -270,7 +270,7 @@ export default {
                tabName: 'Source',
                content: `
 <template>
-    <div class="card">
+    <div>
         <Menubar :model="items">
             <template #start>
                 <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
@@ -424,7 +424,7 @@ export default {
                tabName: 'Composition API',
                content: `
 <template>
-    <div class="card">
+    <div>
         <Menubar :model="items">
             <template #start>
                 <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
diff --git a/src/views/message/MessageDoc.vue b/src/views/message/MessageDoc.vue
index c517d26f5..700d33a01 100755
--- a/src/views/message/MessageDoc.vue
+++ b/src/views/message/MessageDoc.vue
@@ -259,7 +259,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Severities</h5>
         <Message severity="success">Success Message Content</Message>
         <Message severity="info">Info Message Content</Message>
@@ -340,7 +340,7 @@ button.p-button {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Severities</h5>
         <Message severity="success">Success Message Content</Message>
         <Message severity="info">Info Message Content</Message>
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index 3c0c8f7d4..035121840 100755
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/src/views/multiselect/MultiSelectDoc.vue
@@ -455,7 +455,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" placeholder="Select Cities" />
 
@@ -588,7 +588,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" placeholder="Select Cities" />
 
diff --git a/src/views/organizationchart/OrganizationChartDoc.vue b/src/views/organizationchart/OrganizationChartDoc.vue
index c932b3a0c..d54c91603 100755
--- a/src/views/organizationchart/OrganizationChartDoc.vue
+++ b/src/views/organizationchart/OrganizationChartDoc.vue
@@ -488,32 +488,34 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <Toast />
 
-        <h5>Advanced</h5>
-        <OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection"
-            @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeCollapse="onNodeCollapse" @nodeExpand="onNodeExpand">
-            <template #person="slotProps">
-                <div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
-                <div class="node-content">
-                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32">
-                    <div>{{slotProps.node.data.name}}</div>
-                </div>
-            </template>
-            <template #default="slotProps">
-                <span>{{slotProps.node.data.label}}</span>
-            </template>
-        </OrganizationChart>
-    </div>
+        <div class="card">
+            <h5>Advanced</h5>
+            <OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection"
+                @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeCollapse="onNodeCollapse" @nodeExpand="onNodeExpand">
+                <template #person="slotProps">
+                    <div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
+                    <div class="node-content">
+                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32">
+                        <div>{{slotProps.node.data.name}}</div>
+                    </div>
+                </template>
+                <template #default="slotProps">
+                    <span>{{slotProps.node.data.label}}</span>
+                </template>
+            </OrganizationChart>
+        </div>
 
-    <div class="card">
-        <h5>Basic</h5>
-        <OrganizationChart :value="data2">
-            <template #default="slotProps">
-                <span>{{slotProps.node.data.label}}</span>
-            </template>
-        </OrganizationChart>
+        <div class="card">
+            <h5>Basic</h5>
+            <OrganizationChart :value="data2">
+                <template #default="slotProps">
+                    <span>{{slotProps.node.data.label}}</span>
+                </template>
+            </OrganizationChart>
+        </div>
     </div>
 </template>
 
@@ -701,32 +703,34 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+   <div>
         <Toast />
 
-        <h5>Advanced</h5>
-        <OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection"
-            @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeCollapse="onNodeCollapse" @nodeExpand="onNodeExpand">
-            <template #person="slotProps">
-                <div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
-                <div class="node-content">
-                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32">
-                    <div>{{slotProps.node.data.name}}</div>
-                </div>
-            </template>
-            <template #default="slotProps">
-                <span>{{slotProps.node.data.label}}</span>
-            </template>
-        </OrganizationChart>
-    </div>
+        <div class="card">
+            <h5>Advanced</h5>
+            <OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" v-model:selectionKeys="selection"
+                @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" @nodeCollapse="onNodeCollapse" @nodeExpand="onNodeExpand">
+                <template #person="slotProps">
+                    <div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
+                    <div class="node-content">
+                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="32">
+                        <div>{{slotProps.node.data.name}}</div>
+                    </div>
+                </template>
+                <template #default="slotProps">
+                    <span>{{slotProps.node.data.label}}</span>
+                </template>
+            </OrganizationChart>
+        </div>
 
-    <div class="card">
-        <h5>Basic</h5>
-        <OrganizationChart :value="data2">
-            <template #default="slotProps">
-                <span>{{slotProps.node.data.label}}</span>
-            </template>
-        </OrganizationChart>
+        <div class="card">
+            <h5>Basic</h5>
+            <OrganizationChart :value="data2">
+                <template #default="slotProps">
+                    <span>{{slotProps.node.data.label}}</span>
+                </template>
+            </OrganizationChart>
+        </div>
     </div>
 </template>
 
diff --git a/src/views/overlaypanel/OverlayPanelDoc.vue b/src/views/overlaypanel/OverlayPanelDoc.vue
index 18649d18e..6c0cd1f0c 100755
--- a/src/views/overlaypanel/OverlayPanelDoc.vue
+++ b/src/views/overlaypanel/OverlayPanelDoc.vue
@@ -175,7 +175,7 @@ export default {
                     tabName: 'Source',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <Toast />
 
         <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
@@ -245,7 +245,7 @@ button {
                     tabName: 'Composition API',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <Toast />
 
         <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
diff --git a/src/views/paginator/PaginatorDoc.vue b/src/views/paginator/PaginatorDoc.vue
index b4eca0460..928075057 100755
--- a/src/views/paginator/PaginatorDoc.vue
+++ b/src/views/paginator/PaginatorDoc.vue
@@ -277,7 +277,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
 
@@ -330,7 +330,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
 
diff --git a/src/views/panel/PanelDoc.vue b/src/views/panel/PanelDoc.vue
index 336f2156e..45b221077 100755
--- a/src/views/panel/PanelDoc.vue
+++ b/src/views/panel/PanelDoc.vue
@@ -208,7 +208,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <Toast />
 
         <h5>Regular</h5>
@@ -298,7 +298,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <Toast />
 
         <h5>Regular</h5>
diff --git a/src/views/panelmenu/PanelMenuDoc.vue b/src/views/panelmenu/PanelMenuDoc.vue
index b81145546..a4c85ef33 100755
--- a/src/views/panelmenu/PanelMenuDoc.vue
+++ b/src/views/panelmenu/PanelMenuDoc.vue
@@ -227,7 +227,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <PanelMenu :model="items" />
     </div>
 </template>
@@ -369,7 +369,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <PanelMenu :model="items" />
     </div>
 </template>
diff --git a/src/views/password/PasswordDoc.vue b/src/views/password/PasswordDoc.vue
index 31646baf4..5c4909f3e 100755
--- a/src/views/password/PasswordDoc.vue
+++ b/src/views/password/PasswordDoc.vue
@@ -215,7 +215,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <Password v-model="value1" :feedback="false" />
 
@@ -269,7 +269,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <Password v-model="value1" :feedback="false" />
 
diff --git a/src/views/picklist/PickListDoc.vue b/src/views/picklist/PickListDoc.vue
index 5087871bc..ce372ea49 100755
--- a/src/views/picklist/PickListDoc.vue
+++ b/src/views/picklist/PickListDoc.vue
@@ -268,7 +268,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <PickList v-model="products" listStyle="height:342px" dataKey="id">
             <template #sourceHeader>
                 Available
@@ -370,7 +370,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <PickList v-model="products" listStyle="height:342px" dataKey="id">
             <template #sourceHeader>
                 Available
diff --git a/src/views/progressbar/ProgressBarDoc.vue b/src/views/progressbar/ProgressBarDoc.vue
index 67e327dc1..08f1fa6e7 100755
--- a/src/views/progressbar/ProgressBarDoc.vue
+++ b/src/views/progressbar/ProgressBarDoc.vue
@@ -120,7 +120,7 @@ export default {
                     tabName: 'Source',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Dynamic</h5>
         <ProgressBar :value="value1" />
 
@@ -168,8 +168,9 @@ export default {
 				},
                 'composition-api': {
                     tabName: 'Composition API',
-					content: `<template>
-    <div class="card">
+					content: `
+<template>
+    <div>
         <h5>Dynamic</h5>
         <ProgressBar :value="value1" />
 
diff --git a/src/views/progressspinner/ProgressSpinnerDoc.vue b/src/views/progressspinner/ProgressSpinnerDoc.vue
index 10216b579..326031a59 100755
--- a/src/views/progressspinner/ProgressSpinnerDoc.vue
+++ b/src/views/progressspinner/ProgressSpinnerDoc.vue
@@ -111,7 +111,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <ProgressSpinner />
 
@@ -130,7 +130,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <ProgressSpinner />
 
diff --git a/src/views/radiobutton/RadioButtonDoc.vue b/src/views/radiobutton/RadioButtonDoc.vue
index b4f356315..5e3650a26 100755
--- a/src/views/radiobutton/RadioButtonDoc.vue
+++ b/src/views/radiobutton/RadioButtonDoc.vue
@@ -112,7 +112,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <div class="p-field-radiobutton">
             <RadioButton id="city1" name="city" value="Chicago" v-model="city" />
@@ -164,7 +164,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <div class="p-field-radiobutton">
             <RadioButton id="city1" name="city" value="Chicago" v-model="city" />
diff --git a/src/views/rating/RatingDoc.vue b/src/views/rating/RatingDoc.vue
index 76859792e..ce811df37 100755
--- a/src/views/rating/RatingDoc.vue
+++ b/src/views/rating/RatingDoc.vue
@@ -140,7 +140,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic {{val1}}</h5>
         <Rating v-model="val1" />
 
@@ -171,7 +171,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic {{val1}}</h5>
         <Rating v-model="val1" />
 
diff --git a/src/views/responsive/ResponsiveDemo.vue b/src/views/responsive/ResponsiveDemo.vue
index 0b9dc076a..6ac568cc2 100644
--- a/src/views/responsive/ResponsiveDemo.vue
+++ b/src/views/responsive/ResponsiveDemo.vue
@@ -516,7 +516,7 @@
             </div>
         </div>
 
-        <AppDoc name="ResponsiveDemo" :sources="sources" :service="['CustomerService', 'CountryService', 'ProductService']" :data="['countries', 'customers-large', 'products-small']"></AppDoc>
+        <AppDoc name="ResponsiveDemo" :sources="sources" :service="['CustomerService', 'CountryService', 'ProductService']" :data="['customers-large', 'countries', 'products-small']"></AppDoc>
     </div>
 </template>
 
diff --git a/src/views/scrollpanel/ScrollPanelDoc.vue b/src/views/scrollpanel/ScrollPanelDoc.vue
index 1b282e775..e9455d3c6 100644
--- a/src/views/scrollpanel/ScrollPanelDoc.vue
+++ b/src/views/scrollpanel/ScrollPanelDoc.vue
@@ -97,7 +97,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <div class="p-grid">
             <div class="p-col-12 p-md-4 p-p-5">
                 <ScrollPanel style="width: 100%; height: 200px">
@@ -203,7 +203,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <div class="p-grid">
             <div class="p-col-12 p-md-4 p-p-5">
                 <ScrollPanel style="width: 100%; height: 200px">
diff --git a/src/views/scrolltop/ScrollTopDemo.vue b/src/views/scrolltop/ScrollTopDemo.vue
index cda5aba48..37b2f3721 100644
--- a/src/views/scrolltop/ScrollTopDemo.vue
+++ b/src/views/scrolltop/ScrollTopDemo.vue
@@ -10,7 +10,7 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Window</h5>
-                <p>Scroll down the page to display the ScrollTo component.</p>
+                <p>Scroll down the page to display the ScrollTop component.</p>
                 <ScrollTop />
 
                 <h5>Element</h5>
diff --git a/src/views/scrolltop/ScrollTopDoc.vue b/src/views/scrolltop/ScrollTopDoc.vue
index 148d802f4..9e8b0087c 100644
--- a/src/views/scrolltop/ScrollTopDoc.vue
+++ b/src/views/scrolltop/ScrollTopDoc.vue
@@ -109,11 +109,7 @@ export default {
                     tabName: 'Source',
 					content: `
 <template>
-    <div class="card">
-        <h5>Window</h5>
-        <p>Scroll down the page to display the ScrollTo component.</p>
-        <ScrollTop />
-
+    <div>
         <h5>Element</h5>
         <ScrollPanel style="width: 250px; height: 200px">
             <p>
@@ -161,11 +157,7 @@ export default {
                     tabName: 'Composition API',
 					content: `
 <template>
-    <div class="card">
-        <h5>Window</h5>
-        <p>Scroll down the page to display the ScrollTo component.</p>
-        <ScrollTop />
-
+    <div>
         <h5>Element</h5>
         <ScrollPanel style="width: 250px; height: 200px">
             <p>
diff --git a/src/views/selectbutton/SelectButtonDoc.vue b/src/views/selectbutton/SelectButtonDoc.vue
index e6e1eb1d0..1af18d7c9 100755
--- a/src/views/selectbutton/SelectButtonDoc.vue
+++ b/src/views/selectbutton/SelectButtonDoc.vue
@@ -179,7 +179,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Single Selection</h5>
         <SelectButton v-model="value1" :options="options" />
 
@@ -223,7 +223,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Single Selection</h5>
         <SelectButton v-model="value1" :options="options" />
 
diff --git a/src/views/sidebar/SidebarDoc.vue b/src/views/sidebar/SidebarDoc.vue
index 81e130703..3f74c1d6c 100755
--- a/src/views/sidebar/SidebarDoc.vue
+++ b/src/views/sidebar/SidebarDoc.vue
@@ -211,7 +211,7 @@ export default {
 					tabName: 'Source',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" />
         <Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2"  />
         <Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2"  />
@@ -259,7 +259,7 @@ export default {
 					tabName: 'Composition API',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" />
         <Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2"  />
         <Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2"  />
diff --git a/src/views/skeleton/SkeletonDemo.vue b/src/views/skeleton/SkeletonDemo.vue
index cab793186..c15069084 100644
--- a/src/views/skeleton/SkeletonDemo.vue
+++ b/src/views/skeleton/SkeletonDemo.vue
@@ -150,7 +150,7 @@ import SkeletonDoc from './SkeletonDoc';
 export default {
     data() {
         return {
-            products: new Array(5)
+            products: new Array(4)
         }
     },
     components: {
diff --git a/src/views/skeleton/SkeletonDoc.vue b/src/views/skeleton/SkeletonDoc.vue
index f81218747..7d7d406c6 100644
--- a/src/views/skeleton/SkeletonDoc.vue
+++ b/src/views/skeleton/SkeletonDoc.vue
@@ -273,7 +273,7 @@ export default {
 export default {
     data() {
         return {
-            products: new Array(5)
+            products: new Array(4)
         }
     }
 }
@@ -432,7 +432,7 @@ import { ref } from 'vue';
 
 export default {
     setup() {
-        const products = ref(new Array(5));
+        const products = ref(new Array(4));
 
         return { products }
     }
diff --git a/src/views/slider/SliderDoc.vue b/src/views/slider/SliderDoc.vue
index b04171827..b35108d9e 100755
--- a/src/views/slider/SliderDoc.vue
+++ b/src/views/slider/SliderDoc.vue
@@ -183,7 +183,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic: {{value1}}</h5>
         <Slider v-model="value1" />
 
@@ -229,7 +229,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic: {{value1}}</h5>
         <Slider v-model="value1" />
 
diff --git a/src/views/spacing/SpacingDoc.vue b/src/views/spacing/SpacingDoc.vue
index 57e6a97af..63e86e9fc 100644
--- a/src/views/spacing/SpacingDoc.vue
+++ b/src/views/spacing/SpacingDoc.vue
@@ -141,6 +141,12 @@ export default {
 
 }
 <\\/script>
+
+<style scoped>
+.demo-container {
+    border: 1px solid var(--surface-d);
+}
+</style>
 `
 				},
                 'composition-api': {
@@ -216,6 +222,12 @@ export default {
 
 }
 <\\/script>
+
+<style scoped>
+.demo-container {
+    border: 1px solid var(--surface-d);
+}
+</style>
 `
 				}
             }
diff --git a/src/views/splitbutton/SplitButtonDoc.vue b/src/views/splitbutton/SplitButtonDoc.vue
index da9fa4fc2..7c486aca5 100755
--- a/src/views/splitbutton/SplitButtonDoc.vue
+++ b/src/views/splitbutton/SplitButtonDoc.vue
@@ -192,7 +192,7 @@ export default {
 					tabName: 'Source',
 					content:`
 <template>
-    <div class="card">
+    <div>
 		<Toast />
 
         <h5>Basic</h5>
@@ -260,8 +260,8 @@ export default {
 				'composition-api': {
 					tabName: 'Composition API',
 					content:`
-	<template>
-    <div class="card">
+<template>
+    <div>
 		<Toast />
 
         <h5>Basic</h5>
diff --git a/src/views/tabmenu/TabMenuDoc.vue b/src/views/tabmenu/TabMenuDoc.vue
index 76bf3d7b5..9e6ff7fe6 100755
--- a/src/views/tabmenu/TabMenuDoc.vue
+++ b/src/views/tabmenu/TabMenuDoc.vue
@@ -110,7 +110,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <TabMenu :model="items" />
         <router-view />
     </div>
@@ -162,7 +162,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <TabMenu :model="items" />
         <router-view />
     </div>
diff --git a/src/views/tag/TagDoc.vue b/src/views/tag/TagDoc.vue
index 4812c5915..367659fdb 100644
--- a/src/views/tag/TagDoc.vue
+++ b/src/views/tag/TagDoc.vue
@@ -125,7 +125,7 @@ export default {
                     tabName: 'Source',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Tags</h5>
         <Tag class="p-mr-2" value="Primary"></Tag>
         <Tag class="p-mr-2" severity="success" value="Success"></Tag>
@@ -159,7 +159,7 @@ export default {
                     tabName: 'Composition API',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Tags</h5>
         <Tag class="p-mr-2" value="Primary"></Tag>
         <Tag class="p-mr-2" severity="success" value="Success"></Tag>
diff --git a/src/views/terminal/TerminalDoc.vue b/src/views/terminal/TerminalDoc.vue
index 4e7263c4e..628ce67ea 100755
--- a/src/views/terminal/TerminalDoc.vue
+++ b/src/views/terminal/TerminalDoc.vue
@@ -134,7 +134,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
         <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
     </div>
@@ -206,7 +206,7 @@ p {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
         <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
     </div>
diff --git a/src/views/textarea/TextareaDoc.vue b/src/views/textarea/TextareaDoc.vue
index 1d3dab1ed..44593f828 100755
--- a/src/views/textarea/TextareaDoc.vue
+++ b/src/views/textarea/TextareaDoc.vue
@@ -85,7 +85,7 @@ export default {
 					tabName: 'Source',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <Textarea v-model="value1" rows="5" cols="30" />
 
@@ -114,7 +114,7 @@ export default {
 					tabName: 'Composition API',
 					content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <Textarea v-model="value1" rows="5" cols="30" />
 
diff --git a/src/views/tieredmenu/TieredMenuDoc.vue b/src/views/tieredmenu/TieredMenuDoc.vue
index 83a463574..c4937cb28 100755
--- a/src/views/tieredmenu/TieredMenuDoc.vue
+++ b/src/views/tieredmenu/TieredMenuDoc.vue
@@ -304,7 +304,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Inline</h5>
         <TieredMenu :model="items" />
 
@@ -464,7 +464,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Inline</h5>
         <TieredMenu :model="items" />
 
diff --git a/src/views/togglebutton/ToggleButtonDoc.vue b/src/views/togglebutton/ToggleButtonDoc.vue
index c9781872e..788928f47 100755
--- a/src/views/togglebutton/ToggleButtonDoc.vue
+++ b/src/views/togglebutton/ToggleButtonDoc.vue
@@ -146,7 +146,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
 
@@ -171,7 +171,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
 
diff --git a/src/views/toolbar/ToolbarDoc.vue b/src/views/toolbar/ToolbarDoc.vue
index 79f301d58..ed89a0220 100755
--- a/src/views/toolbar/ToolbarDoc.vue
+++ b/src/views/toolbar/ToolbarDoc.vue
@@ -89,7 +89,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <Toolbar>
             <template #left>
                 <Button label="New" icon="pi pi-plus" class="p-mr-2" />
@@ -150,7 +150,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <Toolbar>
             <template #left>
                 <Button label="New" icon="pi pi-plus" class="p-mr-2" />
diff --git a/src/views/tooltip/TooltipDoc.vue b/src/views/tooltip/TooltipDoc.vue
index d51d98adb..9d5693265 100755
--- a/src/views/tooltip/TooltipDoc.vue
+++ b/src/views/tooltip/TooltipDoc.vue
@@ -90,7 +90,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Positions</h5>
         <div class="p-grid p-fluid">
             <div class="p-col-12 p-md-3">
@@ -125,7 +125,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Positions</h5>
         <div class="p-grid p-fluid">
             <div class="p-col-12 p-md-3">
diff --git a/src/views/tree/TreeDoc.vue b/src/views/tree/TreeDoc.vue
index 1339d65c6..4e9cbe9bb 100755
--- a/src/views/tree/TreeDoc.vue
+++ b/src/views/tree/TreeDoc.vue
@@ -740,7 +740,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <Tree :value="nodes"></Tree>
 
@@ -804,7 +804,7 @@ button {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Basic</h5>
         <Tree :value="nodes"></Tree>
 
diff --git a/src/views/tree/TreeFilterDemo.vue b/src/views/tree/TreeFilterDemo.vue
index 2fa13a264..491cfe7d4 100755
--- a/src/views/tree/TreeFilterDemo.vue
+++ b/src/views/tree/TreeFilterDemo.vue
@@ -34,7 +34,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Lenient Filter</h5>
         <Tree :value="nodes" :filter="true" filterMode="lenient"></Tree>
 
@@ -88,7 +88,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <h5>Lenient Filter</h5>
         <Tree :value="nodes" :filter="true" filterMode="lenient"></Tree>
 
diff --git a/src/views/tree/TreeLazyDemo.vue b/src/views/tree/TreeLazyDemo.vue
index 08ee150bd..c5fea443a 100755
--- a/src/views/tree/TreeLazyDemo.vue
+++ b/src/views/tree/TreeLazyDemo.vue
@@ -30,7 +30,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <Tree :value="nodes" @nodeExpand="onNodeExpand" :loading="loading"></Tree>
     </div>                   
 </template>
@@ -107,7 +107,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <Tree :value="nodes" @nodeExpand="onNodeExpand" :loading="loading"></Tree>
     </div>                   
 </template>
diff --git a/src/views/tree/TreeSelectionDemo.vue b/src/views/tree/TreeSelectionDemo.vue
index 0d162fa20..333b8d2d4 100755
--- a/src/views/tree/TreeSelectionDemo.vue
+++ b/src/views/tree/TreeSelectionDemo.vue
@@ -48,7 +48,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <Toast />
 
         <h5>Single Selection</h5>
@@ -106,7 +106,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <Toast />
 
         <h5>Single Selection</h5>
diff --git a/src/views/tree/TreeTemplatingDemo.vue b/src/views/tree/TreeTemplatingDemo.vue
index 79eb14f79..dc377ddfd 100755
--- a/src/views/tree/TreeTemplatingDemo.vue
+++ b/src/views/tree/TreeTemplatingDemo.vue
@@ -55,7 +55,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <Tree :value="nodes">
             <template #default="slotProps">
                 <b>{{slotProps.node.label}}</b>
@@ -115,7 +115,7 @@ button {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <Tree :value="nodes">
             <template #default="slotProps">
                 <b>{{slotProps.node.label}}</b>
diff --git a/src/views/treetable/TreeTableColToggleDemo.vue b/src/views/treetable/TreeTableColToggleDemo.vue
index 3f0bf8341..6447b49b1 100755
--- a/src/views/treetable/TreeTableColToggleDemo.vue
+++ b/src/views/treetable/TreeTableColToggleDemo.vue
@@ -37,8 +37,9 @@ export default {
             sources: {
                 'options-api': {
                     tabName: 'Source',
-                    content: `<template>
-    <div class="card">
+                    content: `
+<template>
+    <div>
         <TreeTable :value="nodes">
             <template #header>
                 <div style="text-align:left">
@@ -87,8 +88,9 @@ export default {
                 },
                 'composition-api': {
                     tabName: 'Composition API',
-                    content: `<template>
-    <div class="card">
+                    content: `
+<template>
+    <div>
         <TreeTable :value="nodes">
             <template #header>
                 <div style="text-align:left">
diff --git a/src/views/treetable/TreeTableLazyDemo.vue b/src/views/treetable/TreeTableLazyDemo.vue
index 8ef51dfec..2f7537ef7 100755
--- a/src/views/treetable/TreeTableLazyDemo.vue
+++ b/src/views/treetable/TreeTableLazyDemo.vue
@@ -36,7 +36,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
             @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
             <Column field="name" header="Name" :expander="true"></Column>
@@ -138,8 +138,9 @@ export default {
                 },
                 'composition-api': {
                     tabName: 'Composition API',
-                    content: `<template>
-    <div class="card">
+                    content: `
+<template>
+    <div>
         <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
             @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
             <Column field="name" header="Name" :expander="true"></Column>
@@ -172,7 +173,7 @@ export default {
                 loading.value = true;
 
                 setTimeout(() => {
-                    let lazyNode = {...node.value};
+                    let lazyNode = {...node};
 
                     lazyNode.children = [
                         {
@@ -191,7 +192,7 @@ export default {
                         }
                     ];
 
-                    let nodes = nodes.value.map(n => {
+                    let newNodes = nodes.value.map(n => {
                         if (n.key === node.key) {
                             n = lazyNode;
                         }
@@ -200,7 +201,7 @@ export default {
                     });
 
                     loading.value = false;
-                    nodes.value = nodes;
+                    nodes.value = newNodes;
                 }, 250);
             }
         };
diff --git a/src/views/treetable/TreeTablePaginatorDemo.vue b/src/views/treetable/TreeTablePaginatorDemo.vue
index af3862581..d690a78d1 100755
--- a/src/views/treetable/TreeTablePaginatorDemo.vue
+++ b/src/views/treetable/TreeTablePaginatorDemo.vue
@@ -31,7 +31,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <TreeTable :value="nodes" :paginator="true" :rows="10">
             <Column field="name" header="Name" :expander="true"></Column>
             <Column field="size" header="Size"></Column>
@@ -82,7 +82,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <TreeTable :value="nodes" :paginator="true" :rows="10">
             <Column field="name" header="Name" :expander="true"></Column>
             <Column field="size" header="Size"></Column>
diff --git a/src/views/treetable/TreeTableResponsiveDemo.vue b/src/views/treetable/TreeTableResponsiveDemo.vue
index 7ce1c27c5..ab9a39610 100755
--- a/src/views/treetable/TreeTableResponsiveDemo.vue
+++ b/src/views/treetable/TreeTableResponsiveDemo.vue
@@ -42,7 +42,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <TreeTable :value="nodes" class="p-treetable-responsive">
             <template #header>
                 Responsive
@@ -100,7 +100,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <TreeTable :value="nodes" class="p-treetable-responsive">
             <template #header>
                 Responsive
diff --git a/src/views/treetable/TreeTableTemplatingDemo.vue b/src/views/treetable/TreeTableTemplatingDemo.vue
index 174050b67..1ffd6f55d 100755
--- a/src/views/treetable/TreeTableTemplatingDemo.vue
+++ b/src/views/treetable/TreeTableTemplatingDemo.vue
@@ -51,7 +51,7 @@ export default {
                     tabName: 'Source',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <TreeTable :value="nodes">
             <template #header>
                 FileSystem
@@ -101,7 +101,7 @@ export default {
                     tabName: 'Composition API',
                     content: `
 <template>
-    <div class="card">
+    <div>
         <TreeTable :value="nodes">
             <template #header>
                 FileSystem
diff --git a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
index 05ce0463f..b18dee67f 100755
--- a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
+++ b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
@@ -82,8 +82,9 @@ export default {
 			sources: {
 				'options-api': {
 					tabName: 'Source',
-					content: `<template>
-    <div class="card">
+					content: `
+<template>
+    <div>
         <div class="p-field-checkbox p-m-0">
             <TriStateCheckbox v-model="value" />
             <label>{{value == null ? 'null' : value}}</label>
@@ -104,8 +105,9 @@ export default {
 				},
 				'composition-api': {
 					tabName: 'Composition API',
-					content: `<template>
-    <div class="card">
+					content: `
+<template>
+    <div>
         <div class="p-field-checkbox p-m-0">
             <TriStateCheckbox v-model="value" />
             <label>{{value == null ? 'null' : value}}</label>