Atomic Layout
Getting started
GitHub
Search…
Introduction
Motivation
Resources
FAQ
Getting started
Installation
First composition
Responsive composition
Nested composition
Fundamentals
Breakpoints
Prop aliases
Responsive props
API
Layout
Components
Box
Composition
Only
Visible
Hooks
Utilities
Recipes
Semantics
Namespaces
Iterative areas
Responsive layout
Explicit media query
Powered By
GitBook
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
1
import
React
from
'react'
2
import
{
Box
}
from
'atomic-layout'
3
4
export
const
Header
=
(
{
children
}
)
=>
(
5
<
Box
as
=
"
header
"
padding
=
{
10
}
paddingMd
=
{
20
}
>
6
{
children
}
7
</
Box
>
8
)
Copied!
API - Previous
Components
Next
Composition
Last modified
2yr ago
Copy link
Contents
Specification
Props
Example