Skip to main content

Configure page width and layout with PageShell

Use the standard PageShell layout so every section page has a consistent width, padding, and scrolling behaviour across the application.

Audience

This guide is designed for project manager.

Steps​

Step 1: Choose the appropriate content width​

Select whether the page should use the wider layout for dense tables and registers, or the narrower reading width for forms and detailed content so information is easy to scan.

Choose the appropriate content width

Step 2: Decide how the page should scroll​

Pick a stacked layout when the whole page should scroll together, or use banded sections when you need full-width horizontal strips such as headers, filters, and independently scrolling regions.

Decide how the page should scroll

Step 3: Ensure consistent spacing and alignment​

Rely on the PageShell to handle horizontal padding and vertical spacing so headings, copy, and controls line up consistently with other section pages without custom overrides.

Ensure consistent spacing and alignment

Step 4: Mark pages for product tours​

Add or update the page's tour identifier so help overlays and guided tours can reliably target this screen without affecting its visual layout.

Mark pages for product tours

Last updated: 2026-09-01