0
# Layout
1

2
PrimeNG provides 7 layout components for organizing content, creating containers, and building responsive layouts with panels, cards, and dividers.
3

4
## Container Components
5

6
### Card
7

8
Content container with optional header, footer, and actions.
9

10
```typescript { .api }
11
// Import
12
import { Card } from 'primeng/card';
13
// Module: CardModule
14

15
// Component Interface
16
interface CardProps {
17
  header?: string;
18
  subheader?: string;
19
  style?: any;
20
  styleClass?: string;
21
}
22

23
// Usage
24
@Component({
25
  template: `
26
    <!-- Basic Card -->
27
    <p-card header="Simple Card" subheader="Card subtitle" [style]="{width: '360px'}">
28
      <ng-template pTemplate="header">
29
        <img alt="Card" src="assets/showcase/images/usercard.png" />
30
      </ng-template>
31
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
32
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
33
      <ng-template pTemplate="footer">
34
        <p-button label="Save" icon="pi pi-check"></p-button>
35
        <p-button label="Cancel" severity="secondary" icon="pi pi-times" [style]="{'margin-left': '.5em'}"></p-button>
36
      </ng-template>
37
    </p-card>
38

39
    <!-- Advanced Card with Custom Templates -->
40
    <p-card styleClass="p-card-shadow">
41
      <ng-template pTemplate="header">
42
        <div class="flex align-items-center justify-content-between mb-0">
43
          <div class="flex align-items-center gap-2">
44
            <p-avatar image="assets/showcase/images/demo/avatar/walter.jpg" size="large" shape="circle"></p-avatar>
45
            <div>
46
              <div class="font-medium text-xl text-900">Walter White</div>
47
              <div class="font-medium text-sm text-700">@walterwhite</div>
48
            </div>
49
          </div>
50
          <p-button icon="pi pi-ellipsis-v" [text]="true" [rounded]="true" severity="secondary"></p-button>
51
        </div>
52
      </ng-template>
53
      
54
      <div class="font-medium text-900 mb-2">What's everyone up to today?</div>
55
      <p class="line-height-3 m-0 mb-3 text-700">
56
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
57
        Ut enim ad minim veniam.
58
      </p>
59
      <img class="w-full" src="assets/showcase/images/demo/nature/nature4.jpg" alt="nature4">
60
      
61
      <ng-template pTemplate="footer">
62
        <div class="flex gap-3 mt-3">
63
          <p-button icon="pi pi-heart" [outlined]="true" severity="help"></p-button>
64
          <p-button icon="pi pi-comment" [outlined]="true"></p-button>
65
          <p-button icon="pi pi-share-alt" [outlined]="true"></p-button>
66
        </div>
67
      </ng-template>
68
    </p-card>
69
  `
70
})
71
```
72

73
### Panel
74

75
Collapsible content panel with toggle functionality.
76

77
```typescript { .api }
78
// Import
79
import { Panel } from 'primeng/panel';
80
// Module: PanelModule
81

82
// Component Interface
83
interface PanelProps {
84
  header?: string;
85
  toggleable?: boolean;
86
  collapsed?: boolean;
87
  style?: any;
88
  styleClass?: string;
89
  expandIcon?: string;
90
  collapseIcon?: string;
91
  showHeader?: boolean;
92
  toggler?: 'icon' | 'header';
93
  transitionOptions?: string;
94
}
95

96
// Events
97
interface PanelBeforeToggleEvent {
98
  originalEvent: Event;
99
  collapsed: boolean;
100
}
101

102
interface PanelAfterToggleEvent {
103
  originalEvent: Event;
104
  collapsed: boolean;
105
}
106

107
// Usage
108
@Component({
109
  template: `
110
    <!-- Basic Panel -->
111
    <p-panel header="Header" [toggleable]="true">
112
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
113
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
114
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
115
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
116
    </p-panel>
117

118
    <!-- Panel with Custom Header -->
119
    <p-panel [toggleable]="true" (onBeforeToggle)="beforeToggle($event)" (onAfterToggle)="afterToggle($event)">
120
      <ng-template pTemplate="header">
121
        <div class="flex align-items-center gap-2">
122
          <p-avatar image="assets/showcase/images/demo/avatar/amyelsner.png" size="large" shape="circle"></p-avatar>
123
          <span class="font-bold">Amy Elsner</span>
124
        </div>
125
      </ng-template>
126
      <ng-template pTemplate="icons">
127
        <button pButton class="p-panel-header-icon p-link" (click)="saveState()">
128
          <span class="pi pi-cog"></span>
129
        </button>
