Spacing#

Spatial System#

Eufemia has a Spatial System with a grid of 8px (0.5rem). This is simply a guide grid which helps with making design decisions about the sizes of components, elements, margins, paddings etc.

Read the Web layout principles for guidance on using Eufemia's spatial system.

Spacing Helpers#

Spacing follows a specific pattern:

NB: When combining sizes we only allow increments of 0.5rem, so xx-small will not increment by 0.25rem when combined with other sizes.

Code Editor Extensions#

You may be interested to install an Eufemia code editor extension that allows you to quickly auto complete the correct spacing.

Components and Spacing#

Also, have a look at the Space component and the fact that every component supports spacing out of the box.

<Button top="small" />
<Button right="large x-small medium" />
<Button space={{ top:'small', right: 'large x-small medium' }} />

CSS Custom Property#

margin-top: calc(var(--spacing-large) + var(--spacing-small));

The Space component and Space Components (Emotion)#

import { Space } from '@dnb/eufemia/components'

// A div with a margin-top of 2.5rem
<Space top="large x-small">
  ...
</Space>

// With Styled Components
const Custom = styled(Space)`
  /* additional css */
`
<Custom top="large x-small">
  ...
</Custom>

Using Spacing helpers#

You may use the internals to build helpers suited to your needs.

import { calc } from '@dnb/eufemia/components/space/SpacingUtils'

// With Styled Components
const StyledDiv = styled.div`
  margin-top: ${calc('medium large')};
  margin-top: ${calc('medium', 'large')};
  margin-top: ${calc('1.5rem', '2rem')};
  margin-top: ${calc('24px', '32px')};
`

All of the examples do output: calc(var(--spacing-medium) + var(--spacing-large))

Invalid values will be corrected to its nearest spacing type (e.g. 17px to var(--spacing-small)).