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>
)
​

API - Previous

Components

Composition

Last updated 1 year ago

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