130
        <p-menu #menu [popup]="true" [model]="items"></p-menu>
131
        <button pButton class="p-panel-header-icon p-link" (click)="menu.toggle($event)">
132
          <span class="pi pi-ellipsis-v"></span>
133
        </button>
134
      </ng-template>
135
      
136
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
137
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
138
    </p-panel>
139
  `
140
})
141
export class PanelComponent {
142
  items: MenuItem[] = [
143
    { label: 'Update', icon: 'pi pi-refresh' },
144
    { label: 'Delete', icon: 'pi pi-times' }
145
  ];
146

147
  beforeToggle(event: PanelBeforeToggleEvent) {
148
    console.log('Before toggle:', event.collapsed);
149
  }
150

151
  afterToggle(event: PanelAfterToggleEvent) {
152
    console.log('After toggle:', event.collapsed);
153
  }
154

155
  saveState() {
156
    console.log('State saved');
157
  }
158
}
159
```
160

161
### Fieldset
162

163
Grouped form fields with legend and optional toggle.
164

165
```typescript { .api }
166
// Import
167
import { Fieldset } from 'primeng/fieldset';
168
// Module: FieldsetModule
169

170
// Component Interface
171
interface FieldsetProps {
172
  legend?: string;
173
  toggleable?: boolean;
174
  collapsed?: boolean;
175
  style?: any;
176
  styleClass?: string;
177
  transitionOptions?: string;
178
  expandIcon?: string;
179
  collapseIcon?: string;
180
  toggler?: 'icon' | 'header';
181
}
182

183
// Events
184
interface FieldsetBeforeToggleEvent {
185
  originalEvent: Event;
186
  collapsed: boolean;
187
}
188

189
interface FieldsetAfterToggleEvent {
190
  originalEvent: Event;
191
  collapsed: boolean;
192
}
193

194
// Usage
195
@Component({
196
  template: `
197
    <!-- Basic Fieldset -->
198
    <p-fieldset legend="Header" [toggleable]="true">
199
      <p class="m-0">
200
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
201
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
202
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
203
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
204
      </p>
205
    </p-fieldset>
206

207
    <!-- Fieldset with Custom Legend -->
208
    <p-fieldset [toggleable]="true" (onBeforeToggle)="beforeToggle($event)" (onAfterToggle)="afterToggle($event)">
209
      <ng-template pTemplate="legend">
210
        <div class="flex align-items-center pl-2">
211
          <p-avatar image="assets/showcase/images/demo/avatar/amyelsner.png" size="large" shape="circle"></p-avatar>
212
          <span class="font-bold">Amy Elsner</span>
213
        </div>
214
      </ng-template>
215
      <p class="m-0">
216
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
217
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
218
      </p>
219
    </p-fieldset>
220

221
    <!-- Form Fieldset -->
222
    <p-fieldset legend="Personal Information">
223
      <div class="p-fluid formgrid grid">
224
        <div class="field col-12 md:col-6">
225
          <label for="firstname">Firstname</label>
226
          <input pInputText id="firstname" type="text" />
227
        </div>
228
        <div class="field col-12 md:col-6">
229
          <label for="lastname">Lastname</label>
230
          <input pInputText id="lastname" type="text" />
231
        </div>
232
        <div class="field col-12">
233
          <label for="address">Address</label>
234
          <textarea pInputTextarea id="address" rows="4"></textarea>
235
        </div>
236
      </div>
237
    </p-fieldset>
238
  `
239
})
240
export class FieldsetComponent {
241
  beforeToggle(event: FieldsetBeforeToggleEvent) {
242
    console.log('Before toggle:', event.collapsed);
243
  }
244

245
  afterToggle(event: FieldsetAfterToggleEvent) {
246
    console.log('After toggle:', event.collapsed);
247
  }
248
}
249
```
250

251
## Separator Components
252

253
### Divider
254

255
Content separator with text and alignment options.
256

257
```typescript { .api }
258
// Import
259
import { Divider } from 'primeng/divider';
260
// Module: DividerModule
261

262
// Component Interface
263
interface DividerProps {
264
  align?: 'left' | 'center' | 'right' | 'top' | 'center' | 'bottom';
265
  layout?: 'horizontal' | 'vertical';
266
  type?: 'solid' | 'dashed' | 'dotted';
267
  style?: any;
268
  styleClass?: string;
269
}
270

271
// Usage
272
@Component({
273
  template: `
274
    <!-- Basic Horizontal Divider -->
275
    <div>
276
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
277
      <p-divider></p-divider>
278
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
279
    </div>
280

281
    <!-- Divider with Text -->
282
    <div>
