components

Box (code)

A box is a very low-level component that can be used to generally style an element.

Look at me, being all boxed in

import { Box } from '@mediahuis/chameleon-react'

<Box>Look at me, being all boxed in</Box>

<Box>Look at me, being all boxed in</Box>

Props

Name	Type	Default	Required	Description
alignContent	'center''flex-end''flex-start''space-around''space-between''space-evenly''stretch'	-	-	Is similar to align-items, but instead of aligning flex items, it aligns flex lines.
alignItems	'flex-start''center''flex-end''stretch''baseline'	-	-	Specifies the default alignment for items inside the flexible container.
alignSelf	'auto''flex-start''flex-end''center''baseline''stretch'	-	-	Allows the default alignment to be overridden for individual flex items.
bgColor	String	-	-	Sets the background-color style, must be one of the system. It will also set the associative text-color.
borderBottomColor	String	-	-	Sets the border-bottom-color style, must be one of the system.
borderBottomStyle	'none''hidden''dotted''dashed''solid''double''groove''ridge''inset''outset''initial''inherit'	-	-	Sets the border-bottom-style value.
borderBottomWidth	01234	-	-	Sets the border-bottom-width style.
borderColor	String	-	-	Sets the border-color style, must be one of the system.
borderLeftColor	String	-	-	Sets the border-left-color style, must be one of the system.
borderLeftStyle	'none''hidden''dotted''dashed''solid''double''groove''ridge''inset''outset''initial''inherit'	-	-	Sets the border-left-style value.
borderLeftWidth	01234	-	-	Sets the border-bottom-width style.
borderRadius	01234567891011'fill''sides'	-	-	Sets the css border-radius property, maps on spacing values + fill, + sides.
borderRightColor	String	-	-	Sets the border-right-color style, must be one of the system.
borderRightStyle	'none''hidden''dotted''dashed''solid''double''groove''ridge''inset''outset''initial''inherit'	-	-	Sets the border-right-style value.
borderRightWidth	01234	-	-	Sets the border-right-width style.
borderStyle	'none''hidden''dotted''dashed''solid''double''groove''ridge''inset''outset''initial''inherit'	-	-	Sets the border-style value.
borderTopColor	String	-	-	Sets the border-top-color style, must be one of the system.
borderTopStyle	'none''hidden''dotted''dashed''solid''double''groove''ridge''inset''outset''initial''inherit'	-	-	Sets the border-top-style value.
borderTopWidth	01234	-	-	Sets the border-top-width style.
borderWidth	01234	-	-	Sets the border-width style.
bottom	01234567891011	-	-	Sets the css bottom property, maps on spacing values.
children	Node	-	-	Contents displayed within the Box.
className	String	-	-	Extend classNames.
clone	Boolean	-	-	The Box component has a clone property to enable the usage of the clone element method of React (React.cloneElement()). NOTE: The CSS specificity relies on the import order. If you want the guarantee that the wrapped component's style will be overridden, you need to import the Box last.
color	String	-	-	Sets the color style, must be one of the system.
display	'inline''block''flex''grid''inline-block''inline-flex''inline-grid''inline-table''list-item''run-in''table''table-caption''table-column-group''table-header-group''table-footer-group''table-row-group''table-cell''table-column''table-row''none''initial''inherit'	-	-	Changes the box's display property.
flex	StringNumber	-	-	shorthand for flex-grow, flex-shrink and flex-basis combined. (none \| [ <'flex-grow'> <'flex-shrink'>? \|\| <'flex-basis'> ])
flexBasis	StringNumber	-	-	Defines the default size of an element before the remaining space is distributed. (default auto)
flexDirection	'row''row-reverse''column''column-reverse'	-	-	Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed)..
flexGrow	StringNumber	-	-	Defines the ability for a flex item to grow if necessary. (default 0)
flexShrink	StringNumber	-	-	Defines the ability for a flex item to shrink if necessary.(default 1)
flexWrap	'nowrap''wrap''wrap-reverse'	-	-	Specifies whether the flexible items should wrap or not.
float	'left''right''none'	-	-	The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
fontStyle	'inherit''normal''italic''oblique'	-	-	Sets the css font-style property.
fontWeight	'inherit''regular''medium''bold'	-	-	Sets the css font-weight property.
height	String01234567891011'auto''full'	-	-	Controls Box's height property.
justifyContent	'flex-start''center''flex-end''space-between''space-around''space-evenly'	-	-	Aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).
left	01234567891011	-	-	Sets the css left property, maps on spacing values.
m	-11-10-9-8-7-6-5-4-3-2-101234567891011'auto'	-	-	Changes the box's margin.
maxHeight	String01234567891011'auto''full'	-	-	Controls Box's maxHeight property.
maxWidth	String01234567891011'auto''full'	-	-	Controls Box's maxWidth property.
mb	-11-10-9-8-7-6-5-4-3-2-101234567891011'auto'	-	-	Changes the box's margin-bottom.
ml	-11-10-9-8-7-6-5-4-3-2-101234567891011'auto'	-	-	Changes the box's margin-left.
mr	-11-10-9-8-7-6-5-4-3-2-101234567891011'auto'	-	-	Changes the box's margin-right.
mt	-11-10-9-8-7-6-5-4-3-2-101234567891011'auto'	-	-	Changes the box's margin-top.
mx	-11-10-9-8-7-6-5-4-3-2-101234567891011'auto'	-	-	Changes the box's margin-left and margin-right.
my	-11-10-9-8-7-6-5-4-3-2-101234567891011'auto'	-	-	Changes the box's margin-top and margin-bottom.
order	NumberString	-	-	Controls the order in which flex items appear in the flex container.
p	01234567891011	-	-	Changes the box's padding.
pb	01234567891011	-	-	Changes the box's padding-bottom.
pl	01234567891011	-	-	Changes the box's padding-left.
position	'absolute''fixed''relative''sticky'	-	-	Changes the box's position.
pr	01234567891011	-	-	Changes the box's padding-right.
pt	01234567891011	-	-	Changes the box's padding-top.
px	01234567891011	-	-	Changes the box's padding-left and padding-right.
py	01234567891011	-	-	Changes the box's padding-top and padding-bottom.
right	01234567891011	-	-	Sets the css right property, maps on spacing values.
style	Object	-	-	Style attribute
textAlign	'inherit''left''right''center''justify'	-	-	Sets the css text-align property.
textTransform	'inherit''none''capitalize''uppercase''lowercase'	-	-	Sets the css text-transform property.
top	01234567891011	-	-	Sets the css top property, maps on spacing values.
width	String01234567891011'auto''full'	-	-	Controls Box's width property.
zIndex	0100200300400500600700800900	-	-	Controls Box's zIndex property.

