Skip to content

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.

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
8x-small0.5--spacing-x-small
16small1--spacing-small
24medium1.5--spacing-medium
32large2--spacing-large
48x-large3--spacing-x-large
56xx-large3.5--spacing-xx-large

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" text="Title" />
<Input right="large x-small medium" placeholder="Title" />

CSS Custom Property

margin-top: var(--spacing-large);

The Space component and Space Components (Emotion)

import { Space } from 'dnb-ui-lib/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 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-ui-lib/shared'
// With Styled Components
const Spacing = styled.div(SpacingHelper)
// A div with a margin-top of 2rem
<Spacing top="large">
...
</Spacing>