Skip to content
Spacing
src/css/utilities/spacing.css
Layout-gap and section-overlap utilities that read from merchant layout settings. Use these instead of hardcoded spacing values so spacing automatically reflects the merchant's layout gap and overlap settings.
Section layout
| Class | Sets |
|---|---|
section-overlap | Negative top margin + matching top padding to overlap the preceding section. Responsive: uses --layout__desktop-overlap on desktop and --layout__mobile-overlap on mobile. |
spacing--font-base | min-height equal to base line-height (--type__base * 1.625) |
Padding
| Class | Sets |
|---|---|
padding--gap | All sides — --layout__gap |
padding--t-gap | Top — --layout__gap |
padding--r-gap | Right — --layout__gap |
padding--b-gap | Bottom — --layout__gap |
padding--l-gap | Left — --layout__gap |
Margin
| Class | Sets |
|---|---|
margin--gap | All sides — --layout__gap |
margin--t-gap | Top — --layout__gap |
margin--r-gap | Right — --layout__gap |
margin--b-gap | Bottom — --layout__gap |
margin--l-gap | Left — --layout__gap |