The layout components are the primitive building blocks of the Kalo User Interface.

Box and Flex

A wrapper component that implements some default flex values.


An inline-block element.


Margin and padding can be set via the margin and padding props. The re are also more granular props for specifying particular directions: marginLeft, paddingTop etc.

These props can take a variety of values:

  • Value specific values: padding="20px"
  • Or scale values: margin="medium"

The scale values relate to a multiple of 8px:

marginLeft="extra-small" // margin-left: 2px
marginLeft="small" // margin-left: 4px
marginLeft="medium" // margin-left: 8px
marginLeft="large" // margin-left: 16px
marginLeft="extra-large" // margin-left: 24px

These can also be mixed with pixel specific values:

padding={[20, "large", "medium", 38]}

The css and style props

The css prop is inherited from Emotion and is available on every component. Styles passed in through this prop, will be set via a classname generated at run-time.

The style prop is used to add styles to an element inline via the style attribute. This should be used for regulary computed styles as it is considerably more performant.


A basic wrapping box component
This is the layout box
<Box margin={[ 'small', 'medium', 'large' ]} paddingTop="small" > This is the layout box </Box>


A span element with inline-flex set as its display property
An inline flex component
<InlineFlex> An inline flex component </InlineFlex>