Skip to main content

Spacing

Spacing values for use on Android, iOS and web.

Table of Contents

Android

NameValue
spacing-none0dp
spacing-sm4dp
spacing-md8dp
spacing-base16dp
spacing-lg24dp
spacing-xl32dp
spacing-xxl40dp

iOS

NameValue
spacing-none0pt
spacing-sm4pt
spacing-md8pt
spacing-base16pt
spacing-lg24pt
spacing-xl32pt
spacing-xxl40pt

Web

NameValue
spacing-none0
spacing-xs.375rem (6px)
spacing-function-sm@function bpk-spacing-sm() { @if global-variable-exists('bpk-spacing-v2') and $bpk-spacing-v2 { @return .25rem; } @return .75rem; }
spacing-sm.75rem (12px)
spacing-function-md@function bpk-spacing-md() { @if global-variable-exists('bpk-spacing-v2') and $bpk-spacing-v2 { @return .5rem; } @return 1.125rem; }
spacing-md1.125rem (18px)
spacing-base1.5rem (24px)
spacing-function-base@function bpk-spacing-base() { @if global-variable-exists('bpk-spacing-v2') and $bpk-spacing-v2 { @return 1rem; } @return 1.5rem; }
spacing-function-lg@function bpk-spacing-lg() { @if global-variable-exists('bpk-spacing-v2') and $bpk-spacing-v2 { @return 1.5rem; } @return 1.875rem; }
spacing-lg1.875rem (30px)
spacing-xl2.250rem (36px)
spacing-function-xl@function bpk-spacing-xl() { @if global-variable-exists('bpk-spacing-v2') and $bpk-spacing-v2 { @return 2rem; } @return 2.250rem; }
spacing-function-xxl@function bpk-spacing-xxl() { @if global-variable-exists('bpk-spacing-v2') and $bpk-spacing-v2 { @return 2.5rem; } @return 2.625rem; }
spacing-xxl2.625rem (42px)