283
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
284
      <p-divider align="center" type="dashed">
285
        <b>OR</b>
286
      </p-divider>
287
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
288
    </div>
289

290
    <!-- Divider with Icon -->
291
    <div>
292
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
293
      <p-divider align="left">
294
        <div class="inline-flex align-items-center">
295
          <i class="pi pi-user mr-2"></i>
296
          <b>Icon</b>
297
        </div>
298
      </p-divider>
299
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
300
    </div>
301

302
    <!-- Vertical Divider -->
303
    <div class="flex">
304
      <div class="flex align-items-center justify-content-center w-full">
305
        Box 1
306
      </div>
307
      <p-divider layout="vertical"></p-divider>
308
      <div class="flex align-items-center justify-content-center w-full">
309
        Box 2
310
      </div>
311
      <p-divider layout="vertical">
312
        <i class="pi pi-search"></i>
313
      </p-divider>
314
      <div class="flex align-items-center justify-content-center w-full">
315
        Box 3
316
      </div>
317
    </div>
318
  `
319
})
320
```
321

322
### Toolbar
323

324
Action toolbar container for buttons and controls.
325

326
```typescript { .api }
327
// Import
328
import { Toolbar } from 'primeng/toolbar';
329
// Module: ToolbarModule
330

331
// Component Interface
332
interface ToolbarProps {
333
  style?: any;
334
  styleClass?: string;
335
  ariaLabelledBy?: string;
336
}
337

338
// Usage
339
@Component({
340
  template: `
341
    <!-- Basic Toolbar -->
342
    <p-toolbar>
343
      <ng-template pTemplate="start">
344
        <p-button label="New" icon="pi pi-plus" severity="success" class="mr-2"></p-button>
345
        <p-button label="Upload" icon="pi pi-upload" severity="info"></p-button>
346
      </ng-template>
347

348
      <ng-template pTemplate="center">
349
        <span class="p-input-icon-left">
350
          <i class="pi pi-search"></i>
351
          <input pInputText placeholder="Search" />
352
        </span>
353
      </ng-template>
354

355
      <ng-template pTemplate="end">
356
        <p-splitbutton label="Save" icon="pi pi-check" [model]="items" severity="warning"></p-splitbutton>
357
      </ng-template>
358
    </p-toolbar>
359

360
    <!-- Custom Toolbar -->
361
    <p-toolbar styleClass="mb-4 gap-2">
362
      <ng-template pTemplate="start">
363
        <p-button severity="success" label="New" icon="pi pi-plus" class="mr-2"></p-button>
364
        <p-button severity="info" label="Upload" icon="pi pi-upload"></p-button>
365

366
        <i class="pi pi-bars p-toolbar-separator mr-2" style="vertical-align: middle"></i>
367

368
        <p-button label="Print" icon="pi pi-print" class="p-button-text"></p-button>
369
        <p-button label="Export" icon="pi pi-file-excel" class="p-button-text p-button-success"></p-button>
370
      </ng-template>
371

372
      <ng-template pTemplate="end">
373
        <p-button icon="pi pi-search" class="mr-2"></p-button>
374
        <p-button icon="pi pi-calendar" severity="success" class="mr-2"></p-button>
375
        <p-button icon="pi pi-times" severity="danger"></p-button>
376
      </ng-template>
377
    </p-toolbar>
378
  `
379
})
380
export class ToolbarComponent implements OnInit {
381
  items: MenuItem[] = [];
382

383
  ngOnInit() {
384
    this.items = [
385
      {
386
        label: 'Update',
387
        icon: 'pi pi-refresh'
388
      },
389
      {
390
        label: 'Delete',
391
        icon: 'pi pi-times'
392
      }
393
    ];
394
  }
395
}
396
```
397

398
## Scrollable Components
399

400
### ScrollPanel
401

402
Custom scrollable area with styled scrollbars.
403

404
```typescript { .api }
405
// Import
406
import { ScrollPanel } from 'primeng/scrollpanel';
407
// Module: ScrollPanelModule
408

409
// Component Interface
410
interface ScrollPanelProps {
411
  style?: any;
412
  styleClass?: string;
413
  step?: number;
414
}
415

416
// Usage
417
@Component({
418
  template: `
419
    <!-- Basic ScrollPanel -->
420
    <p-scrollpanel [style]="{width: '100%', height: '200px'}">
421
      <div style="padding:1em;line-height:1.5">
422
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
423
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
424
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
425
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
426
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
427
        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
428
        voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione 
429
        voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
430
      </div>
431
    </p-scrollpanel>
432

433
    <!-- Custom Styled ScrollPanel -->
