Skip to main contentSkip to site searchSkip to component search
Honeycomb

space

You can use the space helpers to add or remove space between elements.

The spacing helper rules should override any existing margins from other components, such as Box, Text, Heading, etc.

The space helper contains a map for all space values and the four sides to apply them.

  • space['SPACING'].top
  • space['SPACING'].bottom
  • space['SPACING'].left
  • space['SPACING'].right

Where SPACING refers to one of available spacing options: flush, half, 1, 2, 3, 4 etc.

The flush key removes space (sets margin to 0).

Bottom spacing:

import { Box, spaceHelpers } from '@flixbus/honeycomb-react';

const {
  4: space4,
  6: space6,
  8: space8,
} = spaceHelpers();

<>
  <Box extraClasses={space4.bottom}>
    Has space 4 at bottom
  </Box>
  <Box extraClasses={space6.bottom}>
    Has space 6 at bottom
  </Box>
  <Box extraClasses={space8.bottom}>
    Has space 8 at bottom
  </Box>
</>

The next example sets right spacing and flushes bottom margins.

The flush key also has the four sides.

import { Box, spaceHelpers } from '@flixbus/honeycomb-react';

const {
  4: space4,
  6: space6,
  8: space8,
  flush: spaceFlush,
} = spaceHelpers();

<div style={{ display: 'flex' }}>
  <Box extraClasses={`${space4.right} ${spaceFlush.bottom}`}>
    Has space 4 at right
  </Box>
  <Box extraClasses={`${space6.right} ${spaceFlush.bottom}`}>
    Has space 6 at right
  </Box>
  <Box extraClasses={`${space8.right} ${spaceFlush.bottom}`}>
    Has space 8 at right
  </Box>
</div>