alignSelf

default: undefined

Flex-end

normal

<Flex flexDirection="column">
  <Box alignSelf="flex-end">Flex-end</Box>
  <Box>normal</Box>
</Flex>

<Flex flexDirection="column">
  <Box alignSelf="flex-end">Flex-end</Box>
  <Box>normal</Box>
</Flex>

bgColor

default: undefined

Sets the backgroundColor of the Boxe. It's important to know it will also try to set the corresponding text color!

My text will get the coresponding color

My text will get the coresponding color (white)

My text will get the coresponding color (black)

<Box bgColor="primaryBase">My text will get the coresponding color</Box>
<Box bgColor="blackBase">My text will get the coresponding color (white)</Box>
<Box bgColor="whiteBase">My text will get the coresponding color (black)</Box>

<Box bgColor="primaryBase">My text will get the coresponding color</Box>
<Box bgColor="blackBase">My text will get the coresponding color (white)</Box>
<Box bgColor="whiteBase">My text will get the coresponding color (black)</Box>

border

default: undefined

border

borderTop

borderRight

borderBottom

borderLeft

<Box borderColor="primaryBase" borderStyle="solid" borderWidth={2} my={6}>
  border
</Box>
<Box borderTopColor="secondaryBase" borderTopStyle="solid" borderTopWidth={2} my={6}>
  borderTop
</Box>
<Box borderRightColor="tertiaryBase" borderRightStyle="solid" borderRightWidth={2} my={6}>
  borderRight
</Box>
<Box borderBottomColor="redBase" borderBottomStyle="solid" borderBottomWidth={2} my={6}>
  borderBottom
</Box>
<Box borderLeftColor="blueBase" borderLeftStyle="solid" borderLeftWidth={2} my={6}>
  borderLeft
</Box>

<Box borderColor="primaryBase" borderStyle="solid" borderWidth={2} my={6}>
  border
</Box>
<Box borderTopColor="secondaryBase" borderTopStyle="solid" borderTopWidth={2} my={6}>
  borderTop
</Box>
<Box borderRightColor="tertiaryBase" borderRightStyle="solid" borderRightWidth={2} my={6}>
  borderRight
</Box>
<Box borderBottomColor="redBase" borderBottomStyle="solid" borderBottomWidth={2} my={6}>
  borderBottom
</Box>
<Box borderLeftColor="blueBase" borderLeftStyle="solid" borderLeftWidth={2} my={6}>
  borderLeft
