Box - Atomic Layout

Search…

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 modified 2yr ago

Copy link

Outline

Specification

Props

Example