diff --git a/src/app/showcase/doc/orderlist/basicdoc.ts b/src/app/showcase/doc/orderlist/basicdoc.ts
index c0549e699e7..74dfab5a80e 100644
--- a/src/app/showcase/doc/orderlist/basicdoc.ts
+++ b/src/app/showcase/doc/orderlist/basicdoc.ts
@@ -9,22 +9,19 @@ import { ProductService } from '../../service/productservice';
         <app-docsectiontext [title]="title" [id]="id">
             <p>OrderList is used as a controlled input with <i>value</i> properties. Content of a list item needs to be defined with the <i>pTemplate</i> property that receives an object in the list as parameter.</p>
         </app-docsectiontext>
-        <div class="card flex justify-content-center">
-            <p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products">
+        <div class="card xl:flex xl:justify-content-center">
+            <p-orderList [value]="products" [listStyle]="{ height: '25rem' }" header="Products">
                 <ng-template let-product pTemplate="item">
-                    <div class="flex align-items-center p-2 w-full flex-wrap">
-                        <div class="w-full text-center lg:w-auto lg:text-left">
-                            <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
-                        </div>
-                        <div class="flex-1">
-                            <h5 class="mb-2">{{ product.name }}</h5>
-                            <i class="pi pi-tag vertical-align-middle mr-2"></i>
-                            <span class="vertical-align-middle line-height-1">{{ product.category }}</span>
-                        </div>
-                        <div class="flex flex-column align-items-end">
-                            <h6 class="mb-2">{{ '$ ' + product.price }}</h6>
-                            <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
+                    <div class="flex flex-wrap p-2 align-items-center gap-3">
+                        <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
+                        <div class="flex-1 flex flex-column gap-2">
+                            <span class="font-bold">{{ product.name }}</span>
+                            <div class="flex align-items-center gap-2">
+                                <i class="pi pi-tag text-sm"></i>
+                                <span>{{ product.category }}</span>
+                            </div>
                         </div>
+                        <span class="font-bold text-900">{{ '$' + product.price }}</span>
                     </div>
                 </ng-template>
             </p-orderList>
