LWR Sites for Experience Cloud
jNewer Version Available
Site Spacing --dxp Styling Hooks
Site spacing allows you to customize the global spacing settings for your site. These
styling hooks combine to provide a consistent spacing experience across each page.
The Site Spacing tab of the Theme panel lets you set the following properties for both
desktops and mobile devices.
- Max Content Width
- The maximum width of the inner content for theme regions and page regions.
- Section Vertical Padding
- The space between the top and bottom of a section’s inner content and the top and bottom of the section container, respectively.
- Section Column Spacing
- The space between columns for section components with multiple columns. In mobile form factor, this controls the vertical space between stacked columns.
- Component Spacing
- The amount of vertical spacing between each component in the same region.
Site spacing properties aren’t limited to what’s exposed through the Theme panel. Along with the declarative properties displayed there, there are dozens of additional component-level site spacing hooks, which you can use to fine-tune spacing in different parts of your page.
For example, let’s say you want your header region to span edge-to-edge instead of being confined to the max-content width set in the Theme panel. To achieve this, you would override the max-width and padding directly for the section in question. Utilizing the --dxp branding hooks enables you to edit the look and feel of any component without violating that component’s style encapsulation.
1header {
2 --dxp-c-section-content-spacing-block-start: 0;
3 --dxp-c-section-content-spacing-inline-end: 0;
4 --dxp-c-section-content-spacing-block-end: 0;
5 --dxp-c-section-content-spacing-inline-start: 0;
6 --dxp-c-section-columns-max-width: none;
7}