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.

UX layout spacing

Also have a look at the designers example guide on using Eufemias spatial system for layout.

Spacing Helpers

Spacing follows a specific pattern:

PixelTypeRemCustom Property

NB: In some circumstances you may be in need of using 0.25rem (4px) - therefore xx-small also exists, but as a single type. So, combining xx-small and small would not result in 0.25rem, but still remain 1rem.

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">
// With Styled Components
const Custom = styled(Space)`
/* additional css */
<Custom top="large x-small">

Using a Spacing helper

The SpacingHelper can be used for all kinds of systems. The idea is, You send in createStyleObject({ top: 'large' }) and will get { marginTop: 2rem } in return.

Styled Components (Emotion)

import { SpacingHelper } from '@dnb/eufemia/shared'
// With Styled Components
const Spacing = styled.div(SpacingHelper)
// A div with a margin-top of 2rem
<Spacing top="large">