</Box>

borderRadius

default: undefined

A bit rounded

Oooooooooval

Round and round

<Box borderRadius={2} bgColor="primaryBase">
  A bit rounded
</Box>
<Box borderRadius="fill" bgColor="secondaryBase">
  Oooooooooval
</Box>
<Box borderRadius="sides" bgColor="tertiaryBase">
  Round and round
</Box>

<Box borderRadius={2} bgColor="primaryBase">
  A bit rounded
</Box>
<Box borderRadius="fill" bgColor="secondaryBase">
  Oooooooooval
</Box>
<Box borderRadius="sides" bgColor="tertiaryBase">
  Round and round
</Box>

bottom

default: undefined

Bottom: space 5

<Box position="relative" bgColor="primaryBase" width="full" height={3}>
  <Box position="absolute" bottom={5} bgColor="blueDark">
    Bottom: space 5
  </Box>
</Box>

<Box position="relative" bgColor="primaryBase" width="full" height={3}>
  <Box position="absolute" bottom={5} bgColor="blueDark">
    Bottom: space 5
  </Box>
</Box>

clone

The Box component has a clone property to enable the usage of the clone element method of React (<React.cloneElement()>). NOTE: The CSS specificity relies on the import order. If you want the guarantee that the wrapped component's style will be overridden, you need to import the Box last.

Paper with box props.

<Box position="relative" bgColor="grey10" width="full" p={3} clone>
  <Paper elevation={3}>Paper with box props.</Paper>
</Box>

<Box position="relative" bgColor="grey10" width="full" p={3} clone>
  <Paper elevation={3}>Paper with box props.</Paper>
</Box>

color

default: undefined

My color is better than yours.

<Box color="primaryBase">My color is better than yours.</Box>
<Box color="secondaryBase">My color is better than yours.</Box>
<Box color="tertiaryBase">My color is better than yours.</Box>
<Box bgColor="primaryBase" color="textPrimaryBase">My color is better than yours.</Box>

<Box color="primaryBase">My color is better than yours.</Box>
<Box color="secondaryBase">My color is better than yours.</Box>
<Box color="tertiaryBase">My color is better than yours.</Box>
<Box bgColor="primaryBase" color="textPrimaryBase">My color is better than yours.</Box>

flex

default: undefined

<Flex>
    <Box width="100%" height="100px" bgColor="primaryBase"></Box>
    <Box flex="0 0 auto" width="20%" height="100px" bgColor="secondaryBase"></Box>
  </Flex>
  <Flex>
    <Box width="20%" height="100px" bgColor="primaryBase"></Box>
    <Box flex="2 0 auto" width="20%" height="100px" bgColor="secondaryBase"></Box>
  </Flex>

<Flex>
    <Box width="100%" height="100px" bgColor="primaryBase"></Box>
    <Box flex="0 0 auto" width="20%" height="100px" bgColor="secondaryBase"></Box>
  </Flex>
  <Flex>
    <Box width="20%" height="100px" bgColor="primaryBase"></Box>
    <Box flex="2 0 auto" width="20%" height="100px" bgColor="secondaryBase"></Box>
  </Flex>

flexBasis

default: undefined

<Flex>
  <Box flexBasis="40%" width="100%" height="100px" bgColor="primaryBase"></Box>
  <Box flexBasis="60%" width="20%" height="100px" bgColor="secondaryBase"></Box>
</Flex>

<Flex>
  <Box flexBasis="40%" width="100%" height="100px" bgColor="primaryBase"></Box>
  <Box flexBasis="60%" width="20%" height="100px" bgColor="secondaryBase"></Box>
</Flex>

flexGrow

<Flex>
  <Box width="20%" height="100px" bgColor="primaryBase"></Box>
  <Box flexGrow={2} width="20%" height="100px" bgColor="secondaryBase"></Box>
</Flex>

<Flex>
  <Box width="20%" height="100px" bgColor="primaryBase"></Box>
  <Box flexGrow={2} width="20%" height="100px" bgColor="secondaryBase"></Box>
</Flex>

flexShrink

<Flex>
  <Box width="100%" height="100px" bgColor="primaryBase"></Box>
  <Box flexShrink={0} width="20%" height="100px" bgColor="secondaryBase"></Box>
</Flex>

<Flex>
  <Box width="100%" height="100px" bgColor="primaryBase"></Box>
  <Box flexShrink={0} width="20%" height="100px" bgColor="secondaryBase"></Box>
</Flex>

float

default: undefined

float left

float right

float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none.

<Box float="left" bgColor="primaryBase" height={11} mr={2} p={2}>
  <Paragraph>float left</Paragraph>
