To implement Box component into your project you’ll need to add the import:

import Box from "@kiwicom/orbit-components/lib/Box";

After adding import into your project you can use it simply like:

<Box>Hello World!</Box>

Table below contains all types of the props available in the Box component.

When you need to specify some different behavior of the Box component on different viewport, you can use properties for it. There are mediumMobile, largeMobile, tablet, desktop and largeDesktop available and it behaves the same as mediaQueries functions. All this properties - objects have the some own properties and none is required.

If you want to define spacingObject, you can define specific directions like this: <Box margin={{ top: "XXSmall", bottom: "XXSmall" }} />