@@ -61,42 +58,36 @@ export class BasicDoc implements OnInit {
 
     code: Code = {
         basic: `
-<p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products">
+<p-orderList [value]="products" [listStyle]="{ height: '25rem' }" header="Products">
     <ng-template let-product pTemplate="item">
-        <div class="flex align-items-center p-2 w-full flex-wrap">
-            <div class="w-full text-center lg:w-auto lg:text-left">
-                <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
-            </div>
-            <div class="flex-1">
-                <h5 class="mb-2">{{ product.name }}</h5>
-                <i class="pi pi-tag vertical-align-middle mr-2"></i>
-                <span class="vertical-align-middle line-height-1">{{ product.category }}</span>
-            </div>
-            <div class="flex flex-column align-items-end">
-                <h6 class="mb-2">{{ '$ ' + product.price }}</h6>
-                <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
+        <div class="flex flex-wrap p-2 align-items-center gap-3">
+            <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
+            <div class="flex-1 flex flex-column gap-2">
+                <span class="font-bold">{{ product.name }}</span>
+                <div class="flex align-items-center gap-2">
+                    <i class="pi pi-tag text-sm"></i>
+                    <span>{{ product.category }}</span>
+                </div>
             </div>
+            <span class="font-bold text-900">{{ '$' + product.price }}</span>
         </div>
     </ng-template>
 </p-orderList>`,
 
         html: `
-<div class="card flex justify-content-center">
-    <p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products">
+<div class="card xl:flex xl:justify-content-center">
+    <p-orderList [value]="products" [listStyle]="{ height: '25rem' }" header="Products">
         <ng-template let-product pTemplate="item">
-            <div class="flex align-items-center p-2 w-full flex-wrap">
-                <div class="w-full text-center lg:w-auto lg:text-left">
-                    <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
-                </div>
-                <div class="flex-1">
-                    <h5 class="mb-2">{{ product.name }}</h5>
-                    <i class="pi pi-tag vertical-align-middle mr-2"></i>
-                    <span class="vertical-align-middle line-height-1">{{ product.category }}</span>
-                </div>
-                <div class="flex flex-column align-items-end">
-                    <h6 class="mb-2">{{ '$ ' + product.price }}</h6>
-                    <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
+            <div class="flex flex-wrap p-2 align-items-center gap-3">
+                <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
+                <div class="flex-1 flex flex-column gap-2">
+                    <span class="font-bold">{{ product.name }}</span>
+                    <div class="flex align-items-center gap-2">
+                        <i class="pi pi-tag text-sm"></i>
+                        <span>{{ product.category }}</span>
+                    </div>
                 </div>
+                <span class="font-bold text-900">{{ '$' + product.price }}</span>
             </div>
         </ng-template>
     </p-orderList>
diff --git a/src/app/showcase/doc/orderlist/dragdropdoc.ts b/src/app/showcase/doc/orderlist/dragdropdoc.ts
index b0fb1851b14..72fa2b8f9b2 100644
--- a/src/app/showcase/doc/orderlist/dragdropdoc.ts
+++ b/src/app/showcase/doc/orderlist/dragdropdoc.ts
@@ -9,22 +9,19 @@ import { ProductService } from '../../service/productservice';
         <app-docsectiontext [title]="title" [id]="id">
             <p>Items can be reordered using drag and drop by enabling <i>dragdrop</i> property.</p>
         </app-docsectiontext>
-        <div class="card flex justify-content-center">
+        <div class="card xl:flex xl:justify-content-center">
             <p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" [dragdrop]="true">
                 <ng-template let-product pTemplate="item">
-                    <div class="flex align-items-center p-2 w-full flex-wrap">
-                        <div class="w-full text-center lg:w-auto lg:text-left">
-                            <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
-                        </div>
-                        <div class="flex-1">
-                            <h5 class="mb-2">{{ product.name }}</h5>
-                            <i class="pi pi-tag vertical-align-middle mr-2"></i>
-                            <span class="vertical-align-middle line-height-1">{{ product.category }}</span>
-                        </div>
-                        <div class="flex flex-column align-items-end">
-                            <h6 class="mb-2">{{ '$ ' + product.price }}</h6>
-                            <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
+                    <div class="flex flex-wrap p-2 align-items-center gap-3">
+                        <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
+                        <div class="flex-1 flex flex-column gap-2">
+                            <span class="font-bold">{{ product.name }}</span>
+                            <div class="flex align-items-center gap-2">
+                                <i class="pi pi-tag text-sm"></i>
+                                <span>{{ product.category }}</span>
+                            </div>
                         </div>
+                        <span class="font-bold text-900">{{ '$' + product.price }}</span>
                     </div>
                 </ng-template>
             </p-orderList>
@@ -63,40 +60,34 @@ export class DragDropDoc implements OnInit {
         basic: `
 <p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" [dragdrop]="true">
     <ng-template let-product pTemplate="item">
-        <div class="flex align-items-center p-2 w-full flex-wrap">
-            <div class="w-full text-center lg:w-auto lg:text-left">
-                <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
-            </div>
-            <div class="flex-1">
-                <h5 class="mb-2">{{ product.name }}</h5>
-                <i class="pi pi-tag vertical-align-middle mr-2"></i>
-                <span class="vertical-align-middle line-height-1">{{ product.category }}</span>
-            </div>
-            <div class="flex flex-column align-items-end">
-                <h6 class="mb-2">{{ '$ ' + product.price }}</h6>
-                <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
+        <div class="flex flex-wrap p-2 align-items-center gap-3">
+            <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
+            <div class="flex-1 flex flex-column gap-2">
+                <span class="font-bold">{{ product.name }}</span>
+                <div class="flex align-items-center gap-2">
+                    <i class="pi pi-tag text-sm"></i>
+                    <span>{{ product.category }}</span>
+                </div>
             </div>
+            <span class="font-bold text-900">{{ '$' + product.price }}</span>
         </div>
     </ng-template>
 </p-orderList>`,
 
         html: `
-<div class="card flex justify-content-center">
+<div class="card xl:flex xl:justify-content-center">
     <p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" [dragdrop]="true">
         <ng-template let-product pTemplate="item">
-            <div class="flex align-items-center p-2 w-full flex-wrap">
-                <div class="w-full text-center lg:w-auto lg:text-left">
-                    <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
-                </div>
-                <div class="flex-1">
-                    <h5 class="mb-2">{{ product.name }}</h5>
-                    <i class="pi pi-tag vertical-align-middle mr-2"></i>
-                    <span class="vertical-align-middle line-height-1">{{ product.category }}</span>
-                </div>
-                <div class="flex flex-column align-items-end">
-                    <h6 class="mb-2">{{ '$ ' + product.price }}</h6>
-                    <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
+            <div class="flex flex-wrap p-2 align-items-center gap-3">
+                <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
+                <div class="flex-1 flex flex-column gap-2">
+                    <span class="font-bold">{{ product.name }}</span>
+                    <div class="flex align-items-center gap-2">
+                        <i class="pi pi-tag text-sm"></i>
+                        <span>{{ product.category }}</span>
+                    </div>
                 </div>
+                <span class="font-bold text-900">{{ '$' + product.price }}</span>
             </div>
         </ng-template>
     </p-orderList>
diff --git a/src/app/showcase/doc/orderlist/filterdoc.ts b/src/app/showcase/doc/orderlist/filterdoc.ts
index 1defedc941a..2fb20ab8f05 100644
--- a/src/app/showcase/doc/orderlist/filterdoc.ts
+++ b/src/app/showcase/doc/orderlist/filterdoc.ts
@@ -9,22 +9,19 @@ import { ProductService } from '../../service/productservice';
         <app-docsectiontext [title]="title" [id]="id">
             <p>Filter value is checked against the property of an object configured with the <i>filterBy</i> property</p>
         </app-docsectiontext>
-        <div class="card flex justify-content-center">
+        <div class="card xl:flex xl:justify-content-center">
             <p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" filterBy="name" filterPlaceholder="Filter by name">
                 <ng-template let-product pTemplate="item">
-                    <div class="flex align-items-center p-2 w-full flex-wrap">
-                        <div class="w-full text-center lg:w-auto lg:text-left">
-                            <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
-                        </div>
-                        <div class="flex-1">
-                            <h5 class="mb-2">{{ product.name }}</h5>
-                            <i class="pi pi-tag vertical-align-middle mr-2"></i>
-                            <span class="vertical-align-middle line-height-1">{{ product.category }}</span>
-                        </div>
-                        <div class="flex flex-column align-items-end">
-                            <h6 class="mb-2">{{ '$ ' + product.price }}</h6>
-                            <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
+                    <div class="flex flex-wrap p-2 align-items-center gap-3">
+                        <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
+                        <div class="flex-1 flex flex-column gap-2">
+                            <span class="font-bold">{{ product.name }}</span>
+                            <div class="flex align-items-center gap-2">
+                                <i class="pi pi-tag text-sm"></i>
+                                <span>{{ product.category }}</span>
+                            </div>
                         </div>
+                        <span class="font-bold text-900">{{ '$' + product.price }}</span>
                     </div>
                 </ng-template>
             </p-orderList>
@@ -63,40 +60,34 @@ export class FilterDoc implements OnInit {
         basic: `
 <p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" filterBy="name" filterPlaceholder="Filter by name">
     <ng-template let-product pTemplate="item">
-        <div class="flex align-items-center p-2 w-full flex-wrap">
-            <div class="w-full text-center lg:w-auto lg:text-left">
-                <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
-            </div>
-            <div class="flex-1">
-                <h5 class="mb-2">{{ product.name }}</h5>
-                <i class="pi pi-tag vertical-align-middle mr-2"></i>
-                <span class="vertical-align-middle line-height-1">{{ product.category }}</span>
-            </div>
-            <div class="flex flex-column align-items-end">
-                <h6 class="mb-2">{{ '$ ' + product.price }}</h6>
-                <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
+        <div class="flex flex-wrap p-2 align-items-center gap-3">
+            <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
+            <div class="flex-1 flex flex-column gap-2">
+                <span class="font-bold">{{ product.name }}</span>
+                <div class="flex align-items-center gap-2">
+                    <i class="pi pi-tag text-sm"></i>
+                    <span>{{ product.category }}</span>
+                </div>
             </div>
+            <span class="font-bold text-900">{{ '$' + product.price }}</span>
         </div>
     </ng-template>
 </p-orderList>`,
 
         html: `
-<div class="card flex justify-content-center">
+<div class="card xl:flex xl:justify-content-center">
     <p-orderList [value]="products" [listStyle]="{ 'max-height': '30rem' }" header="Products" filterBy="name" filterPlaceholder="Filter by name">
         <ng-template let-product pTemplate="item">
-            <div class="flex align-items-center p-2 w-full flex-wrap">
-                <div class="w-full text-center lg:w-auto lg:text-left">
-                    <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="mr-3 shadow-3 w-7rem mb-3 lg:w-5rem lg:mb-auto" />
-                </div>
-                <div class="flex-1">
-                    <h5 class="mb-2">{{ product.name }}</h5>
-                    <i class="pi pi-tag vertical-align-middle mr-2"></i>
-                    <span class="vertical-align-middle line-height-1">{{ product.category }}</span>
-                </div>
-                <div class="flex flex-column align-items-end">
-                    <h6 class="mb-2">{{ '$ ' + product.price }}</h6>
-                    <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
+            <div class="flex flex-wrap p-2 align-items-center gap-3">
+                <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-4rem shadow-2 flex-shrink-0 border-round" />
+                <div class="flex-1 flex flex-column gap-2">
+                    <span class="font-bold">{{ product.name }}</span>
+                    <div class="flex align-items-center gap-2">
+                        <i class="pi pi-tag text-sm"></i>
+                        <span>{{ product.category }}</span>
+                    </div>
                 </div>
+                <span class="font-bold text-900">{{ '$' + product.price }}</span>
             </div>
         </ng-template>
     </p-orderList>