</Box>
<Box float="right" bgColor="secondaryBase" height={11} ml={2} p={2}>
  <Paragraph>float right</Paragraph>
</Box>
<Box float="none" bgColor="tertiaryBase" p={2}>
  <Paragraph>
float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none.
  </Paragraph>
</Box>

<Box float="left" bgColor="primaryBase" height={11} mr={2} p={2}>
  <Paragraph>float left</Paragraph>
</Box>
<Box float="right" bgColor="secondaryBase" height={11} ml={2} p={2}>
  <Paragraph>float right</Paragraph>
</Box>
<Box float="none" bgColor="tertiaryBase" p={2}>
  <Paragraph>
float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none float none.
  </Paragraph>
</Box>

fontWeight

default: undefined

Controls the font-weight css attribute. Only 3 values are available. If a value is missing, it will fallback on the more bold weight.

Lorem ipsum dolor amet gastropub meditation tumblr hashtag. Meggings cornhole prism +1 sriracha authentic la croix street art af typewriter poke. Tumblr YOLO freegan thundercats fixie, craft beer shoreditch humblebrag. Ramps kinfolk roof party waistcoat ennui prism. Authentic edison bulb iceland letterpress yr.

Single-origin coffee hoodie edison bulb man braid la croix ethical fashion axe street art yr hammock. Asymmetrical roof party truffaut, forage fashion axe tacos gentrify narwhal raclette fingerstache. Hexagon austin affogato kale chips, jean shorts etsy sriracha banh mi forage waistcoat scenester next level small batch try-hard letterpress. Blue bottle taiyaki roof party helvetica selfies gochujang.

Blog migas tbh man braid pitchfork vaporware, chicharrones selvage seitan subway tile jean shorts humblebrag post-ironic. Tattooed live-edge readymade, vice cold-pressed swag tousled lomo air plant. Edison bulb bitters actually banjo pok pok hammock single-origin coffee stumptown knausgaard direct trade pinterest yr locavore jean shorts.

<Box fontWeight="regular">
  <Paragraph>
    Lorem ipsum dolor amet gastropub meditation tumblr hashtag. Meggings cornhole prism +1 sriracha authentic la croix street art af typewriter poke. Tumblr YOLO freegan thundercats fixie, craft beer shoreditch humblebrag. Ramps kinfolk roof party waistcoat ennui prism. Authentic edison bulb iceland letterpress yr.
  </Paragraph>
  <Paragraph>
    Lorem ipsum dolor amet gastropub meditation tumblr hashtag. Meggings cornhole prism +1 sriracha authentic la croix street art af typewriter poke. Tumblr YOLO freegan thundercats fixie, craft beer shoreditch humblebrag. Ramps kinfolk roof party waistcoat ennui prism. Authentic edison bulb iceland letterpress yr.
  </Paragraph>
</Box>
<Box fontWeight="medium">
 <Paragraph>
 Single-origin coffee hoodie edison bulb man braid la croix ethical fashion axe street art yr hammock. Asymmetrical roof party truffaut, forage fashion axe tacos gentrify narwhal raclette fingerstache. Hexagon austin affogato kale chips, jean shorts etsy sriracha banh mi forage waistcoat scenester next level small batch try-hard letterpress. Blue bottle taiyaki roof party helvetica selfies gochujang.
 </Paragraph>
  <Paragraph>
 Single-origin coffee hoodie edison bulb man braid la croix ethical fashion axe street art yr hammock. Asymmetrical roof party truffaut, forage fashion axe tacos gentrify narwhal raclette fingerstache. Hexagon austin affogato kale chips, jean shorts etsy sriracha banh mi forage waistcoat scenester next level small batch try-hard letterpress. Blue bottle taiyaki roof party helvetica selfies gochujang.
 </Paragraph>
</Box>
<Box fontWeight="bold">
  <Paragraph>
  Blog migas tbh man braid pitchfork vaporware, chicharrones selvage seitan subway tile jean shorts humblebrag post-ironic. Tattooed live-edge readymade, vice cold-pressed swag tousled lomo air plant. Edison bulb bitters actually banjo pok pok hammock single-origin coffee stumptown knausgaard direct trade pinterest yr locavore jean shorts.
  </Paragraph>
  <Paragraph>
  Blog migas tbh man braid pitchfork vaporware, chicharrones selvage seitan subway tile jean shorts humblebrag post-ironic. Tattooed live-edge readymade, vice cold-pressed swag tousled lomo air plant. Edison bulb bitters actually banjo pok pok hammock single-origin coffee stumptown knausgaard direct trade pinterest yr locavore jean shorts.
  </Paragraph>
