• Padding Vertical: {size} - On Section In only
• Margin Vertical: {size} - On Section Out only
• Overflow: Hidden
• Position: Relative

Naming conventions

• Section In {size} - Padding
• Section Out {size} - Margin

Sizes + scale

• xS - 3rem (48px at 16px base font)
• Small - 4.5rem (72px at 16px base font)
• Base - 6rem (96px at 16px base font)
• Large- 7.5rem (120px at 16px base font)
• xL - 10rem (160px at 16px base font)

Section padding & margin will scale down automatically on each breakpoint. Optionally, if you would like a specific padding or margin size on a specific device (tablet/landscape/portrait), you can use the override classes below.

Default Section Spacing Breakpoint Scale

Classes / Scale

• Section In xS - 3rem (48px at 16px base font)