A section is a full-width block of a page. Its padding adjusts at each breakpoint and its surface is white or grey.
Every example on this page is the real component, not a picture.
Choose the position, the surface and the padding and the section and its code update. The padding is read live from the real section, so it changes as you resize the window.
A section is a full-width block of a page. It divides the content into clear parts and gives each part the white space it needs, with a padding that steps at the five ECO breakpoints.
A section has two surfaces (white and grey), a first-section variant with less top padding, and a zeroed variant for five special cases. The same file also holds the page divider, a thin line between two sections, and the My Pages title block with its fixed spacing.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use a section. Specifications holds the values: tokens, padding per breakpoint, measurements and requirements. Code shows how to add one to a page.
Use a section for every distinct part of a page layout. Use it to:
The padding is the white space that divides the content. Turn it off only in the five cases under Variants, and with a clear purpose. Everywhere else the content needs the air.
A page divider has its own 48px of padding. Between two sections that already have padding, zero the divider’s vertical padding, or the two amounts of air add up.
A page divider is a boundary between two page sections. To separate items inside content, such as list rows, use the Divider component.
| The block… | Use |
|---|---|
| is a full-width part of a page layout | Section |
| separates two sections of one color lightly | Page divider |
| separates items inside content | eco-divider |
| is the page title on a My Pages page | .main-content and .page-preamble |
| is the page frame (header, footer) | The page template |
.section--first.--px-full for the sides.--px-page for the divider’s sides.surface-raised-primary) or grey (surface-raised-secondary).--px-full, so the content stays inside the grid.A section varies in surface, position and padding. The page divider and the My Pages title block are part of the same file.
White is the default. A page should start with a white section or use white only. Grey marks a clear change of content.
The first section on a page has less top padding, because the breadcrumb or the header sits right above it. Mark it with .section--first.
section)section section--first)The built-in padding is normally always on. Turn it off with .section--flush only in these five cases.
section--flush)| # | Case | Use when |
|---|---|---|
| 1 | Divider inside a section | Two parts with the same background, no clear break wanted, but the content should keep the section padding. |
| 2 | Adjacent topic with an in-between section | Two sections cover one topic and a semi-topic section (cross-sell, product placement) sits between them. |
| 3 | Fluid hero banner | The section is the container of a full-width banner for new products or a campaign. |
| 4 | First section next to a component with built-in spacing | Zero the top padding when the content follows a breadcrumb. |
| 5 | First section with a fluid banner first | Zero top and bottom when the page starts with a full-width banner or image. |
A thin line between two sections of the same color, when a full section break would feel heavy. It is a div, not a section, and it uses --px-full so the line stops where the content stops.
With its own 48px of padding above and below.
Zero the divider’s vertical padding, or the air stacks.
On My Pages the page title block has fixed spacing that must always be used: .main-content above the title and .page-preamble below it.
A section has no sizes. Its padding changes with the breakpoint and with the position (first or other), at all five ECO breakpoints. The values are under Sizes in Specifications, with the row for your window width marked.
The content starts at the side margin --px-full and ends at the same margin on the other side. The margin follows the grid (16px xs, 32px sm and md, 40px lg) and centers the content against the 1200px maximum width on wide screens.
The first section on a page follows the breadcrumb directly and carries .section--first. Later sections follow each other with no gap: the padding of each is the white space between the parts. On My Pages, the page title block comes before the first section.
A section is always as wide as the window. Only the content inside it is limited to 1200px.
The default surface is white. By making white the base color of the page, a clear and calm structure is created, and a grey section stands out as a change. Exceptions exist, such as product list pages and My Pages. Other backgrounds need design approval.
A section is not interactive. It has no hover, focus or disabled state and it does not animate.
The padding steps at 640px, 769px, 1024px and 1281px, so a section has five sets of values. Unlike most components, sm (640 to 768px) has its own values. The side margin also follows the breakpoint.
All requirements are listed under Accessibility Requirements in Specifications.
None. A section and a page divider are not focusable.
Give each section a heading, so the parts of the page can be found. A <section> becomes a landmark only when it has an accessible name, for example with aria-labelledby that points to its heading. The page divider is an empty div and is not announced.