</Box>

<Box fontWeight="regular">
  <Paragraph>
    Lorem ipsum dolor amet gastropub meditation tumblr hashtag. Meggings cornhole prism +1 sriracha authentic la croix street art af typewriter poke. Tumblr YOLO freegan thundercats fixie, craft beer shoreditch humblebrag. Ramps kinfolk roof party waistcoat ennui prism. Authentic edison bulb iceland letterpress yr.
  </Paragraph>
  <Paragraph>
    Lorem ipsum dolor amet gastropub meditation tumblr hashtag. Meggings cornhole prism +1 sriracha authentic la croix street art af typewriter poke. Tumblr YOLO freegan thundercats fixie, craft beer shoreditch humblebrag. Ramps kinfolk roof party waistcoat ennui prism. Authentic edison bulb iceland letterpress yr.
  </Paragraph>
</Box>
<Box fontWeight="medium">
 <Paragraph>
 Single-origin coffee hoodie edison bulb man braid la croix ethical fashion axe street art yr hammock. Asymmetrical roof party truffaut, forage fashion axe tacos gentrify narwhal raclette fingerstache. Hexagon austin affogato kale chips, jean shorts etsy sriracha banh mi forage waistcoat scenester next level small batch try-hard letterpress. Blue bottle taiyaki roof party helvetica selfies gochujang.
 </Paragraph>
  <Paragraph>
 Single-origin coffee hoodie edison bulb man braid la croix ethical fashion axe street art yr hammock. Asymmetrical roof party truffaut, forage fashion axe tacos gentrify narwhal raclette fingerstache. Hexagon austin affogato kale chips, jean shorts etsy sriracha banh mi forage waistcoat scenester next level small batch try-hard letterpress. Blue bottle taiyaki roof party helvetica selfies gochujang.
 </Paragraph>
</Box>
<Box fontWeight="bold">
  <Paragraph>
  Blog migas tbh man braid pitchfork vaporware, chicharrones selvage seitan subway tile jean shorts humblebrag post-ironic. Tattooed live-edge readymade, vice cold-pressed swag tousled lomo air plant. Edison bulb bitters actually banjo pok pok hammock single-origin coffee stumptown knausgaard direct trade pinterest yr locavore jean shorts.
  </Paragraph>
  <Paragraph>
  Blog migas tbh man braid pitchfork vaporware, chicharrones selvage seitan subway tile jean shorts humblebrag post-ironic. Tattooed live-edge readymade, vice cold-pressed swag tousled lomo air plant. Edison bulb bitters actually banjo pok pok hammock single-origin coffee stumptown knausgaard direct trade pinterest yr locavore jean shorts.
  </Paragraph>
</Box>

height

default: undefined

full

50%

<Flex justifyContent="space-between" style={{ height: 100 }}>
  <Box bgColor="primaryBase" height={3}>
    3
  </Box>
  <Box bgColor="secondaryBase" height={5}>
    5
  </Box>
  <Box bgColor="tertiaryBase" height="full">
    full
  </Box>
  <Box bgColor="redBase" height="50%">
    50%
  </Box>
</Flex>

<Flex justifyContent="space-between" style={{ height: 100 }}>
  <Box bgColor="primaryBase" height={3}>
    3
  </Box>
  <Box bgColor="secondaryBase" height={5}>
    5
  </Box>
  <Box bgColor="tertiaryBase" height="full">
    full
  </Box>
  <Box bgColor="redBase" height="50%">
    50%
  </Box>
</Flex>

left

default: undefined

Left: space 5

<Box position="relative" bgColor="primaryBase" width="full" height={3}>
  <Box position="absolute" left={5} bgColor="blueDark">
    Left: space 5
  </Box>
</Box>

<Box position="relative" bgColor="primaryBase" width="full" height={3}>
  <Box position="absolute" left={5} bgColor="blueDark">
    Left: space 5
  </Box>
</Box>

m

default: undefined

Margin around

<Box borderColor="primaryBase" borderWidth={1} borderStyle="solid">
  <Box m={3} bgColor="secondaryBase">
    Margin around
  </Box>
</Box>

<Box borderColor="primaryBase" borderWidth={1} borderStyle="solid">
  <Box m={3} bgColor="secondaryBase">
    Margin around
  </Box>
</Box>

mb

default: undefined

Margin bottom

<Box borderColor="primaryBase" borderWidth={1} borderStyle="solid">
  <Box mb={3} bgColor="secondaryBase">
    Margin bottom
  </Box>
</Box>

