LWR Sites for Experience Cloud
jNote: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.
Site Spacing --dxp Styling Hooks
- Max Content Width
- The maximum width of the inner content for theme regions and page regions.
- Section Padding: Top & Bottom
- The space between the top and bottom of a section’s inner content and the top and bottom of the section container, respectively.
- Section Padding: Left & Right
- The space between the left and right edges of a section’s inner content and the left and right edges of the section container, respectively.
- Column Gutters
- The space between columns for section components with multiple columns. In mobile form factor, this setting controls the vertical space between stacked columns.
- Vertical Space Between Components
- The amount of vertical spacing between components 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 outcome, you would override the max-width and padding directly for the section in question. Using 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}