Add cards

src/AppMenu.vue

@@ -14,6 +14,7 @@
             <div class="menu-items">
                 <router-link to="/icons">Icons</router-link>
                 <router-link to="/flexgrid">Grid System</router-link>
+                <router-link to="/formlayout">FormLayout</router-link>
                 <router-link to="/elevation">Elevation</router-link>
                 <router-link to="/spacing">Spacing</router-link>
             </div>
@@ -32,7 +33,6 @@
                 <router-link to="/inputnumber">InputNumber</router-link>
                 <router-link to="/inputswitch">InputSwitch</router-link>
                 <router-link to="/inputtext">InputText</router-link>
-                <router-link to="/formlayout">FormLayout</router-link>
                 <router-link to="/listbox">Listbox</router-link>
                 <router-link to="/multiselect">MultiSelect</router-link>
                 <router-link to="/password">Password</router-link>

src/views/accordion/AccordionDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Default</h5>
                 <Accordion>
                     <AccordionTab header="Godfather I">
@@ -26,7 +27,9 @@
                         A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
                     </AccordionTab>
                 </Accordion>
+            </div>
 
+            <div class="card">
                 <h5>Multiple</h5>
                 <Accordion :multiple="true">
                     <AccordionTab header="Godfather I">
@@ -47,7 +50,9 @@
                     <AccordionTab header="Godfather IV" :disabled="true">
                     </AccordionTab>
                 </Accordion>
+            </div>
 
+            <div class="card">
                 <h5>Programmatic</h5>
                 <div style="padding: .5em 0 1em 0">
                     <Button :icon="active1 ? 'pi pi-minus' : 'pi pi-plus'" label="Toggle 1st" @click="active1 = !active1" class="p-button-secondary" />
@@ -72,7 +77,9 @@
                         A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
                     </AccordionTab>
                 </Accordion>
+            </div>
 
+            <div class="card">
                 <h5>Custom Headers</h5>
                 <Accordion class="accordion-custom">
                     <AccordionTab>
@@ -105,6 +112,7 @@
                     </AccordionTab>
                 </Accordion>
             </div>
+        </div>
 
         <AccordionDoc/>
     </div>

src/views/autocomplete/AutoCompleteDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Basic</h5>
                 <AutoComplete v-model="selectedCountry" :suggestions="filteredCountriesBasic" @complete="searchCountryBasic($event)" field="name" />
                 <span style="marginLeft: .5em">Country: {{selectedCountry || 'none'}}</span>
@@ -31,6 +32,7 @@
                     <li v-for="(c,i) of selectedCountries" :key="i">{{c}}</li>
                 </ul>
             </div>
+        </div>
 
         <AutoCompleteDoc />
     </div>

src/views/badge/BadgeDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Numbers</h5>
                 <div class="badges">
                     <span class="p-badge">2</span>
@@ -57,6 +58,7 @@
                     <span class="p-badge p-badge-xl p-badge-warning">6</span>
                 </div>
             </div>
+        </div>
 
         <BadgeDoc />
     </div>

src/views/blockui/BlockUIDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Document</h5>
                 <BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>
 
@@ -26,6 +27,7 @@
                     </Panel>
                 </BlockUI>
             </div>
+        </div>
 
         <BlockUIDoc />
     </div>

src/views/breadcrumb/BreadcrumbDemo.vue

@@ -8,8 +8,10 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <Breadcrumb :home="home" :model="items" />
             </div>
+        </div>
 
         <BreadcrumbDoc />
     </div>

src/views/button/ButtonDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Basic</h5>
                 <Button label="Submit" />
                 <Button label="Submit" disabled="disabled" />
@@ -72,6 +73,7 @@
                     <Button label="Large" icon="pi pi-check" class="p-button-lg" />
                 </div>
             </div>
+        </div>
 
         <ButtonDoc/>
     </div>

src/views/calendar/CalendarDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Popup</h5>
                 <div class=" p-fluid p-grid p-formgrid">
                     <div class="p-field p-col-12 p-md-4">
@@ -80,6 +81,7 @@
                 <h5>Inline</h5>
                 <Calendar v-model="date14" :inline="true" :showWeek="true" />      
             </div>
+        </div>
 
         <CalendarDoc />
     </div>

src/views/carousel/CarouselDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions">
                     <template #header>
                         <h5>Basic</h5>
@@ -32,7 +33,9 @@
                         </div>
                     </template>
                 </Carousel>
+            </div>
 
+            <div class="card">
                 <Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000">
                     <template #header>
                         <h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>
@@ -57,7 +60,9 @@
                         </div>
                     </template>
                 </Carousel>
+            </div>
 
+            <div class="card">
                 <Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="325px"
                             style="max-width: 400px; margin-top: 2em">
                     <template #header>
@@ -83,6 +88,7 @@
                         </div>
                     </template>
                 </Carousel>
+            </div>
 		</div>
 
 		<CarouselDoc/>