<Box borderColor="primaryBase" borderWidth={1} borderStyle="solid">
  <Box mb={3} bgColor="secondaryBase">
    Margin bottom
  </Box>
</Box>

ml

default: undefined

Margin left

<Box borderColor="primaryBase" borderWidth={1} borderStyle="solid">
  <Box ml={3} bgColor="secondaryBase">
    Margin left
  </Box>
</Box>

<Box borderColor="primaryBase" borderWidth={1} borderStyle="solid">
  <Box ml={3} bgColor="secondaryBase">
    Margin left
  </Box>
</Box>

mr

default: undefined

Margin right

<Box borderColor="primaryBase" borderWidth={1} borderStyle="solid">
  <Box mr={3} bgColor="secondaryBase">
    Margin right
  </Box>
</Box>

<Box borderColor="primaryBase" borderWidth={1} borderStyle="solid">
  <Box mr={3} bgColor="secondaryBase">
    Margin right
  </Box>
</Box>

mt

default: undefined

Margin top

<Box borderColor="primaryBase" borderWidth={1} borderStyle="solid">
  <Box mt={3} bgColor="secondaryBase">
    Margin top
  </Box>
</Box>

<Box borderColor="primaryBase" borderWidth={1} borderStyle="solid">
  <Box mt={3} bgColor="secondaryBase">
    Margin top
  </Box>
</Box>

mx

default: undefined

Margin left and right

<Box borderColor="primaryBase" borderWidth={1} borderStyle="solid">
  <Box mx={3} bgColor="secondaryBase">
    Margin left and right
  </Box>
</Box>

<Box borderColor="primaryBase" borderWidth={1} borderStyle="solid">
  <Box mx={3} bgColor="secondaryBase">
    Margin left and right
  </Box>
</Box>

my

default: undefined

Margin top and bottom

<Box borderColor="primaryBase" borderWidth={1} borderStyle="solid">
  <Box my={3} bgColor="secondaryBase">
    Margin top and bottom
  </Box>
</Box>

<Box borderColor="primaryBase" borderWidth={1} borderStyle="solid">
  <Box my={3} bgColor="secondaryBase">
    Margin top and bottom
  </Box>
</Box>

order

default: undefined

1 order 1

2 order 2

3 order 0

<Flex>
  <Box order={1} bgColor="primaryBase">
    1 order 1
  </Box>
  <Box order={2} bgColor="secondaryBase">
    2 order 2
  </Box>
  <Box order={0} bgColor="tertiaryBase">
    3 order 0
  </Box>
</Flex>

<Flex>
  <Box order={1} bgColor="primaryBase">
    1 order 1
  </Box>
  <Box order={2} bgColor="secondaryBase">
    2 order 2
  </Box>
  <Box order={0} bgColor="tertiaryBase">
    3 order 0
  </Box>
</Flex>

p

default: undefined

Padding around

<Box p={3} bgColor="primaryBase">
  Padding around
</Box>

<Box p={3} bgColor="primaryBase">
  Padding around
</Box>

pb

default: undefined

Padding bottom

<Box pb={3} bgColor="primaryBase">
  Padding bottom
</Box>

<Box pb={3} bgColor="primaryBase">
  Padding bottom
</Box>

pl

default: undefined

Padding left

<Box pl={3} bgColor="primaryBase">
  Padding left
</Box>

<Box pl={3} bgColor="primaryBase">
  Padding left
</Box>

position

default: undefined

relative

absolute

fixed (commented)

<Box position="relative" width="full" height="300px" bgColor="grey10">
  <Box bgColor="primaryBase" top={0} right={0} p={5} position="relative">
    relative
  </Box>
  <Box bgColor="secondaryBase" top={0} right={0} p={5} position="absolute">
    absolute
  </Box>
  <Box
    bgColor="tertiaryBase"
    top={0}
    right={0}
    p={5}
    // position="fixed"
  >
    fixed (commented)
  </Box>
</Box>

<Box position="relative" width="full" height="300px" bgColor="grey10">
  <Box bgColor="primaryBase" top={0} right={0} p={5} position="relative">
    relative
  </Box>
  <Box bgColor="secondaryBase" top={0} right={0} p={5} position="absolute">
    absolute
  </Box>
  <Box
    bgColor="tertiaryBase"
    top={0}
    right={0}
    p={5}
    // position="fixed"
  >
    fixed (commented)
  </Box>
</Box>

pr

default: undefined

Padding right

<Box pr={3} bgColor="primaryBase">
  Padding right
</Box>

<Box pr={3} bgColor="primaryBase">
  Padding right
</Box>

