Use the padding utility to change the spacing inside an item.
Examples
Padding on all sides
.ds-u-padding--0
0px
.ds-u-padding--05
4px
.ds-u-padding--1
8px
.ds-u-padding--2
16px
.ds-u-padding--3
24px
.ds-u-padding--4
32px
.ds-u-padding--5
40px
.ds-u-padding--6
48px
.ds-u-padding--7
56px
Padding on left and right (x-axis)
.ds-u-padding-x--0
0px
.ds-u-padding-x--05
4px
.ds-u-padding-x--1
8px
.ds-u-padding-x--2
16px
.ds-u-padding-x--3
24px
.ds-u-padding-x--4
32px
.ds-u-padding-x--5
40px
.ds-u-padding-x--6
48px
.ds-u-padding-x--7
56px
Padding on top and bottom (y-axis)
.ds-u-padding-y--0
0px
.ds-u-padding-y--05
4px
.ds-u-padding-y--1
8px
.ds-u-padding-y--2
16px
.ds-u-padding-y--3
24px
.ds-u-padding-y--4
32px
.ds-u-padding-y--5
40px
.ds-u-padding-y--6
48px
.ds-u-padding-y--7
56px
Padding top
.ds-u-padding-top--0
0px
.ds-u-padding-top--05
4px
.ds-u-padding-top--1
8px
.ds-u-padding-top--2
16px
.ds-u-padding-top--3
24px
.ds-u-padding-top--4
32px
.ds-u-padding-top--5
40px
.ds-u-padding-top--6
48px
.ds-u-padding-top--7
56px
Padding right
.ds-u-padding-right--0
0px
.ds-u-padding-right--05
4px
.ds-u-padding-right--1
8px
.ds-u-padding-right--2
16px
.ds-u-padding-right--3
24px
.ds-u-padding-right--4
32px
.ds-u-padding-right--5
40px
.ds-u-padding-right--6
48px
.ds-u-padding-right--7
56px
Padding bottom
.ds-u-padding-bottom--0
0px
.ds-u-padding-bottom--05
4px
.ds-u-padding-bottom--1
8px
.ds-u-padding-bottom--2
16px
.ds-u-padding-bottom--3
24px
.ds-u-padding-bottom--4
32px
.ds-u-padding-bottom--5
40px
.ds-u-padding-bottom--6
48px
.ds-u-padding-bottom--7
56px
Padding left
.ds-u-padding-left--0
0px
.ds-u-padding-left--05
4px
.ds-u-padding-left--1
8px
.ds-u-padding-left--2
16px
.ds-u-padding-left--3
24px
.ds-u-padding-left--4
32px
.ds-u-padding-left--5
40px
.ds-u-padding-left--6
48px
.ds-u-padding-left--7
56px
Responsive padding
Responsive format: .ds-u-[breakpoint]-padding-[x|y|bottom|left|right|top]--[0-7]
Read more about how the design system approaches spacing here.