Layout
Layout roles set the maximum width of content, the space at the sides of the page and the order of the page layers. Named breakpoints keep responsive changes consistent.
Breakpoints
Each breakpoint applies from its width and up. Use its name in a media query, for example
@media (--breakpoint-md). The build replaces the name with the value from the token source.
Breakpoints are names for media queries, not CSS variables, so they can not be used with var().
| Name | From | Use |
|---|---|---|
--breakpoint-xs
|
480 px 30rem | The page side padding grows to 24 px. |
--breakpoint-sm
|
640 px 40rem | Columns in a columns block sit side by side. Below this width, they stack. |
--breakpoint-md
|
768 px 48rem | The main menu switches to its desktop layout, the page side padding grows to 32 px, and wide blocks get wider than the text column. |
--breakpoint-lg
|
1024 px 64rem | Full-width blocks and the desktop layout of the hero. |
The breakpoints are shared thresholds, not device categories. A component uses the ones it needs. This site
shows its navigation as a column from --breakpoint-lg.
Container widths
Content, wide and full are maximum widths. On smaller screens a container fills the space between the page side padding.
| Token | Maximum | Use |
|---|---|---|
--container-width-content
|
640 px 40rem | The text column in pages and posts. Also the content width in the WordPress editor. |
--container-width-wide
|
960 px 60rem | Wide blocks. Also the wide width in the WordPress editor. |
--container-width-full
|
1280 px 80rem | The site header, the footer and full-width blocks. |
- content · 640 px
- wide · 960 px
- full · 1280 px
Page side padding
--container-padding-inline: Padding on each side of the page. It grows at two breakpoints, so components never need their own rules for it.
| From | Padding on each side |
|---|---|
| All widths | 16 px |
--breakpoint-xs · 480 px
|
24 px |
--breakpoint-md · 768 px
|
32 px |
Make the browser window narrower to see the padding below change. The example uses the real token, so it follows the width of the window, not the width of this column.
Content between the page edges
The shaded strips are the padding on each side. This site uses the same role.
Page layers
Use the named z-index roles for things that sit above the page content. The skip link has the higher value, so it stays above an open menu panel.
| Token | Value | Use |
|---|---|---|
--z-index-overlay
|
100 | Panels above the page content, such as the mobile menu panel. |
--z-index-skip-link
|
200 | The skip link. Always on top, also above an open menu panel, so it can always be reached. |
Order inside a component, such as an image and a heading in the hero, uses the component's own tokens. The
component is isolated with isolation: isolate, so its order never competes with the page layers.
Primitives
Raw values behind the roles above. Use the roles instead of these. The breakpoint primitives are not CSS variables, so they are shown with their name in the token source.
| Token | Value |
|---|---|
breakpoint.30
|
30rem
|
breakpoint.40
|
40rem
|
breakpoint.48
|
48rem
|
breakpoint.64
|
64rem
|
--size-640
|
40rem
|
--size-960
|
60rem
|
--size-1280
|
80rem
|
--z-index-100
|
100
|
--z-index-200
|
200
|