pt

default: undefined

Padding top

<Box pt={3} bgColor="primaryBase">
  Padding top
</Box>

<Box pt={3} bgColor="primaryBase">
  Padding top
</Box>

px

default: undefined

Padding left and right

<Box px={3} bgColor="primaryBase">
  Padding left and right
</Box>

<Box px={3} bgColor="primaryBase">
  Padding left and right
</Box>

py

default: undefined

Padding top and bottom

<Box py={3} bgColor="primaryBase">
  Padding top and bottom
</Box>

<Box py={3} bgColor="primaryBase">
  Padding top and bottom
</Box>

right

default: undefined

Right: space 5

<Box position="relative" bgColor="primaryBase" width="full" height={3}>
  <Box position="absolute" right={5} bgColor="secondaryBase">
    Right: space 5
  </Box>
</Box>

<Box position="relative" bgColor="primaryBase" width="full" height={3}>
  <Box position="absolute" right={5} bgColor="secondaryBase">
    Right: space 5
  </Box>
</Box>

textAlign

default: undefined

Controls the css text-align attribute.

<Box textAlign="left">
  <Paragraph>
    Lorem ipsum dolor amet gastropub meditation tumblr hashtag. Meggings cornhole prism +1 sriracha authentic la croix street art af typewriter poke. Tumblr YOLO freegan thundercats fixie, craft beer shoreditch humblebrag. Ramps kinfolk roof party waistcoat ennui prism. Authentic edison bulb iceland letterpress yr.
  </Paragraph>
    <Paragraph>
    Lorem ipsum dolor amet gastropub meditation tumblr hashtag. Meggings cornhole prism +1 sriracha authentic la croix street art af typewriter poke. Tumblr YOLO freegan thundercats fixie, craft beer shoreditch humblebrag. Ramps kinfolk roof party waistcoat ennui prism. Authentic edison bulb iceland letterpress yr.
  </Paragraph>
</Box>
<Box textAlign="center">
 <Paragraph>
 Single-origin coffee hoodie edison bulb man braid la croix ethical fashion axe street art yr hammock. Asymmetrical roof party truffaut, forage fashion axe tacos gentrify narwhal raclette fingerstache. Hexagon austin affogato kale chips, jean shorts etsy sriracha banh mi forage waistcoat scenester next level small batch try-hard letterpress. Blue bottle taiyaki roof party helvetica selfies gochujang.
 </Paragraph>
  <Paragraph>
 Single-origin coffee hoodie edison bulb man braid la croix ethical fashion axe street art yr hammock. Asymmetrical roof party truffaut, forage fashion axe tacos gentrify narwhal raclette fingerstache. Hexagon austin affogato kale chips, jean shorts etsy sriracha banh mi forage waistcoat scenester next level small batch try-hard letterpress. Blue bottle taiyaki roof party helvetica selfies gochujang.
 </Paragraph>
</Box>
<Box textAlign="right">
  <Paragraph>
  Blog migas tbh man braid pitchfork vaporware, chicharrones selvage seitan subway tile jean shorts humblebrag post-ironic. Tattooed live-edge readymade, vice cold-pressed swag tousled lomo air plant. Edison bulb bitters actually banjo pok pok hammock single-origin coffee stumptown knausgaard direct trade pinterest yr locavore jean shorts.
  </Paragraph>
   <Paragraph>
  Blog migas tbh man braid pitchfork vaporware, chicharrones selvage seitan subway tile jean shorts humblebrag post-ironic. Tattooed live-edge readymade, vice cold-pressed swag tousled lomo air plant. Edison bulb bitters actually banjo pok pok hammock single-origin coffee stumptown knausgaard direct trade pinterest yr locavore jean shorts.
  </Paragraph>
</Box>
<Box textAlign="justify">
  <Paragraph>
    Lorem ipsum dolor amet gastropub meditation tumblr hashtag. Meggings cornhole prism +1 sriracha authentic la croix street art af typewriter poke. Tumblr YOLO freegan thundercats fixie, craft beer shoreditch humblebrag. Ramps kinfolk roof party waistcoat ennui prism. Authentic edison bulb iceland letterpress yr.
  </Paragraph>
   <Paragraph>
    Lorem ipsum dolor amet gastropub meditation tumblr hashtag. Meggings cornhole prism +1 sriracha authentic la croix street art af typewriter poke. Tumblr YOLO freegan thundercats fixie, craft beer shoreditch humblebrag. Ramps kinfolk roof party waistcoat ennui prism. Authentic edison bulb iceland letterpress yr.
  </Paragraph>
</Box>

