A section is a full-width block of a page. Its padding adjusts at each breakpoint and its surface is white or grey.
The tokens, the padding per breakpoint, the measurements and the requirements. Values come from the live token package and from the specification skill.
Resolved from the live token package.
| Part | Use | Token | Value |
|---|
The padding values are on the fixed spacing scale (eco-spacing).
| Value | Token | Used for |
|---|---|---|
| 16px | space-16 | Top padding, first section (xs). Side margin (xs). |
| 24px | space-24 | My Pages title (xs and sm). |
| 32px | space-32 | Top padding (xs), first section (sm, md). Side margin (sm, md). |
| 40px | space-40 | Bottom padding (xs), first section (lg). Side margin (lg). |
| 48px | space-48 | Top and bottom (sm), first section (xl). Page divider. |
| 56px | space-56 | Top padding (md). |
| 64px | space-64 | Bottom padding (md). |
| 72px | space-72 | Top padding (lg, xl). |
| 80px | space-80 | Bottom padding (lg, xl). |
Open point: section.css writes these values as pixels, not as var(--dimension-spacing-space-…). The values are the same; the file is not changed yet.
The padding steps at the five ECO breakpoints. The row for the current window width is marked.
| Breakpoint | Top | Bottom |
|---|---|---|
| xs · 0–639px | 16px | 40px |
| sm · 640–768px | 32px | 48px |
| md · 769–1023px | 32px | 64px |
| lg · 1024–1280px | 40px | 80px |
| xl · 1281px+ | 48px | 80px |
| Breakpoint | Top | Bottom |
|---|---|---|
| xs · 0–639px | 32px | 40px |
| sm · 640–768px | 48px | 48px |
| md · 769–1023px | 56px | 64px |
| lg · 1024–1280px | 72px | 80px |
| xl · 1281px+ | 72px | 80px |
var(--px-full): the grid margin that also centers the content against the 1200px maximum width.
| Breakpoint | Margin |
|---|---|
| xs | 16px |
| sm and md | 32px |
| lg | 40px |
| xl | Centered: the larger of 40px and half of the window minus 1200px |
| Part | Value |
|---|---|
| Padding, top and bottom | 48px (zero it between two sections that have padding) |
| Padding, sides | var(--px-full) |
| Line | 1px |
| Breakpoint | .main-content padding-top | .page-preamble margin-bottom |
|---|---|---|
| xs | 24px | 24px |
| sm | 24px | 32px |
| md and up | 40px | 40px |
Padding of a section at the current window width. The shaded areas are the padding. The numbers are read from the real component, so they change when you resize the window.
There is no Breakpoint toolbar: the padding steps at four widths, and the toolbar only switches at 769px. Resize the window, or read the table under Sizes.
| Attribute | Value |
|---|---|
| Padding, top and bottom | See the figure and Sizes: per position and breakpoint |
| Padding, sides | var(--px-full): 16, 32 or 40px, then centered |
| Width | The full width of the window |
| Content maximum width | 1200px |
| Corners | Square |
The padding as spacing tokens is listed under Design Tokens.
A section has no states: no hover, focus, active or disabled.
| Element | Class | Notes |
|---|---|---|
| Section | section | A <section>. White surface, padding per breakpoint, sides var(--px-full). |
| Surface | section--secondary | Grey surface (surface-raised-secondary). |
| Position | section--first | Less top padding, for the first section on a page. |
| Padding | section--flush | Zero top and bottom padding. |
| Page divider | page-divider and page-divider__line | A div with a 1px line. |
| My Pages title | main-content and page-preamble | The spacing around the page title. |
| Type | Class | Use |
|---|---|---|
| White | section | The default. |
| Grey | section section--secondary | A clear change of content. |
| First | section section--first | The first section of a page. |
| Zeroed | section section--flush | The five cases only. |
A section is as wide as the window. The content is limited to 1200px by the side margin.
| Topic | Result |
|---|---|
| Input | None. A section has no hover, focus or click. |
| Breakpoint | The padding steps at 640, 769, 1024 and 1281px. |
| Window width | The side margin follows --px-full, so the content stays centered against 1200px. |
| Motion | None. |
| Topic | Requirement |
|---|---|
| Headings | Give every section a heading, so the structure is in the markup and not only in the padding (WCAG 1.3.1). |
| Landmark | A <section> is a landmark only with an accessible name (aria-labelledby or aria-label). Add one when the part is important to navigate to. |
| Color | Never use the grey surface as the only sign of a change. The heading must also show it. |
| Reflow | The content must fit 320px without sideways scrolling (WCAG 1.4.10). The side margin is 16px at xs. |
| Page divider | An empty div: decorative and not announced. It must not carry meaning. |