434
    <p-scrollpanel [style]="{width: '100%', height: '200px'}" styleClass="custombar1">
435
      <div style="padding: 1em; line-height: 1.5; width: 600px;">
436
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
437
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
438
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
439
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
440
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
441
        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
442
        voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione 
443
        voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
444
      </div>
445
    </p-scrollpanel>
446

447
    <!-- ScrollPanel with Table -->
448
    <p-scrollpanel [style]="{width: '100%', height: '200px'}">
449
      <p-table [value]="customers" [scrollable]="true" scrollHeight="200px">
450
        <ng-template pTemplate="header">
451
          <tr>
452
            <th>Name</th>
453
            <th>Country</th>
454
            <th>Company</th>
455
            <th>Representative</th>
456
          </tr>
457
        </ng-template>
458
        <ng-template pTemplate="body" let-customer>
459
          <tr>
460
            <td>{{customer.name}}</td>
461
            <td>{{customer.country.name}}</td>
462
            <td>{{customer.company}}</td>
463
            <td>{{customer.representative.name}}</td>
464
          </tr>
465
        </ng-template>
466
      </p-table>
467
    </p-scrollpanel>
468
  `
469
})
470
```
471

472
## Layout Utilities
473

474
### Splitter
475

476
Resizable layout splitter for creating adjustable panels.
477

478
```typescript { .api }
479
// Import
480
import { Splitter, SplitterPanel } from 'primeng/splitter';
481
// Module: SplitterModule
482

483
// Component Interface
484
interface SplitterProps {
485
  style?: any;
486
  styleClass?: string;
487
  panelSizes?: number[];
488
  minSizes?: number[];
489
  layout?: 'horizontal' | 'vertical';
490
  gutterSize?: number;
491
  stateKey?: string;
492
  stateStorage?: 'local' | 'session';
493
  step?: number;
494
}
495

496
interface SplitterPanelProps {
497
  size?: number;
498
  minSize?: number;
499
  style?: any;
500
  styleClass?: string;
501
}
502

503
// Events
504
interface SplitterResizeEndEvent {
505
  originalEvent: Event;
506
  sizes: number[];
507
}
508

509
interface SplitterResizeStartEvent {
510
  originalEvent: Event;
511
  sizes: number[];
512
}
513

514
// Usage
515
@Component({
516
  template: `
517
    <!-- Horizontal Splitter -->
518
    <p-splitter [style]="{height: '300px'}" styleClass="mb-5" (onResizeEnd)="onResize($event)">
519
      <ng-template pTemplate>
520
        <div class="col flex align-items-center justify-content-center">
521
          Panel 1
522
        </div>
523
      </ng-template>
524
      <ng-template pTemplate>
525
        <div class="col flex align-items-center justify-content-center">
526
          Panel 2
527
        </div>
528
      </ng-template>
529
    </p-splitter>
530

531
    <!-- Vertical Splitter -->
532
    <p-splitter layout="vertical" [style]="{height: '300px'}" styleClass="mb-5">
533
      <ng-template pTemplate>
534
        <div class="col flex align-items-center justify-content-center">
535
          Panel 1
536
        </div>
537
      </ng-template>
538
      <ng-template pTemplate>
539
        <div class="col flex align-items-center justify-content-center">
540
          Panel 2
541
        </div>
542
      </ng-template>
543
    </p-splitter>
544

545
    <!-- Nested Splitters -->
546
    <p-splitter [style]="{height: '300px'}" [panelSizes]="[20, 80]" [minSizes]="[10, 0]" styleClass="mb-5">
547
      <ng-template pTemplate>
548
        <div class="col flex align-items-center justify-content-center">
549
          Panel 1
550
        </div>
551
      </ng-template>
552
      <ng-template pTemplate>
553
        <p-splitter layout="vertical" [panelSizes]="[15, 85]">
554
          <ng-template pTemplate>
555
            <div style="flex-grow: 1;" class="flex align-items-center justify-content-center">
556
              Panel 2
557
            </div>
558
          </ng-template>
559
          <ng-template pTemplate>
560
            <div style="flex-grow: 1;" class="flex align-items-center justify-content-center">
561
              Panel 3
562
            </div>
563
          </ng-template>
564
        </p-splitter>
565
      </ng-template>
566
    </p-splitter>
567

568
    <!-- Splitter with SplitterPanel Components -->
569
    <p-splitter [style]="{height: '300px'}">
570
      <p-splitterpanel [size]="30" [minSize]="10">
571
        <div class="col flex align-items-center justify-content-center">
572
          Panel 1
573
        </div>
