Spacing Presets

Spacing is available in these seven steps: 20, 30, 40, 50, 60, 70, and 80. Below is the code used to define spacing presets in theme.json:

{
	"settings": {
		"spacing": {
			"defaultSpacingSizes": false,
			"spacingSizes": [
				{
					"name": "20",
					"size": "clamp(15px, 2vw, 20px)",
					"slug": "20"
				},
				{
					"name": "30",
					"size": "clamp(25px, 3vw, 30px)",
					"slug": "30"
				},
				{
					"name": "40",
					"size": "clamp(30px, 4vw, 40px)",
					"slug": "40"
				},
				{
					"name": "50",
					"size": "clamp(35px, 5vw, 50px)",
					"slug": "50"
				},
				{
					"name": "60",
					"size": "clamp(40px, 6vw, 60px)",
					"slug": "60"
				},
				{
					"name": "70",
					"size": "clamp(50px, 7vw, 70px)",
					"slug": "70"
				},
				{
					"name": "80",
					"size": "clamp(60px, 8vw, 80px)",
					"slug": "80"
				}
			],
			"units": [ "%", "px", "em", "rem", "vh", "vw" ]
		}
	}
}

Fluid Spacing

Spacing in Powder is fluid, and each preset utilizes the clamp() CSS function to define three parameters : a minimum value, a preferred value, and a maximum value. Examples can be seen below:

Spacing 20

This is a sample group with fluid spacing.

Spacing 30

This is a sample group with fluid spacing.

Spacing 40

This is a sample group with fluid spacing.

Spacing 50

This is a sample group with fluid spacing.

Spacing 60

This is a sample group with fluid spacing.

Spacing 70

This is a sample group with fluid spacing.

Spacing 80

This is a sample group with fluid spacing.