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

<div class="vads-u-padding--2 medium-screen:vads-u-padding--5 large-screen:vads-u-padding--9" style="background-color:#162e51; color: white">
  <h1 class="vads-u-margin--0">This is a demo</h1>
  <p class="vads-u-margin--0">Use the tabs to see how the responsive padding utility works</p>
</div>

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