574
      </p-splitterpanel>
575
      <p-splitterpanel [size]="70">
576
        <div class="col flex align-items-center justify-content-center">
577
          Panel 2
578
        </div>
579
      </p-splitterpanel>
580
    </p-splitter>
581
  `
582
})
583
export class SplitterComponent {
584
  onResize(event: SplitterResizeEndEvent) {
585
    console.log('Splitter resized:', event.sizes);
586
  }
587
}
588
```
589

590
## Responsive Design
591

592
PrimeNG layout components work seamlessly with CSS Grid and Flexbox for responsive designs:
593

594
```typescript
595
@Component({
596
  template: `
597
    <!-- Responsive Card Layout -->
598
    <div class="grid">
599
      <div class="col-12 md:col-6 lg:col-4" *ngFor="let product of products">
600
        <p-card [style]="{height: '100%'}">
601
          <ng-template pTemplate="header">
602
            <img [src]="product.image" [alt]="product.name" class="w-full">
603
          </ng-template>
604
          <div class="text-2xl font-bold mb-2">{{product.name}}</div>
605
          <p class="text-color-secondary line-height-3">{{product.description}}</p>
606
          <ng-template pTemplate="footer">
607
            <div class="flex gap-2">
608
              <p-button label="Buy Now" class="flex-auto"></p-button>
609
              <p-button icon="pi pi-heart" severity="secondary" [outlined]="true"></p-button>
610
            </div>
611
          </ng-template>
612
        </p-card>
613
      </div>
614
    </div>
615

616
    <!-- Responsive Panel Layout -->
617
    <div class="grid">
618
      <div class="col-12 lg:col-8">
619
        <p-panel header="Main Content" [toggleable]="true">
620
          <p>Main content goes here...</p>
621
        </p-panel>
622
      </div>
623
      <div class="col-12 lg:col-4">
624
        <p-panel header="Sidebar" [toggleable]="true">
625
          <p>Sidebar content goes here...</p>
626
        </p-panel>
627
      </div>
628
    </div>
629

630
    <!-- Responsive Toolbar -->
631
    <p-toolbar styleClass="mb-4">
632
      <ng-template pTemplate="start">
633
        <div class="flex flex-column md:flex-row gap-2">
634
          <p-button label="New" icon="pi pi-plus" size="small" class="md:mr-2"></p-button>
635
          <p-button label="Upload" icon="pi pi-upload" size="small"></p-button>
636
        </div>
637
      </ng-template>
638

639
      <ng-template pTemplate="center">
640
        <div class="hidden md:block">
641
          <span class="p-input-icon-left">
642
            <i class="pi pi-search"></i>
643
            <input pInputText placeholder="Search" />
644
          </span>
645
        </div>
646
      </ng-template>
647

648
      <ng-template pTemplate="end">
649
        <p-button icon="pi pi-cog" [text]="true" severity="secondary"></p-button>
650
      </ng-template>
651
    </p-toolbar>
652
  `
653
})
654
export class ResponsiveLayoutComponent {
655
  products = [
656
    { name: 'Product 1', image: 'assets/product1.jpg', description: 'Description 1' },
657
    { name: 'Product 2', image: 'assets/product2.jpg', description: 'Description 2' }
658
  ];
659
}
660
```
661

662
## Dark Mode Support
663

664
All layout components automatically adapt to dark themes:
665

666
```scss
667
// Custom dark theme overrides
668
.p-dark {
669
  .p-card {
670
    background: var(--surface-card);
671
    border: 1px solid var(--surface-border);
672
  }
673

674
  .p-panel .p-panel-header {
675
    background: var(--surface-section);
676
    border-color: var(--surface-border);
677
  }
678

679
  .p-toolbar {
680
    background: var(--surface-section);
681
    border-color: var(--surface-border);
682
  }
683
}
684
```
685

686
## Integration with CSS Frameworks
687

688
Layout components integrate well with popular CSS frameworks:
689

690
```html
691
<!-- Bootstrap Integration -->
692
<div class="container">
693
  <div class="row">
694
    <div class="col-md-8">
695
      <p-card header="Main Content"></p-card>
696
    </div>
697
    <div class="col-md-4">
698
      <p-panel header="Sidebar"></p-panel>
699
    </div>
700
  </div>
701
</div>
702

703
<!-- Tailwind CSS Integration -->
704
<div class="container mx-auto px-4">
705
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
706
    <p-card class="shadow-lg"></p-card>
707
    <p-card class="shadow-lg"></p-card>
708
    <p-card class="shadow-lg"></p-card>
709
  </div>
710
</div>
711
```