@@ -140,7 +146,7 @@ export default {
 
 .car-item {
     .car-content {
-        border: 1px solid var(--layer-2);
+        border: 1px solid var(--surface-d);
         border-radius: 3px;
         margin: .3rem;
         text-align: center;

src/views/chart/BarChartDemo.vue

@@ -8,18 +8,26 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Vertical</h5>
                 <Chart type="bar" :data="basicData" :options="basicOptions" />
+            </div>
 
+            <div class="card">
                 <h5>Horizontal</h5>
                 <Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
+            </div>
 
+            <div class="card">
                 <h5>Multi Axis</h5>
                 <Chart type="bar" :data="multiAxisData" :options="multiAxisOptions "/>
+            </div>
 
+            <div class="card">
                 <h5>Stacked</h5>
                 <Chart type="bar" :data="stackedData" :options="stackedOptions" />
             </div>
+        </div>
 
         <BarChartDoc/>
     </div>

src/views/chart/ChartDemo.vue

@@ -1,12 +1,5 @@
 <template>
     <div>
-        <div class="content-section introduction">
-            <div class="feature-intro">
-                <h1>ChartModel</h1>
-                <p>Chart components are based on <a href="https://www.chartjs.org/">Charts.js</a>, an open source HTML5 based charting library.</p>
-            </div>
-        </div>
-
         <ChartDoc/>
     </div>
 </template>

src/views/chart/ChartDoc.vue

@@ -1,5 +1,8 @@
 <template>
 	<div class="content-section documentation">
+        <h1>ChartModel</h1>
+        <p>Chart components are based on <a href="https://www.chartjs.org/">Charts.js</a>, an open source HTML5 based charting library.</p>
+
         <h5>Getting Started</h5>
         <p>To begin with, charts.js package needs to be installed in your project.</p>
  <CodeHighlight lang="javascript">

src/views/chart/ComboChartDemo.vue

@@ -8,8 +8,10 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <Chart type="bar" :data="chartData" :options="chartOptions"/>
             </div>
+        </div>
 
         <ComboChartDoc/>
     </div>

src/views/chart/DoughnutChartDemo.vue

@@ -8,8 +8,10 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <Chart type="doughnut" :data="chartData" :options="chartOptions" />
             </div>
+        </div>
 
         <DoughnutChartDoc/>
     </div>

src/views/chart/LineChartDemo.vue

@@ -8,15 +8,21 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Basic</h5>
                 <Chart type="line" :data="basicData" :options="basicOptions" />
+            </div>
 
+            <div class="card">
                 <h5>Multi Axis</h5>
                 <Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
+            </div>
 
+            <div class="card">
                 <h5>Line Styles</h5>
                 <Chart type="line" :data="lineStylesData" :options="basicOptions" />
             </div>
+        </div>
 
         <LineChartDoc/>
     </div>

src/views/chart/PieChartDemo.vue

@@ -8,8 +8,10 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <Chart type="pie" :data="chartData" :options="chartOptions" />
             </div>
+        </div>
 
         <PieChartDoc/>
     </div>

src/views/chart/PolarAreaChartDemo.vue

@@ -8,8 +8,10 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <Chart type="polarArea" :data="chartData" :options="chartOptions" />
             </div>
+        </div>
 
         <PolarAreaChartDoc/>
     </div>

src/views/chart/RadarChartDemo.vue

@@ -8,8 +8,10 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <Chart type="radar" :data="chartData" :options="chartOptions" />
             </div>
+        </div>
 
         <RadarChartDoc/>
     </div>

src/views/checkbox/CheckboxDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Basic</h5>
                 <div class="p-field-checkbox">
                     <Checkbox id="binary" v-model="checked" :binary="true" />
@@ -40,6 +41,7 @@
                 </div>
                 <p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>       
             </div>
+        </div>
 
         <CheckboxDoc/>
     </div>

src/views/chips/ChipsDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation p-fluid">
+            <div class="card">
                 <h5>Basic</h5>
                 <Chips v-model="value1" />
 
@@ -24,6 +25,7 @@
                     </template>
                 </Chips>
             </div>
+        </div>
 
         <ChipsDoc />
     </div>

src/views/colorpicker/ColorPickerDemo.vue

@@ -8,12 +8,14 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Inline</h5>
                 <ColorPicker v-model="color1" :inline="true" />
 
                 <h5>Overlay</h5>
                 <ColorPicker v-model="color2" />
             </div>
+        </div>
 
         <ColorPickerDoc />
     </div>

src/views/contextmenu/ContextMenuDemo.vue

@@ -8,9 +8,11 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true">
                 <ContextMenu ref="menu" :model="items" />
             </div>
+        </div>
 
         <ContextMenuDoc />
     </div>

src/views/datatable/DataTableBasicDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars">
                     <Column field="vin" header="Vin"></Column>
                     <Column field="year" header="Year"></Column>
@@ -15,6 +16,7 @@
                     <Column field="color" header="Color"></Column>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableColGroupDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="sales">
                     <ColumnGroup type="header">
                         <Row>
@@ -55,6 +56,7 @@
                     </ColumnGroup>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableColResizeDemo.vue

@@ -9,6 +9,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <h5>Fit Mode</h5>
                 <DataTable :value="cars" :resizableColumns="true" columnResizeMode="fit">
                     <Column field="vin" header="Vin"></Column>
@@ -16,6 +17,7 @@
                     <Column field="brand" header="Brand"></Column>
                     <Column field="color" header="Color"></Column>
                 </DataTable>
+            </div>
 
             <h5>Expand Mode</h5>
 			<DataTable :value="cars" :resizableColumns="true" columnResizeMode="expand">

src/views/datatable/DataTableColToggleDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars">
                     <template #header>
                         <div style="text-align:left">
@@ -19,6 +20,7 @@
                     <Column v-for="(col, index) of selectedColumns" :field="col.field" :header="col.header" :key="col.field + '_' + index"></Column>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableContextMenuDemo.vue

@@ -8,12 +8,14 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars" contextMenu :contextMenuSelection.sync="selectedCar" @row-contextmenu="onRowContextMenu">
                     <Column field="vin" header="Vin"></Column>
                     <Column field="year" header="Year"></Column>
                     <Column field="brand" header="Brand"></Column>
                     <Column field="color" header="Color"></Column>
                 </DataTable>
+            </div>
 
             <ContextMenu :model="menuModel" ref="cm" />
 		</div>

src/views/datatable/DataTableCrudDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars" selectionMode="single" :selection.sync="selectedCar" @row-select="onRowSelect" dataKey="vin"
                     :paginator="true" :rows="15">
                     <template #header>
@@ -23,6 +24,7 @@
                         </div>
                     </template>
                 </DataTable>
+            </div>
 
             <Dialog :visible.sync="dialogVisible" :style="{width: '400px'}" header="Car Details" :modal="true">
                 <div class="p-cardialog-content">

src/views/datatable/DataTableDoc.vue

@@ -2426,8 +2426,6 @@ export default {
 
 <CodeHighlight>
 <template v-pre>
-&lt;div class="p-card"&gt;
-    &lt;div class="p-card-body" style="padding:0"&gt;
 &lt;DataTable :value="customers" :paginator="true" class="p-datatable-responsive p-datatable-customers" :rows="10"
     dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters" :loading="loading"
     paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
@@ -2517,8 +2515,6 @@ export default {
         &lt;/template&gt;
     &lt;/Column&gt;
 &lt;/DataTable&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
 </template>
 </CodeHighlight>
 

src/views/datatable/DataTableDynamicColumnsDemo.vue

@@ -8,10 +8,12 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars">
                     <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableEditDemo.vue

@@ -10,6 +10,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <h5>Basic Cell Editing</h5>
                 <p>Simple editors with v-model.</p>
                 <DataTable :value="cars1" editMode="cell">
@@ -41,7 +42,9 @@
                         </template>
                     </Column>
                 </DataTable>
+            </div>
 
+            <div class="card">
                 <h5>Advanced Cell Editing</h5>
                 <p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
                 <DataTable :value="cars2" editMode="cell" @cell-edit-complete="onCellEditComplete">
@@ -51,7 +54,9 @@
                         </template>
                     </Column>
                 </DataTable>
+            </div>
 
+            <div class="card">
                 <h5>Row Editing</h5>
                 <DataTable :value="cars3" editMode="row" dataKey="vin" :editingRows.sync="editingRows"
                     @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel">
@@ -74,6 +79,7 @@
                     <Column :rowEditor="true" headerStyle="width:6em" bodyStyle="text-align:center"></Column>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableExportDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars" ref="dt">
                     <template #header>
                         <div style="text-align: left">
@@ -20,6 +21,7 @@
                     <Column field="color" header="Color"></Column>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableFilterDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars" :filters="filters" :paginator="true" :rows="10">
                     <template #header>
                         <div style="text-align: right">
@@ -47,6 +48,7 @@
                     </template>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableFlexScrollDemo.vue

@@ -1,5 +1,6 @@
 <template>
-	<div class="content-section implementation" style="height: calc(100vh - 143px)">
+	<div class="content-section implementation">
+        <div class="card" style="height: calc(100vh - 143px)">
             <DataTable :value="cars" :scrollable="true" scrollHeight="flex">
                 <Column field="vin" header="Vin"></Column>
                 <Column field="year" header="Year"></Column>
@@ -7,6 +8,7 @@
                 <Column field="color" header="Color"></Column>
             </DataTable>
         </div>
+	</div>
 </template>
 
 <script>

src/views/datatable/DataTableGridLinesDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars" class="p-datatable-gridlines">
                     <template #header>
                         Header
@@ -21,6 +22,7 @@
                     </template>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableLazyDemo.vue

@@ -11,6 +11,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars" :lazy="true" :paginator="true" :rows="10"
                     :totalRecords="totalRecords" :loading="loading" @page="onPage($event)">
                     <Column field="vin" header="Vin"></Column>
@@ -19,6 +20,7 @@
                     <Column field="color" header="Color"></Column>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTablePaginatorDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars" :paginator="true" :rows="10">
                     <Column field="vin" header="Vin"></Column>
                     <Column field="year" header="Year"></Column>
@@ -21,6 +22,7 @@
                     </template>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableReorderDemo.vue

@@ -8,11 +8,13 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder">
                     <Column :rowReorder="true" headerStyle="width: 3em" :reorderableColumn="false" />
                     <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableResponsiveDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars" class="p-datatable-responsive-demo" :paginator="true" :rows="10" paginatorPosition="both">
                     <template #header>
                         Responsive
@@ -38,6 +39,7 @@
                     </Column>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableRowExpandDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars" :expandedRows.sync="expandedRows" dataKey="vin"
                     @row-expand="onRowExpand" @row-collapse="onRowCollapse">
                     <template #header>
@@ -37,6 +38,7 @@
                     </template>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableRowGroupDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <h5>Subheader Grouping</h5>
                 <DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
                     sortMode="single" sortField="brand" :sortOrder="1">
@@ -24,7 +25,9 @@
                         <td>{{calculateGroupTotal(slotProps.data.brand)}}</td>
                     </template>
                 </DataTable>
+            </div>
 
+            <div class="card">
                 <h5>Expandable Row Groups</h5>
                 <DataTable :value="cars" rowGroupMode="subheader" groupRowsBy="brand"
                     sortMode="single" sortField="brand" :sortOrder="1"
@@ -43,7 +46,9 @@
                         <td>{{calculateGroupTotal(slotProps.data.brand)}}</td>
                     </template>
                 </DataTable>
+            </div>
 
+            <div class="card">
                 <h5>RowSpan Grouping</h5>
                 <DataTable :value="cars" rowGroupMode="rowspan" groupRowsBy="brand"
                     sortMode="single" sortField="brand" :sortOrder="1">
@@ -59,6 +64,7 @@
                     <Column field="price" header="Price"></Column>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableScrollDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <h5>Vertical</h5>
                 <DataTable :value="cars" :scrollable="true" scrollHeight="200px" :loading="loading">
                     <Column field="vin" header="Vin"></Column>
@@ -15,12 +16,16 @@
                     <Column field="brand" header="Brand"></Column>
                     <Column field="color" header="Color"></Column>
                 </DataTable>
+            </div>
 
+            <div class="card">
                 <h5>Flexible Scroll</h5>
                 <p>Flex scroll feature makes the scrollable viewport section dynamic so that it can grow or shrink relative to the parent size of the table.
                     Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.</p>
 
                 <Button label="Show" icon="pi pi-external-link" @click="openDialog" />
+            </div>
+
             <Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
                 <DataTable :value="cars" :scrollable="true" scrollHeight="flex">
                     <Column field="vin" header="Vin"></Column>
@@ -34,6 +39,7 @@
                 </template>
             </Dialog>
 
+            <div class="card">
                 <h5>Virtual Scroll</h5>
                 <DataTable :value="lazyCars" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" :loading="loading"
                     :virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords">
@@ -58,7 +64,9 @@
                         </template>
                     </Column>
                 </DataTable>
+            </div>
 
+            <div class="card">
                 <h5>Horizontal and Vertical</h5>
                 <DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px" :loading="loading">
                     <Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_1"></Column>
@@ -70,7 +78,9 @@
                     <Column field="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_2"></Column>
                     <Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_2"></Column>
                 </DataTable>
+            </div>
 
+            <div class="card">
                 <h5>Frozen Rows</h5>
                 <DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px" :loading="loading">
                     <Column field="vin" header="Vin"></Column>
@@ -78,7 +88,9 @@
                     <Column field="brand" header="Brand"></Column>
                     <Column field="color" header="Color"></Column>
                 </DataTable>
+            </div>
 
+            <div class="card">
                 <h5>Frozen Columns</h5>
                 <DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading">
                     <Column field="vin" header="Vin" headerStyle="width: 300px" columnKey="vin_1" :frozen="true">
@@ -97,6 +109,7 @@
                     <Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_3"></Column>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableSizeDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars" class="p-datatable-sm" style="margin-bottom: 2rem">
                     <template #header>
                         Small Table
@@ -17,7 +18,9 @@
                     <Column field="brand" header="Brand"></Column>
                     <Column field="color" header="Color"></Column>
                 </DataTable>
+            </div>
 
+            <div class="card">
                 <DataTable :value="cars" style="margin-bottom: 2rem">
                     <template #header>
                         Normal Table
@@ -27,7 +30,9 @@
                     <Column field="brand" header="Brand"></Column>
                     <Column field="color" header="Color"></Column>
                 </DataTable>
+            </div>
 
+            <div class="card">
                 <DataTable :value="cars" class="p-datatable-lg">
                     <template #header>
                         Large Table
@@ -38,6 +43,7 @@
                     <Column field="color" header="Color"></Column>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableSortDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <h5>Single Column</h5>
                 <DataTable :value="cars">
                     <Column field="vin" header="Vin" :sortable="true"></Column>
@@ -15,7 +16,9 @@
                     <Column field="brand" header="Brand" :sortable="true"></Column>
                     <Column field="color" header="Color" :sortable="true"></Column>
                 </DataTable>
+            </div>
 
+            <div class="card">
                 <h5>Multiple Columns</h5>
                 <DataTable :value="cars" sortMode="multiple">
                     <Column field="vin" header="Vin" :sortable="true"></Column>
@@ -23,7 +26,9 @@
                     <Column field="brand" header="Brand" :sortable="true"></Column>
                     <Column field="color" header="Color" :sortable="true"></Column>
                 </DataTable>
+            </div>
 
+            <div class="card">
                 <h5>Presort</h5>
                 <DataTable :value="cars" sortField="year" :sortOrder="-1">
                     <Column field="vin" header="Vin" :sortable="true"></Column>
@@ -31,7 +36,9 @@
                     <Column field="brand" header="Brand" :sortable="true"></Column>
                     <Column field="color" header="Color" :sortable="true"></Column>
                 </DataTable>
+            </div>
 
+            <div class="card">
                 <h5>Removable Sort</h5>
                 <DataTable :value="cars" removableSort>
                     <Column field="vin" header="Vin" :sortable="true"></Column>
@@ -40,6 +47,7 @@
                     <Column field="color" header="Color" :sortable="true"></Column>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableStateDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <h5>Session Storage</h5>
                 <DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
                     :selection.sync="selectedCar1" selectionMode="single" dataKey="vin"
@@ -49,7 +50,9 @@
                         No records found.
                     </template>
                 </DataTable>
+            </div>
 
+            <div class="card">
                 <h5>Local Storage</h5>
                 <DataTable :value="cars" :paginator="true" :rows="10" :filters.sync="filters"
                     :selection.sync="selectedCar2" selectionMode="single" dataKey="vin"
@@ -92,6 +95,7 @@
                     </template>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableStripedDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars" class="p-datatable-striped">
                     <template #header>
                         Header
@@ -21,6 +22,7 @@
                     </template>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableStyleDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars" :rowClass="rowClass">
                     <Column field="vin" header="Vin"></Column>
                     <Column field="year" header="Year" bodyStyle="padding: 0">
@@ -21,6 +22,7 @@
                     <Column field="color" header="Color"></Column>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/datatable/DataTableTemplatingDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <DataTable :value="cars">
                     <template #header>
                         <div class="table-header">
@@ -37,6 +38,7 @@
                     </template>
                 </DataTable>
             </div>
+		</div>
 
         <div class="content-section documentation">
             <TabView>

src/views/dataview/DataViewDemo.vue

@@ -8,7 +8,9 @@
 		</div>
 
 		<div class="content-section implementation">
-			<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
+            <div class="card">
+                <DataView :value="cars" :layout="layout" paginatorPosition="bottom" :paginator="true" :rows="20"
+                    :sortOrder="sortOrder" :sortField="sortField">
                     <template #header>
                         <div class="p-grid p-nogutter">
                             <div class="p-col-6" style="text-align: left">
@@ -45,6 +47,7 @@
                         </div>
                     </template>
                 </DataView>
+            </div>
 		</div>
 
 		<DataViewDoc />

src/views/dataview/DataViewDoc.vue

@@ -411,7 +411,7 @@ export default {
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
+&lt;DataView :value="cars" :layout="layout" paginatorPosition="bottom" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField"&gt;
     &lt;template #header&gt;
         &lt;div class="p-grid p-nogutter"&gt;
             &lt;div class="p-col-6" style="text-align: left"&gt;

src/views/deferredcontent/DeferredContentDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <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>
@@ -28,6 +29,7 @@
                     </DataTable>
                 </DeferredContent>
             </div>
+        </div>
 
         <DeferredContentDoc />
     </div>

src/views/dialog/DialogDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Basic</h5>
                 <Button label="Show" icon="pi pi-external-link" @click="openBasic" />
                 <Dialog header="Godfather I" :visible.sync="displayBasic" :style="{width: '50vw'}">
@@ -96,6 +97,7 @@
                     </template>
                 </Dialog>
             </div>
+        </div>
 
         <DialogDoc/>
     </div>

src/views/dropdown/DropdownDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Basic</h5>
                 <Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
 
@@ -33,6 +34,7 @@
                     </template>
                 </Dropdown>
             </div>
+        </div>
 
         <DropdownDoc/>
     </div>

src/views/editor/EditorDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Default</h5>
                 <Editor v-model="value1" editorStyle="height: 320px"/>
 
@@ -22,6 +23,7 @@
                     </template>
                 </Editor>
             </div>
+        </div>
 
         <EditorDoc />
     </div>

src/views/fieldset/FieldsetDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Regular</h5>
                 <Fieldset legend="Godfather I">
                     <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
@@ -24,6 +25,7 @@
                     kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
                 </Fieldset>
             </div>
+        </div>
 
         <FieldsetDoc/>
     </div>

src/views/fileupload/FileUploadDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Advanced</h5>
                 <FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000">
                     <template #empty>
@@ -21,6 +22,7 @@
                 <h5>Basic with Auto</h5>
                 <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" :auto="true" chooseLabel="Browse" />
             </div>
+        </div>
 
         <FileUploadDoc/>
     </div>

src/views/formlayout/FormLayoutDemo.vue

@@ -9,6 +9,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Vertical</h5>
                 <div class="p-fluid">
                     <div class="p-field">
@@ -20,7 +21,9 @@
                         <InputText id="lastname1" type="text" />
                     </div>
                 </div>
+            </div>
 
+            <div class="card">
                 <h5>Vertical and Grid</h5>
                 <div class="p-fluid p-formgrid p-grid">
                     <div class="p-field p-col">
@@ -32,7 +35,9 @@
                         <InputText id="lastname2" type="text" />
                     </div>
                 </div>
+            </div>
 
+            <div class="card">
                 <h5>Horizontal and Fixed Width</h5>
                 <div class="p-field p-grid">
                     <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
@@ -46,7 +51,9 @@
                         <InputText id="lastname3" type="text" />
                     </div>
                 </div>
+            </div>
 
+            <div class="card">
                 <h5>Horizontal and Fluid</h5>
                 <div class="p-fluid">
                     <div class="p-field p-grid">
@@ -62,7 +69,9 @@
                         </div>
                     </div>
                 </div>
+            </div>
 
+            <div class="card">
                 <h5>Inline</h5>
                 <div class="p-formgroup-inline">
                     <div class="p-field">
@@ -75,7 +84,9 @@
                     </div>
                     <Button type="button" label="Submit" />
                 </div>
+            </div>
 
+            <div class="card">
                 <h5>Vertical Checkbox</h5>
                 <div class="p-field-checkbox">
                     <Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
@@ -97,7 +108,9 @@
                         <label for="city4">Los Angeles</label>
                     </div>
                 </div>
+            </div>
 
+            <div class="card">
                 <h5>Vertical RadioButton</h5>
                 <div class="p-field-radiobutton">
                     <RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
@@ -119,14 +132,18 @@
                         <label for="city8">Los Angeles</label>
                     </div>
                 </div>
+            </div>
 
+            <div class="card">
                 <h5>Help Text</h5>
                 <div class="p-field p-fluid">
                     <label for="username">Username</label>
                     <InputText id="username" type="username" aria-describedby="username-help" />
                     <small id="username-help">Enter your username to reset your password.</small>
                 </div>
+            </div>
 
+            <div class="card">
                 <h5>Advanced</h5>
                 <div class="p-fluid p-formgrid p-grid">
                     <div class="p-field p-col-12 p-md-6">
@@ -155,6 +172,7 @@
                     </div>
                 </div>
             </div>
+        </div>
 
         <FormLayoutDoc />
     </div>

src/views/fullcalendar/FullCalendarDemo.vue

@@ -8,8 +8,10 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <FullCalendar :events="events" :options="options" />
             </div>
+        </div>
 
         <FullCalendarDoc/>
     </div>

src/views/galleria/GalleriaAdvancedDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <Galleria ref="galleria" :value="images" :activeIndex.sync="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
                     :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
                     :circular="true" :autoPlay="true" :transitionInterval="3000">
@@ -32,6 +33,7 @@
                     </template>
                 </Galleria>
             </div>
+        </div>
 
         <div class="content-section documentation">
             <TabView>

src/views/galleria/GalleriaAutoPlayDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
                     :circular="true" :autoPlay="true" :transitionInterval="2000">
                     <template #item="slotProps">
@@ -18,6 +19,7 @@
                     </template>
                 </Galleria>
             </div>
+        </div>
 
         <div class="content-section documentation">
             <TabView>

src/views/galleria/GalleriaCaptionDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
                     <template #item="{item}">
                         <img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" />
@@ -23,6 +24,7 @@
                     </template>
                 </Galleria>
             </div>
+        </div>
 
         <div class="content-section documentation">
             <TabView>

src/views/galleria/GalleriaDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
                     <template #item="slotProps">
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
@@ -17,6 +18,7 @@
                     </template>
                 </Galleria>
             </div>
+        </div>
 
         <GalleriaDoc />
     </div>

src/views/galleria/GalleriaFullScreenDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>With Thumbnails</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%"
                     :circular="true" :fullScreen="true" :showItemNavigators="true" :visible.sync="displayBasic">
@@ -20,7 +21,9 @@
                 </Galleria>
 
                 <Button label="Show" icon="pi pi-external-link" @click="displayBasic = true" />
+            </div>
 
+            <div class="card">
                 <h5>Without Thumbnails</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
                     :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayBasic2">
@@ -33,7 +36,9 @@
                 </Galleria>
 
                 <Button label="Show" icon="pi pi-external-link" @click="displayBasic2 = true" />
+            </div>
 
+            <div class="card">
                 <h5>Custom Content</h5>
                 <Galleria :value="images" :activeIndex.sync="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px"
                     :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false" :visible.sync="displayCustom">
@@ -51,6 +56,7 @@
                     </div>
                 </div>
             </div>
+        </div>
 
         <div class="content-section documentation">
             <TabView>

src/views/galleria/GalleriaIndicatorDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Indicators with Click Event</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
                     :showThumbnails="false" :showIndicators="true">
@@ -15,7 +16,9 @@
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                     </template>
                 </Galleria>
+            </div>
 
+            <div class="card">
                 <h5>Indicators with Hover Event</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
                     :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
@@ -23,7 +26,9 @@
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                     </template>
                 </Galleria>
+            </div>
 
+            <div class="card">
                 <h5>Inside Content</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
                     :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true">
@@ -31,7 +36,9 @@
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                     </template>
                 </Galleria>
+            </div>
 
+            <div class="card">
                 <h5>Positioned at Top</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
                     :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="top">
@@ -39,7 +46,9 @@
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                     </template>
                 </Galleria>
+            </div>
 
+            <div class="card">
                 <h5>Positioned at Left</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
                     :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
@@ -47,7 +56,9 @@
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                     </template>
                 </Galleria>
+            </div>
 
+            <div class="card">
                 <h5>Positioned at Right</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px"
                     :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="right">
@@ -55,7 +66,9 @@
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                     </template>
                 </Galleria>
+            </div>
 
+            <div class="card">
                 <h5>Indicator Template</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px;" class="custom-indicator-galleria"
                     :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
@@ -69,6 +82,7 @@
                     </template>
                 </Galleria>
             </div>
+        </div>
 
         <div class="content-section documentation">
             <TabView>

src/views/galleria/GalleriaNavigatorDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Item Navigators and Thumbnails</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
                     :showItemNavigators="true">
@@ -18,7 +19,9 @@
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </template>
                 </Galleria>
+            </div>
 
+            <div class="card">
                 <h5>Item Navigators without Thumbnails</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px"
                     :showItemNavigators="true" :showThumbnails="false">
@@ -29,7 +32,9 @@
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </template>
                 </Galleria>
+            </div>
 
+            <div class="card">
                 <h5>Item Navigators on Hover</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;"
                     :showItemNavigators="true" :showItemNavigatorsOnHover="true">
@@ -40,7 +45,9 @@
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                     </template>
                 </Galleria>
+            </div>
 
+            <div class="card">
                 <h5>Item Navigators and Indicators</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" style="max-width: 640px;"
                     :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
@@ -52,6 +59,7 @@
                     </template>
                 </Galleria>
             </div>
+        </div>
 
         <div class="content-section documentation">
             <TabView>

src/views/galleria/GalleriaProgrammaticDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <div style="padding: .5rem 0">
                     <Button icon="pi pi-minus" @click="prev" class="p-button-secondary" />
                     <Button icon="pi pi-plus" @click="next" class="p-button-secondary" style="margin-left: .5rem" />
@@ -22,6 +23,7 @@
                     </template>
                 </Galleria>
             </div>
+        </div>
 
         <div class="content-section documentation">
             <TabView>

src/views/galleria/GalleriaResponsiveDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px">
                     <template #item="slotProps">
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
@@ -17,6 +18,7 @@
                     </template>
                 </Galleria>
             </div>
+        </div>
 
         <div class="content-section documentation">
             <TabView>

src/views/galleria/GalleriaThumbnailDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Positioned at Bottom</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" style="max-width: 640px">
                     <template #item="slotProps">
@@ -17,7 +18,9 @@
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                     </template>
                 </Galleria>
+            </div>
 
+            <div class="card">
                 <h5>Positioned at Left</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" style="max-width: 640px">
                     <template #item="slotProps">
@@ -29,7 +32,9 @@
                         </div>
                     </template>
                 </Galleria>
+            </div>
 
+            <div class="card">
                 <h5>Positioned at Right</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" style="max-width: 640px">
                     <template #item="slotProps">
@@ -41,7 +46,9 @@
                         </div>
                     </template>
                 </Galleria>
+            </div>
 
+            <div class="card">
                 <h5>Positioned at Top</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" style="max-width: 640px">
                     <template #item="slotProps">
@@ -52,6 +59,7 @@
                     </template>
                 </Galleria>
             </div>
+        </div>
 
         <div class="content-section documentation">
             <TabView>

src/views/inplace/InplaceDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Input</h5>
                 <Inplace :closable="true">
                     <template #display>
@@ -44,6 +45,7 @@
                     </template>
                 </Inplace>
             </div>
+        </div>
 
         <InplaceDoc />
     </div>

src/views/inputgroup/InputGroupDemo.vue

@@ -8,6 +8,8 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
+
                 <h5>Addons</h5>
                 <div class="p-grid p-fluid">
                     <div class="p-col-12 p-md-4">
@@ -110,6 +112,7 @@
                     </div>
                 </div>
             </div>
+        </div>
 
         <InputGroupDoc/>
     </div>

src/views/inputmask/InputMaskDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <div class="p-fluid p-formgrid p-grid">
                     <div class="p-field p-col-12 p-md-4">
                         <label for="basic">Basic</label>
@@ -40,6 +41,7 @@
                     </div>
                 </div>
             </div>
+        </div>
 
         <InputMaskDoc />
     </div>

src/views/inputnumber/InputNumberDemo.vue

@@ -8,6 +8,8 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
+
                 <h5>Numerals</h5>
                 <div class="p-fluid p-grid p-formgrid">
                     <div class="p-field p-col-12 p-md-3">
@@ -107,6 +109,7 @@
                     </div>
                 </div>
             </div>
+        </div>
 
         <InputNumberDoc />
     </div>

src/views/inputtext/InputTextDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Basic</h5>
                 <InputText type="text" v-model="value1" />
                 <span :style="{marginLeft: '.5em'}">{{value1}}</span>
@@ -43,6 +44,7 @@
                     <InputText type="text" class="p-inputtext-lg"  placeholder="Large" />
                 </div>
             </div>
+        </div>
 
         <InputTextDoc />
     </div>

src/views/listbox/ListboxDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Single</h5>
                 <Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15em" />
 
@@ -21,6 +22,7 @@
                     </template>
                 </Listbox>
             </div>
+        </div>
 
         <ListboxDoc/>
     </div>

src/views/megamenu/MegaMenuDemo.vue

@@ -8,12 +8,14 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Horizontal</h5>
                 <MegaMenu :model="items" />
 
                 <h5>Vertical</h5>
                 <MegaMenu :model="items" orientation="vertical"/>
             </div>
+        </div>
 
         <MegaMenuDoc />
     </div>

src/views/menu/MenuDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Inline</h5>
                 <Menu :model="items" />
 
@@ -15,6 +16,7 @@
                 <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"/>
                 <Menu id="overlay_menu" ref="menu" :model="items" :popup="true" />
             </div>
+        </div>
 
         <MenuDoc />
     </div>

src/views/menubar/MenubarDemo.vue

@@ -8,12 +8,14 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <Menubar :model="items">
                     <template #end>
                         <InputText placeholder="Search" type="text" />
                     </template>
                 </Menubar>
             </div>
+        </div>
 
         <MenubarDoc />
     </div>

src/views/menumodel/MenuModel.vue

@@ -1,14 +1,10 @@
 <template>
     <div>
-        <div class="content-section introduction">
+        <div class="content-section documentation">
-            <div class="feature-intro">
             <h1>MenuModel</h1>
             <p>PrimeVue menu components share a common api to specify the menuitems and submenus.</p>
-            </div>
-        </div>
 
-        <div class="content-section documentation">
+            <h5>MenuItem</h5>
-            <h5">MenuItem</h5>
                 <p>Core of the API is the MenuItem class that defines various options such as the label, icon and children of an item in a menu.</p>
 <CodeHighlight lang="js">
 const items: [

src/views/message/MessageDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Severities</h5>
                 <Message severity="success">Order Submitted</Message>
                 <Message severity="info">PrimeVue Rocks</Message>
@@ -36,6 +37,7 @@
                     <InlineMessage />
                 </div>
             </div>
+        </div>
 
         <MessageDoc/>
     </div>

src/views/multiselect/MultiSelectDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Basic</h5>
                 <MultiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
 
@@ -30,6 +31,7 @@
                     </template>
                 </MultiSelect>
             </div>
+        </div>
 
         <MultiSelectDoc/>
     </div>

src/views/orderlist/OrderListDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <OrderList v-model="cars" listStyle="height:auto" dataKey="vin">
                     <template #header>
                         List of Cars
@@ -23,6 +24,7 @@
                     </template>
                 </OrderList>
             </div>
+        </div>
 
         <OrderListDoc />
     </div>

src/views/organizationchart/OrganizationChartDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Advanced</h5>
                 <OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
                     @node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
@@ -22,7 +23,9 @@
                         <span>{{slotProps.node.data.label}}</span>
                     </template>
                 </OrganizationChart>
+            </div>
 
+            <div class="card">
                 <h5>Basic</h5>
                 <OrganizationChart :value="data2">
                     <template #default="slotProps">
@@ -30,6 +33,7 @@
                     </template>
                 </OrganizationChart>
             </div>
+        </div>
 
         <OrganizationChartDoc />
     </div>

src/views/overlaypanel/OverlayPanelDemo.vue

@@ -8,12 +8,14 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <Button type="button" label="Toggle" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
 
                 <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel">
                     <img src="demo/images/nature/nature1.jpg" alt="Nature Image">
                 </OverlayPanel>
             </div>
+        </div>
 
         <OverlayPanelDoc/>
     </div>

src/views/paginator/PaginatorDemo.vue

@@ -8,6 +8,7 @@
 		</div>
 
 		<div class="content-section implementation">
+            <div class="card">
                 <h5>Basic</h5>
                 <Paginator :rows="10" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
 
@@ -26,6 +27,7 @@
                     <img :src="'demo/images/nature/' + image + '.jpg'" />
                 </div>
             </div>
+		</div>
 
         <PaginatorDoc />
 	</div>

src/views/panelmenu/PanelMenuDemo.vue

@@ -8,8 +8,10 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <PanelMenu :model="items" />
             </div>
+        </div>
 
         <PanelMenuDoc />
     </div>

src/views/password/PasswordDemo.vue

@@ -8,8 +8,10 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <Password v-model="value" />
             </div>
+        </div>
 
         <PasswordDoc/>
     </div>

src/views/picklist/PickListDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <PickList v-model="cars" listStyle="height:342px" dataKey="vin">
                     <template #sourceHeader>
                         Available
@@ -26,6 +27,7 @@
                     </template>
                 </PickList>
             </div>
+        </div>
 
         <PickListDoc />
     </div>

src/views/progressbar/ProgressBarDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Dynamic</h5>
                 <ProgressBar :value="value1" />
 
@@ -17,6 +18,7 @@
                 <h5>Indeterminate</h5>
                 <ProgressBar mode="indeterminate" style="height: .5em" />
             </div>
+        </div>
 
         <ProgressBarDoc/>
     </div>

src/views/progressspinner/ProgressSpinnerDemo.vue

@@ -8,12 +8,14 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Basic</h5>
                 <ProgressSpinner />
 
                 <h5>Custom</h5>
                 <ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
             </div>
+        </div>
 
         <ProgressSpinnerDoc />
     </div>

src/views/radiobutton/RadioButtonDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Basic</h5>
                 <div class="p-field-radiobutton">
                     <RadioButton id="city1" name="city" value="Chicago" v-model="city" />
@@ -34,6 +35,7 @@
                 </div>
                 <p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
             </div>
+        </div>
 
         <RadioButtonDoc/>
     </div>

src/views/rating/RatingDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Basic {{val1}}</h5>
                 <Rating v-model="val1" />
 
@@ -20,6 +21,7 @@
                 <h5>Disabled</h5>
                 <Rating :value="8" :disabled="true" :stars="10" />
             </div>
+        </div>
 
         <RatingDoc/>
     </div>

src/views/scrollpanel/ScrollPanelDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <div class="p-grid">
                     <div class="p-col-12 p-md-4">
                         <ScrollPanel style="width: 100%; height: 200px">
@@ -62,6 +63,7 @@
                     </div>
                 </div>
             </div>
+        </div>
 
         <ScrollPanelDoc />
     </div>

src/views/selectbutton/SelectButtonDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Single</h5>
                 <SelectButton v-model="selectedCity" :options="cities" optionLabel="name" />
                 <p>Selected City: <span style="font-weight: bold">{{selectedCity}}</span></p>
@@ -27,6 +28,7 @@
                 </SelectButton>
                 <p>Selected Car: <span style="font-weight: bold">{{selectedCar}}</span></p>
             </div>
+        </div>
 
         <SelectButtonDoc/>
     </div>

src/views/sidebar/SidebarDemo.vue

@@ -8,6 +8,14 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
+                <Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" />
+                <Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" />
+                <Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" />
+                <Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" />
+                <Button icon="pi pi-th-large" @click="visibleFull = true"  />
+            </div>
+
             <Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
                 <h1 style="fontWeight:normal">Left Sidebar</h1>
                 <Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" />
@@ -37,12 +45,6 @@
                 <Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" />
                 <Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/>
             </Sidebar>
-
-            <Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" />
-            <Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" />
-            <Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" />
-            <Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" />
-            <Button icon="pi pi-th-large" @click="visibleFull = true"  />
         </div>
 
         <SidebarDoc/>

src/views/slider/SliderDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Basic: {{value1}}</h5>
                 <Slider v-model="value1" />
 
@@ -24,6 +25,7 @@
                 <h5>Vertical: {{value5}}</h5>
                 <Slider v-model="value5" orientation="vertical" />
             </div>
+        </div>
 
         <SliderDoc/>
     </div>

src/views/splitbutton/SplitButtonDemo.vue

@@ -8,6 +8,7 @@
         </div>
 
         <div class="content-section implementation">
+            <div class="card">
                 <h5>Basic</h5>
                 <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="items"></SplitButton>
 
@@ -19,6 +20,7 @@
                 <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning"></SplitButton>
                 <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger"></SplitButton>
             </div>
+        </div>
 
         <SplitButtonDoc/>
     </div>

src/views/steps/StepsDemo.vue

@@ -68,4 +68,8 @@ export default {
 /deep/ b {
     display: block
 }
+
+/deep/ .p-card-body {
+    padding: 2rem;
+}
 </style>

src/views/support/Support.vue

@@ -8,7 +8,7 @@
         </div>
 
         <div class="content-section documentation">
-            <h5">Community Support</h5>
+            <h5>Community Support</h5>
             <p><a href="https://forum.primefaces.org/viewforum.php?f=110">Forum</a> is where the community users gather to seek support, post topics and discuss the technology. PrimeTek does not
             guarantee response at forum although it is monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PrimeVue PRO support.</p>
 

src/views/tabmenu/CalendarDemo.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="tabmenudemo-content">
-        <i class="pi pi-fw pi-calendar" />
+        <h5>Calendar Component Content</h5>
-        <h1>Calendar Component Content</h1>
     </div>
 </template>
 

src/views/tabmenu/DocumentationDemo.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="tabmenudemo-content">
-        <i class="pi pi-fw pi-file" />
+        <h5>Documentation Component Content</h5>
-        <h1>Documentation Component Content</h1>
     </div>
 </template>