Padding and spacers
Set consistent vertical spacing across Sprocket Rocket modules.
Section padding controls the space above and below a module's content. SR Padding Half is used when a module's Top Bottom Padding is set to Small padding, and SR Padding Full when it's set to Large padding. Spacer sizes provide reusable gaps: add a class such as sr-spacer-50, sr-spacer-top-50, or sr-spacer-bottom-50 in a module's class field to use SR Spacer 50. There are spacers for 25, 50, 75, and 100. Enter values in pixels. The same values apply at every screen width, so choose values that work on desktop and mobile.
Avoid fixing layout problems with many one-off spacing values. Change the shared scale when the whole site feels too tight or too loose, and use a module override only when its content needs different treatment.
Available settings
| Setting | Type | Notes |
|---|---|---|
| SR Padding Half | number | Used in modules for the Small Padding setting |
| SR Padding Full | number | Used in modules for the Large Padding setting |
| SR Spacer 25 | number | Use the following classes in the module class field to add spacing. sr-spacer-25; sr-spacer-top-25; sr-spacer-bottom-25 |
| SR Spacer 50 | number | Use the following classes in the module class field to add spacing. sr-spacer-50; sr-spacer-top-50; sr-spacer-bottom-50 |
| SR Spacer 75 | number | Use the following classes in the module class field to add spacing. sr-spacer-75; sr-spacer-top-75; sr-spacer-bottom-75 |
| SR Spacer 100 | number | Use the following classes in the module class field to add spacing. sr-spacer-100; sr-spacer-top-100; sr-spacer-bottom-100 |