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