Forma 36

Spacing

Give feedback

In Forma 36, we built our components independent of any styling outside of them. This means that you will need to manage spacing between elements using our spacing tokens in any CSS solution you chose. The only exception to this rule is our layout components: Flex, Stack, Grid, Box.

Tokens

TokenValue in pxValue in remExample
spacing2Xs
4px
0.25rem
spacingXs
8px
0.5rem
spacingS
12px
0.75rem
spacingM
16px
1rem
spacingL
24px
1.5rem
spacingXl
32px
2rem
spacing2Xl
48px
3rem
spacing3Xl
64px
4rem
spacing4Xl
80px
5rem

Tokens with inline styles

import tokens from '@contentful/f36-tokens';


<div style={{ padding: tokens.spacingM }} />;

Tokens with emotion

import tokens from '@contentful/f36-tokens';
import { css } from 'emotion';


css({ padding: tokens.spacingM });

Help improve this page

Read the contribution guide