Enum | Value | Common use-case |
---|---|---|
Enum NONE | Value 0 | Common use-case Mainly for removing margins from smaller screens |
Enum XXXSMALL | Value 4px | Common use-case Used for compact spacing in between text components |
Enum XXSMALL | Value 8px | Common use-case Spacing buttons and text |
Enum XSMALL | Value 12px | Common use-case When 16px may *feel* too large |
Enum SMALL | Value 16px | Common use-case Margins in small modules such as tooltips, margins in showcase cards, user cards and text |
Enum MID | Value 24px | Common use-case Margins in card elements and as margin from the left/right/top/bottom border of the card |
Enum LARGE | Value 32px | Common use-case Margins in modals and big cards that require more white space around the content |
Enum XLARGE | Value 48px | Common use-case Margins in modals and big cards that require more white space around the content |
Enum XXLARGE | Value 64px | Common use-case Extremely large cards for margins such as full view of entries on contest and showcase |
Enum XXXLARGE | Value 72px | Common use-case Used to separate sections on landing pages |
Enum XXXXLARGE | Value 96px | Common use-case Used to separate sections on landing pages and section heroes |