Links

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