Skip to content
Home

Space

Info
Demos
Properties

Demos

Spacing method #1 - Space component. The RedBox is only to visualize the result.

Code Editor
<RedBox>
  <Space top="large x-small">
    <Input label="Input:" />
  </Space>
</RedBox>

Spacing method #2 - FormRow component

Space A
Space B
Code Editor
const Component = ({ className = null, ...props }) => {
  const spacingClasses = createSpacingClasses(props)
  const cn = classnames('my-comoponent', spacingClasses, className)
  return <div className={cn} {...props} />
}
render(
  <RedBox>
    <Component top="small medium large">Space A</Component>
    <Component top>Space B</Component>
  </RedBox>,
)

Spacing method #3 - Define the space directly

Code Editor
<Input label="Input A:" right="small" />
<Input label="Input B:" />

Spacing with no margin collapse, due to the flex usage

I have bottom="small"
I have top="large"

All four values will result in an equivalent margin

I have four 2.5rem margins!And this are my CSS classes: dnb-space dnb-space__top--large dnb-space__top--x-small dnb-space__right--large dnb-space__right--x-small dnb-space__bottom--large dnb-space__bottom--x-small dnb-space__left--large dnb-space__left--x-small

Visual space testing

With dnb-core-style

Without