You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
Spacing
Spacing Overview
Anvil uses partials amounts of a base-8 spacing scale. A half value of 4px is also included. The scale starts at 8px, scaling up to 128px.
CSS Utilities
Anvil provides utility classes and variables for common spacing needs.
Spacing
Variable
Scale
Value
spacing-0
0
0
spacing-half
half
4px
spacing-1
1
8px
spacing-2
2
16px
spacing-3
3
24px
spacing-4
4
32px
spacing-5
5
48px
spacing-6
6
64px
spacing-7
7
96px
spacing-8
8
128px
Margins & Padding
Utility classes for margins and paddings exist. The format is .p-<scale> for padding, and .m-<scale> for margin.
Examples:
Directional Examples
Table breakdown of utility classes
Shorthand
Description
m
margin
p
padding
t
top
r
right
b
bottom
l
left
x
left & right
y
top & bottom
0
0px
half
4px
1
8px
2
16px
3
24px
4
32px
5
48px
6
64px
7
96px
8
128px
auto
auto