Box

Specification

Box is a primitive component that distributes alignment and spacing.

Box has no control over elements' composition. Use Composition instead.

Props

Box supports all Prop aliases, except those specific to CSS Grid.

Prop name	Type	Description
flex	boolean	Display a box as flex.
inline	boolean	Uses inline display.

Example

import React from 'react'
import { Box } from 'atomic-layout'

export const Header = ({ children }) => (
  <Box as="header" padding={10} paddingMd={20}>
    {children}
  </Box>
)