margin

top-right-bottom-left

lds-m-0
lds-m-1
lds-m-2
lds-m-3
lds-m-4
lds-m-5
lds-m-6
lds-m-7
lds-m-8

left-and-right

lds-mx-0
lds-mx-1
lds-mx-2
lds-mx-3
lds-mx-4
lds-mx-5
lds-mx-6
lds-mx-7
lds-mx-8

top-and-bottom

lds-my-0
lds-my-1
lds-my-2
lds-my-3
lds-my-4
lds-my-5
lds-my-6
lds-my-7
lds-my-8

top

lds-mt-0
lds-mt-1
lds-mt-2
lds-mt-3
lds-mt-4
lds-mt-5
lds-mt-6
lds-mt-7
lds-mt-8

right

lds-mr-0
lds-mr-1
lds-mr-2
lds-mr-3
lds-mr-4
lds-mr-5
lds-mr-6
lds-mr-7
lds-mr-8

bottom

lds-mb-0
lds-mb-1
lds-mb-2
lds-mb-3
lds-mb-4
lds-mb-5
lds-mb-6
lds-mb-7
lds-mb-8

left

lds-ml-0
lds-ml-1
lds-ml-2
lds-ml-3
lds-ml-4
lds-ml-5
lds-ml-6
lds-ml-7
lds-ml-8

padding

top-right-bottom-left

lds-p-0
lds-p-1
lds-p-2
lds-p-3
lds-p-4
lds-p-5
lds-p-6
lds-p-7
lds-p-8

left-and-right

lds-px-0
lds-px-1
lds-px-2
lds-px-3
lds-px-4
lds-px-5
lds-px-6
lds-px-7
lds-px-8

top-and-bottom

lds-py-0
lds-py-1
lds-py-2
lds-py-3
lds-py-4
lds-py-5
lds-py-6
lds-py-7
lds-py-8

top

lds-pt-0
lds-pt-1
lds-pt-2
lds-pt-3
lds-pt-4
lds-pt-5
lds-pt-6
lds-pt-7
lds-pt-8

right

lds-pr-0
lds-pr-1
lds-pr-2
lds-pr-3
lds-pr-4
lds-pr-5
lds-pr-6
lds-pr-7
lds-pr-8

bottom

lds-pb-0
lds-pb-1
lds-pb-2
lds-pb-3
lds-pb-4
lds-pb-5
lds-pb-6
lds-pb-7
lds-pb-8

left

lds-pl-0
lds-pl-1
lds-pl-2
lds-pl-3
lds-pl-4
lds-pl-5
lds-pl-6
lds-pl-7
lds-pl-8

Inset spacing

lds-p-5

Inline spacing

lds-mr-2
lds-mr-2
lds-mr-2

Stack spacing

lds-mb-2
lds-mb-2
lds-mr-2

Custom section that consumes $lds variables

margin-right: $lds-space--4;
padding: $lds-space--2;

Mimic message component with spacing coming from LDS

Info message
Warning message