<Box textAlign="left">
  <Paragraph>
    Lorem ipsum dolor amet gastropub meditation tumblr hashtag. Meggings cornhole prism +1 sriracha authentic la croix street art af typewriter poke. Tumblr YOLO freegan thundercats fixie, craft beer shoreditch humblebrag. Ramps kinfolk roof party waistcoat ennui prism. Authentic edison bulb iceland letterpress yr.
  </Paragraph>
    <Paragraph>
    Lorem ipsum dolor amet gastropub meditation tumblr hashtag. Meggings cornhole prism +1 sriracha authentic la croix street art af typewriter poke. Tumblr YOLO freegan thundercats fixie, craft beer shoreditch humblebrag. Ramps kinfolk roof party waistcoat ennui prism. Authentic edison bulb iceland letterpress yr.
  </Paragraph>
</Box>
<Box textAlign="center">
 <Paragraph>
 Single-origin coffee hoodie edison bulb man braid la croix ethical fashion axe street art yr hammock. Asymmetrical roof party truffaut, forage fashion axe tacos gentrify narwhal raclette fingerstache. Hexagon austin affogato kale chips, jean shorts etsy sriracha banh mi forage waistcoat scenester next level small batch try-hard letterpress. Blue bottle taiyaki roof party helvetica selfies gochujang.
 </Paragraph>
  <Paragraph>
 Single-origin coffee hoodie edison bulb man braid la croix ethical fashion axe street art yr hammock. Asymmetrical roof party truffaut, forage fashion axe tacos gentrify narwhal raclette fingerstache. Hexagon austin affogato kale chips, jean shorts etsy sriracha banh mi forage waistcoat scenester next level small batch try-hard letterpress. Blue bottle taiyaki roof party helvetica selfies gochujang.
 </Paragraph>
</Box>
<Box textAlign="right">
  <Paragraph>
  Blog migas tbh man braid pitchfork vaporware, chicharrones selvage seitan subway tile jean shorts humblebrag post-ironic. Tattooed live-edge readymade, vice cold-pressed swag tousled lomo air plant. Edison bulb bitters actually banjo pok pok hammock single-origin coffee stumptown knausgaard direct trade pinterest yr locavore jean shorts.
  </Paragraph>
   <Paragraph>
  Blog migas tbh man braid pitchfork vaporware, chicharrones selvage seitan subway tile jean shorts humblebrag post-ironic. Tattooed live-edge readymade, vice cold-pressed swag tousled lomo air plant. Edison bulb bitters actually banjo pok pok hammock single-origin coffee stumptown knausgaard direct trade pinterest yr locavore jean shorts.
  </Paragraph>
</Box>
<Box textAlign="justify">
  <Paragraph>
    Lorem ipsum dolor amet gastropub meditation tumblr hashtag. Meggings cornhole prism +1 sriracha authentic la croix street art af typewriter poke. Tumblr YOLO freegan thundercats fixie, craft beer shoreditch humblebrag. Ramps kinfolk roof party waistcoat ennui prism. Authentic edison bulb iceland letterpress yr.
  </Paragraph>
   <Paragraph>
    Lorem ipsum dolor amet gastropub meditation tumblr hashtag. Meggings cornhole prism +1 sriracha authentic la croix street art af typewriter poke. Tumblr YOLO freegan thundercats fixie, craft beer shoreditch humblebrag. Ramps kinfolk roof party waistcoat ennui prism. Authentic edison bulb iceland letterpress yr.
  </Paragraph>
</Box>

top

default: undefined

Top: space 5

<Box position="relative" bgColor="primaryBase" width="full" height={3}>
  <Box position="absolute" top={5} bgColor="secondaryBase">
    Top: space 5
  </Box>
</Box>

<Box position="relative" bgColor="primaryBase" width="full" height={3}>
  <Box position="absolute" top={5} bgColor="secondaryBase">
    Top: space 5
  </Box>
</Box>

width

default: undefined

"full"

"70%"

"300px"

5 (token value)

<Box width="full" bgColor="primaryBase">
  "full"
</Box>
<Box width="70%" bgColor="secondaryBase">
  "70%"
</Box>
<Box width="300px" bgColor="secondaryBase">
  "300px"
</Box>
<Box width={11} bgColor="tertiaryBase">
  5 (token value)
</Box>

<Box width="full" bgColor="primaryBase">
  "full"
</Box>
<Box width="70%" bgColor="secondaryBase">
  "70%"
</Box>
<Box width="300px" bgColor="secondaryBase">
  "300px"
</Box>
<Box width={11} bgColor="tertiaryBase">
  5 (token value)
</Box>