Cosmetics on demos with subgroups

src/assets/styles/app/_content.scss

@@ -15,6 +15,11 @@
                     font-size: 2rem;
                     margin: 0 0 1.5rem 0;
                     font-weight: 700;
+
+                    span {
+                        font-weight: 400;
+                        color: var(--text-color-secondary);
+                    }
                 }
 
                 p {

src/views/datatable/DataTableBasicDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Basic</h1>
+				<h1>DataTable <span>Basic</span></h1>
 				<p>DataTable requires a collection to display along with column components for the representation of the data.</p>
 			</div>
 		</div>

src/views/datatable/DataTableColGroupDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Column Group</h1>
+				<h1>DataTable <span>ColumnGroup</span></h1>
 				<p>Columns can be grouped at header and footer using headerColumnGroup and footerColumnGroup components.</p>
 			</div>
 		</div>

src/views/datatable/DataTableColResizeDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Column Resize</h1>
+				<h1>DataTable <span>Column Resize</span></h1>
 				<p>Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized.
                     In "expand" mode, table width also changes along with the column width.</p>
 			</div>

src/views/datatable/DataTableColToggleDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Column Toggle</h1>
+				<h1>DataTable <span>Column Toggle</span></h1>
 				<p>MultiSelect component can be used to implement column toggle functionality.</p>
 			</div>
 		</div>

src/views/datatable/DataTableContextMenuDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - ContextMenu</h1>
+				<h1>DataTable <span>ContextMenu</span></h1>
 				<p>CDataTable has exclusive integration with ContextMenu.</p>
 			</div>
 		</div>

src/views/datatable/DataTableCrudDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Crud</h1>
+				<h1>DataTable <span>Crud</span></h1>
 				<p>This samples demonstrates a CRUD implementation using various PrimeReact components.</p>
 			</div>
 		</div>

src/views/datatable/DataTableDynamicColumnsDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Dynamic Columns</h1>
+				<h1>DataTable <span>Dynamic Columns</span></h1>
 				<p>Columns can be defined dynamically using the v-for directive.</p>
 			</div>
 		</div>

src/views/datatable/DataTableEditDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - InCell Edit</h1>
+				<h1>DataTable <span>InCell Edit</span></h1>
 				<p>In cell editing provides a rapid and user friendly way to manipulate the data. The datatable provides a flexible API
                     so that the editing behavior is implemented by the page author whether it utilizes v-model or vuex.
                 </p>

src/views/datatable/DataTablePaginatorDemo.vue

@@ -2,7 +2,7 @@
 	<div>
         <div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Paginator</h1>
+				<h1>DataTable <span>Paginator</span></h1>
 				<p>Pagination is enabled by setting paginator property to true and defining the rows attribute as the number of rows per page.</p>
 			</div>
 		</div>

src/views/datatable/DataTableReorderDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Reorder</h1>
+				<h1>DataTable <span>Reorder</span></h1>
 				<p>Order of the columns and rows can be changed using drag and drop.</p>
 			</div>
 		</div>

src/views/datatable/DataTableResponsiveDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Responsive</h1>
+				<h1>DataTable <span>Responsive</span></h1>
 				<p>DataTable display can be optimized according for different screen sizes, this example demonstrates a demo where columns are stacked on a small screens.</p>
 			</div>
 		</div>

src/views/datatable/DataTableRowExpandDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Row Expansion</h1>
+				<h1>DataTable <span>Row Expansion</span></h1>
 				<p>A row can be expanded to display additional content.</p>
 			</div>
 		</div>

src/views/datatable/DataTableRowGroupDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Row Grouping</h1>
+				<h1>DataTable <span>Row Grouping</span></h1>
 				<p>Rows can either be grouped by a separate grouping row or using rowspan.</p>
 			</div>
 		</div>

src/views/datatable/DataTableScrollDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Scroll</h1>
+				<h1>DataTable <span>Scroll</span></h1>
 				<p>Data scrolling is available horizontally, vertically or both. Virtual Scrolling mode is also provided to deal with large datasets by loading data on demand during scrolling.</p>
 			</div>
 		</div>

src/views/datatable/DataTableSelectionDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Selection</h1>
+				<h1>DataTable <span>Selection</span></h1>
 				<p>DataTable provides single and multiple selection modes based on row click or using radio button and checkbox elements.</p>
 			</div>
 		</div>

src/views/datatable/DataTableSizeDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Size</h1>
+				<h1>DataTable <span>Size</span></h1>
 				<p>In addition to a regular table, a smaller and a larger alternatives available.</p>
 			</div>
 		</div>

src/views/datatable/DataTableSortDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Sort</h1>
+				<h1>DataTable <span>Sort</span></h1>
 				<p>Enabling sortable property on a column is enough to make a column sortable. Multiple column sorting is enabled using sortMode property and used with metaKey.</p>
 			</div>
 		</div>

src/views/datatable/DataTableStateDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - State</h1>
+				<h1>DataTable <span>State</span></h1>
 				<p>Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using its last settings.</p>
 			</div>
 		</div>

src/views/datatable/DataTableStyleDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Style</h1>
+				<h1>DataTable <span>Style</span></h1>
 				<p>Certain rows or cells can easily be styled based on conditions.</p>
 			</div>
 		</div>

src/views/datatable/DataTableTemplatingDemo.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>DataTable - Templating</h1>
+				<h1>DataTable <span>Templating</span></h1>
 				<p>Custom content at header, body and footer sections are supported via templating.</p>
 			</div>
 		</div>

src/views/galleria/GalleriaAdvancedDemo.vue

@@ -2,7 +2,7 @@
     <div class="galleria-demo">
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>Galleria - Advanced</h1>
+                <h1>Galleria <span>Advanced</span></h1>
                 <p>Galleria can be extended further to implement complex requirements.</p>
             </div>
         </div>

src/views/galleria/GalleriaAutoPlayDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>Galleria - AutoPlay</h1>
+                <h1>Galleria <span>AutoPlay</span></h1>
                 <p>AutoPlay mode is used to implement slideshows.</p>
             </div>
         </div>

src/views/galleria/GalleriaCaptionDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>Galleria - Caption</h1>
+                <h1>Galleria <span>Caption</span></h1>
                 <p>Caption displays a description for an item.</p>
             </div>
         </div>

src/views/galleria/GalleriaFullScreenDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>Galleria - FullScreen</h1>
+                <h1>Galleria <span>FullScreen</span></h1>
                 <p>In fullscreen mode content covers the whole page over a mask..</p>
             </div>
         </div>

src/views/galleria/GalleriaIndicatorDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>Galleria - Indicator</h1>
+                <h1>Galleria <span>Indicator</span></h1>
                 <p>Indicators allow quick navigation between the items.</p>
             </div>
         </div>

src/views/galleria/GalleriaNavigatorDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>Galleria - Navigator</h1>
+                <h1>Galleria <span>Navigator</span></h1>
                 <p>Combining item navigators, thumbnails and indicators provide various UI alternatives.</p>
             </div>
         </div>

src/views/galleria/GalleriaProgrammaticDemo.vue

@@ -2,7 +2,7 @@
     <div class="galleria-demo">
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>Galleria - Programmatic</h1>
+                <h1>Galleria <span>Programmatic</span></h1>
                 <p>Galleria can be controlled programmatically using the <b>activeIndex</b> property.</p>
             </div>
         </div>

src/views/galleria/GalleriaResponsiveDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>Galleria - Responsive</h1>
+                <h1>Galleria <span>Responsive</span></h1>
                 <p>Galleria responsiveness is defined with the <b>responsiveOptions</b> property.</p>
             </div>
         </div>

src/views/galleria/GalleriaThumbnailDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>Galleria - Thumbnail</h1>
+                <h1>Galleria <span>Thumbnail</span></h1>
                 <p>Thumbnails represent a smaller version of the actual content.</p>
             </div>
         </div>

src/views/tree/TreeFilterDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>Tree - Filter</h1>
+                <h1>Tree <span>Filter</span></h1>
                 <p>Filtering updates the node based on the constraints.</p>
             </div>
         </div>

src/views/tree/TreeLazyDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>Tree - Lazy</h1>
+                <h1>Tree <span>Lazy</span></h1>
                 <p>Lazy loading is handy when dealing with huge datasets. This example imitates a lazy loading case with timeouts.</p>
             </div>
         </div>

src/views/tree/TreeSelectionDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>Tree - Selection</h1>
+                <h1>Tree <span>Selection</span></h1>
                 <p>Tree supports <b>single</b>, <b>multiple</b> and <b>checkbox</b> as selection modes.</p>
             </div>
         </div>

src/views/tree/TreeTemplatingDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>Tree - Templating</h1>
+                <h1>Tree <span>Templating</span></h1>
                 <p>Tree is used to display hierarchical data.</p>
             </div>
         </div>

src/views/treetable/TreeTableColResizeDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
 			<div class="feature-intro">
-				<h1>TreeTable - Column Resize</h1>
+				<h1>TreeTable <span>Column Resize</span></h1>
 				<p>Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized.
                     In "expand" mode, table width also changes along with the column width.</p>
 			</div>

src/views/treetable/TreeTableColToggleDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>TreeTable - Column Toggle</h1>
+                <h1>TreeTable <span>Column Toggle</span></h1>
                 <p>MultiSelect component can be used to implement column toggle functionality.</p>
             </div>
         </div>

src/views/treetable/TreeTableFilterDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>TreeTable - Filter</h1>
+                <h1>TreeTable <span>Filter</span></h1>
                 <p>Filtering is enabled by defining a filter template per column to populate the filters property of the TreTable.</p>
             </div>
         </div>

src/views/treetable/TreeTableLazyDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>TreeTable - Lazy</h1>
+                <h1>TreeTable <span>Lazy</span></h1>
                 <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging or sorting. In addition,
                     children of a node can be loaded on demand at onNodeExpand event as well. Sample belows imitates lazy paging by using an in memory list..</p>
             </div>

src/views/treetable/TreeTablePaginatorDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>TreeTable - Paginator</h1>
+                <h1>TreeTable <span>Paginator</span></h1>
                <p>Pagination is enabled by setting paginator property to true and defining the rows attribute as the number of root level nodes per page.</p>
             </div>
         </div>

src/views/treetable/TreeTableSelectionDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>TreeTable - Selection</h1>
+                <h1>TreeTable <span>Selection</span></h1>
                 <p>TreeTable supports <b>single</b>, <b>multiple</b> and <b>checkbox</b> as selection modes.</p>
             </div>
         </div>

src/views/treetable/TreeTableSizeDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>TreeTable - Size</h1>
+                <h1>TreeTable <span>Size</span></h1>
                 <p>In addition to a regular table, a smaller and a larger alternatives available.</p>
             </div>
         </div>
@@ -19,7 +19,7 @@
 
             <TreeTable :value="nodes" style="margin-bottom: 2rem">
                 <template #header>
-                    Small Table
+                    Normal Table
                 </template>
                 <Column field="name" header="Name" :expander="true"></Column>
                 <Column field="size" header="Size"></Column>
@@ -28,7 +28,7 @@
 
             <TreeTable :value="nodes" class="p-treetable-lg" >
                 <template #header>
-                    Small Table
+                    Large Table
                 </template>
                 <Column field="name" header="Name" :expander="true"></Column>
                 <Column field="size" header="Size"></Column>

src/views/treetable/TreeTableSortDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>TreeTable - Sort</h1>
+                <h1>TreeTable <span>Sort</span></h1>
                <p>TreeTable supports both single column and multiple column sorting..</p>
             </div>
         </div>

src/views/treetable/TreeTableTemplatingDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>TreeTable - Templating</h1>
+                <h1>TreeTable <span>Templating</span></h1>
                 <p>Custom content at header, body and footer sections are supported via templating.</p>
             </div>
         </div>