Foundation
Padding
Change the spacing inside an item. Padding classes include responsive prefixes.
Padding on all sides
.vads-u-padding--0
0px
.vads-u-padding--1px
1px
.vads-u-padding--0p25
2px
.vads-u-padding--0p5
4px
.vads-u-padding--1
8px
.vads-u-padding--1p5
12px
.vads-u-padding--2
16px
.vads-u-padding--2p5
20px
.vads-u-padding--3
24px
.vads-u-padding--4
32px
.vads-u-padding--5
40px
.vads-u-padding--6
48px
.vads-u-padding--7
56px
.vads-u-padding--8
64px
.vads-u-padding--9
72px
Padding top and bottom
.vads-u-padding-y--0
0px
.vads-u-padding-y--1px
1px
.vads-u-padding-y--0p25
2px
.vads-u-padding-y--0p5
4px
.vads-u-padding-y--1
8px
.vads-u-padding-y--1p5
12px
.vads-u-padding-y--2
16px
.vads-u-padding-y--2p5
20px
.vads-u-padding-y--3
24px
.vads-u-padding-y--4
32px
.vads-u-padding-y--5
40px
.vads-u-padding-y--6
48px
.vads-u-padding-y--7
56px
.vads-u-padding-y--8
64px
.vads-u-padding-y--9
72px
Padding top
.vads-u-padding-top--0
0px
.vads-u-padding-top--1px
1px
.vads-u-padding-top--0p25
2px
.vads-u-padding-top--0p5
4px
.vads-u-padding-top--1
8px
.vads-u-padding-top--1p5
12px
.vads-u-padding-top--2
16px
.vads-u-padding-top--2p5
20px
.vads-u-padding-top--3
24px
.vads-u-padding-top--4
32px
.vads-u-padding-top--5
40px
.vads-u-padding-top--6
48px
.vads-u-padding-top--7
56px
.vads-u-padding-top--8
64px
.vads-u-padding-top--9
72px
Padding bottom
.vads-u-padding-bottom--0
0px
.vads-u-padding-bottom--1px
1px
.vads-u-padding-bottom--0p25
2px
.vads-u-padding-bottom--0p5
4px
.vads-u-padding-bottom--1
8px
.vads-u-padding-bottom--1p5
12px
.vads-u-padding-bottom--2
16px
.vads-u-padding-bottom--2p5
20px
.vads-u-padding-bottom--3
24px
.vads-u-padding-bottom--4
32px
.vads-u-padding-bottom--5
40px
.vads-u-padding-bottom--6
48px
.vads-u-padding-bottom--7
56px
.vads-u-padding-bottom--8
64px
.vads-u-padding-bottom--9
72px
Padding right and left
.vads-u-padding-x--0
0px
.vads-u-padding-x--1px
1px
.vads-u-padding-x--0p25
2px
.vads-u-padding-x--0p5
4px
.vads-u-padding-x--1
8px
.vads-u-padding-x--1p5
12px
.vads-u-padding-x--2
16px
.vads-u-padding-x--2p5
20px
.vads-u-padding-x--3
24px
.vads-u-padding-x--4
32px
.vads-u-padding-x--5
40px
.vads-u-padding-x--6
48px
.vads-u-padding-x--7
56px
.vads-u-padding-x--8
64px
.vads-u-padding-x--9
72px
Padding right
.vads-u-padding-right--0
0px
.vads-u-padding-right--1px
1px
.vads-u-padding-right--0p25
2px
.vads-u-padding-right--0p5
4px
.vads-u-padding-right--1
8px
.vads-u-padding-right--1p5
12px
.vads-u-padding-right--2
16px
.vads-u-padding-right--2p5
20px
.vads-u-padding-right--3
24px
.vads-u-padding-right--4
32px
.vads-u-padding-right--5
40px
.vads-u-padding-right--6
48px
.vads-u-padding-right--7
56px
.vads-u-padding-right--8
64px
.vads-u-padding-right--9
72px
Padding left
.vads-u-padding-left--0
0px
.vads-u-padding-left--1px
1px
.vads-u-padding-left--0p25
2px
.vads-u-padding-left--0p5
4px
.vads-u-padding-left--1
8px
.vads-u-padding-left--1p5
12px
.vads-u-padding-left--2
16px
.vads-u-padding-left--2p5
20px
.vads-u-padding-left--3
24px
.vads-u-padding-left--4
32px
.vads-u-padding-left--5
40px
.vads-u-padding-left--6
48px
.vads-u-padding-left--7
56px
.vads-u-padding-left--8
64px
.vads-u-padding-left--9
72px
Responsive prefixes
Add a responsive breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher, following a mobile-first methodology.
Example
This is a demo
Use the tabs to see how the responsive padding utility works
| VADS Breakpoint Sass Variable | USWDS Breakpoint Custom Property | Width |
|---|---|---|
$xsmall-screen |
--mobile |
320px |
$small-screen |
--mobile-lg |
481px |
| -- | --tablet |
640px |
$medium-screen |
--medium-screen |
768px |
$small-desktop-screen |
--desktop |
1024px |
$large-screen |
--desktop-lg |
1201px |
Read more about breakpoints.