Unit
| Variable name |
Value |
|
$spacer-unit-2
|
2px
|
|
$spacer-unit-4
|
4px
|
|
$spacer-unit-8
|
8px
|
|
$spacer-unit-12
|
12px
|
|
$spacer-unit-16
|
16px
|
|
$spacer-unit-24
|
24px
|
|
$spacer-unit-32
|
32px
|
|
$spacer-unit-40
|
40px
|
|
$spacer-unit-48
|
48px
|
|
$spacer-unit-56
|
56px
|
|
$spacer-unit-64
|
64px
|
|
$spacer-unit-72
|
72px
|
|
$spacer-unit-80
|
80px
|
Component Stack
Stack classes have two behaviours: regular (responsive) and static.
Static stacks keep the same value no matter the viewport. For static stack values, refer to the "Stack max values" in the table below.
| Variable name |
Value |
|
Stack min values
|
|
$spacer-component-stack-min-xxs
|
0
|
|
$spacer-component-stack-min-xs
|
2px
|
|
$spacer-component-stack-min-sm
|
4px
|
|
$spacer-component-stack-min-md
|
8px
|
|
$spacer-component-stack-min-lg
|
16px
|
|
$spacer-component-stack-min-xl
|
24px
|
|
$spacer-component-stack-min-xxl
|
32px
|
|
$spacer-component-stack-min-3xl
|
40px
|
|
Stack max values
|
|
$spacer-component-stack-max-xxs
|
2px
|
|
$spacer-component-stack-max-xs
|
4px
|
|
$spacer-component-stack-max-sm
|
8px
|
|
$spacer-component-stack-max-md
|
16px
|
|
$spacer-component-stack-max-lg
|
24px
|
|
$spacer-component-stack-max-xl
|
32px
|
|
$spacer-component-stack-max-xxl
|
48px
|
|
$spacer-component-stack-max-3xl
|
56px
|
Component Inline
| Variable name |
Value |
|
$spacer-component-inline-xs
|
4px
|
|
$spacer-component-inline-sm
|
8px
|
|
$spacer-component-inline-md
|
16px
|
|
$spacer-component-inline-lg
|
24px
|
|
$spacer-component-inline-xl
|
32px
|
|
$spacer-component-inline-xxl
|
48px
|
Component Inset
| Variable name |
Value |
|
$spacer-component-inset-xxs
|
2px
|
|
$spacer-component-inset-xs
|
4px
|
|
$spacer-component-inset-sm
|
8px
|
|
$spacer-component-inset-md
|
16px
|
|
$spacer-component-inset-lg
|
24px
|
|
$spacer-component-inset-xl
|
32px
|
Content Section Spacings
| Variable name |
Value |
|
$spacer-content-section-x
|
16px
|
|
$spacer-content-section-s
|
32px
|
|
$spacer-content-section-s1
|
32px
|
|
$spacer-content-section-sm
|
40px
|
|
$spacer-content-section-sm1
|
48px
|
|
$spacer-content-section-m
|
56px
|
|
$spacer-content-section-l
|
64px
|
|
$spacer-content-section-xl
|
80px
|
Typo3 Frame Spacings
| Variable name |
Value |
|
$spacer-typo3-frame-space-extra-small-mobile
|
8px
|
|
$spacer-typo3-frame-space-extra-small-desktop
|
16px
|
|
$spacer-typo3-frame-space-small-mobile
|
16px
|
|
$spacer-typo3-frame-space-small-desktop
|
24px
|
|
$spacer-typo3-frame-space-medium-mobile
|
32px
|
|
$spacer-typo3-frame-space-medium-desktop
|
40px
|
|
$spacer-typo3-frame-space-large-mobile
|
48px
|
|
$spacer-typo3-frame-space-large-desktop
|
56px
|
|
$spacer-typo3-frame-space-extra-large-mobile
|
40px
|
|
$spacer-typo3-frame-space-extra-large-desktop
|
80px
|