Page Sections
Common Use Cases
- Intranet homepages: a hero banner in a full-width section followed by multi-column sections for news, events, and quick links
- Department landing pages: two-column sections that pair announcements with contacts, calendars, and key documents
- News posts and articles: single-column sections that keep long-form reading comfortable and focused
- Dashboards: three-column sections that place lists, charts, and document libraries side by side for an at-a-glance view
- Right-rail layouts: a vertical section that keeps quick links, contacts, or a countdown timer visible alongside the main content
- Policy and reference pages: collapsible sections that let readers expand only the topics they need instead of scrolling a long page
Benefits
- No-code page design: professional layouts come from stacking sections, with zero HTML, CSS, or custom development
- Visual hierarchy: section backgrounds and varied layouts break a page into scannable zones that guide the reader
- Built-in responsiveness: sections reflow automatically for tablets, phones, email, and the Viva Connections feed
- Faster authoring: section templates drop pre-arranged layouts onto the page so authors start from a pattern, not a blank canvas
- Consistency across pages: repeating the same section patterns across a site creates a recognizable, trustworthy intranet
- Creative freedom when needed: flexible sections allow resizing, overlapping, and grouping of web parts on an open grid
How It Works
- Sections stack vertically: a modern page is a vertical stack of sections, and each new section is inserted above or below an existing one
- Each section gets a layout: options include one, two, or three columns, one-third left, one-third right, full width, vertical, and flexible
- Web parts live inside columns: authors place web parts from the toolbox into the columns of each section
- Backgrounds come from the theme: sections support theme colors, gradients, and images, with an automatic overlay added to keep text readable
- Flexible sections work differently: instead of columns, web parts sit on a two-dimensional grid where they can be resized, overlapped, and grouped
- Collapsible behavior: a section can be made collapsible with a title, an adjustable heading level, an optional divider line, an expand icon, and a default expanded or collapsed state
- Vertical section position: authors choose whether the vertical section moves to the top or bottom of the page on narrow screens
Limits and Nuances
- Three-column maximum: a standard section holds up to three columns, and content beyond that needs additional sections
- Full width is communication site only: full-width sections are not available on pages that are part of team sites
- Full width and vertical do not mix: a page cannot contain both a full-width section and a vertical section
- Vertical section placement: vertical sections are currently available only on the right side of the page
- Column reduction moves content: reducing a section’s column count shifts content from the rightmost column into the next column, or to the bottom of a single column
- Flexible is its own type: a flexible section cannot be switched to a column-based layout, and column-based sections cannot become flexible
- Background visibility varies: some web parts, including List, Document library, and Quick chart, keep the page background instead of showing the section background
Common Questions About Page Sections
What is a section on a SharePoint page?
A section is a horizontal container on a modern SharePoint page that holds one or more columns of web parts. Authors stack sections to structure the page, and each section can have its own layout, background color, and collapsible behavior. Sections exist on all modern pages, including news posts and page templates.
How many columns can a section contain?
A standard section supports one, two, or three columns, plus one-third left and one-third right layouts that mix a narrow and a wide column. Communication site pages also offer a full-width section that spans the entire page. A separate vertical section can sit on the right side of the page alongside the other sections.
What is a flexible section?
A flexible section removes the fixed column structure and lets authors place web parts anywhere on a two-dimensional grid. Web parts can be resized, overlapped, and grouped, and the section height is adjustable with a resize handle. On mobile and in email, a flexible section reflows into a single column using a reflow order the author selects.
Can I change a section layout after the page is built?
Yes. The section properties let you switch between column layouts at any time. When you reduce the number of columns, content from the rightmost column moves into the next column to the left, and reducing to one column moves everything into a single stack. The one exception is the flexible section, which cannot be converted to or from column-based layouts.
How do sections behave on mobile devices?
Modern pages are responsive by design. On narrow screens, columns within a section stack vertically into a single column, and a vertical section moves to the top or bottom of the page based on the position the author chooses in its properties. Flexible sections reflow into one column using either a left-to-right or top-to-bottom ordering.
Who can design effective page sections for an intranet?
Anyone with edit rights on a page can add sections, but a polished intranet takes deliberate layout choices, consistent section patterns, and the right web parts in the right columns. Greg Zelfond, the consultant behind LookBook 365, designs and builds complete SharePoint intranets out of the box, and every design in the LookBook 365 gallery is built entirely with these native sections.