Box

Use this component as a layout primitive to add margin, padding, and colors to content.

import { Box } from '@marvelapp/ui';

Boom

<Box bg="steel" color="white" p={50}>
  Boom
</Box>

Props (Layout)

Prop

Type

Default

display

array

string

number

–

height

array

string

number

–

maxHeight

array

string

number

–

maxWidth

array

string

number

–

minHeight

array

string

number

–

minWidth

array

string

number

–

overflow

array

string

number

–

overflowX

visible

hidden

scroll

auto

initial

inherit

visible

overflowY

visible

hidden

scroll

auto

initial

inherit

visible

size

array

string

number

–

transform

string

–

transformOrigin

string

–

verticalAlign

array

string

number

–

width

array

string

number

–

Props (Color)

Prop

Type

Default

backgroundColor

array

string

number

–

array

string

number

–

color

array

string

number

–

fill

array

string

number

–

hoverBg

array

string

number

–

hoverColor

array

string

number

–

hoverFill

array

string

number

–

opacity

array

string

number

–

Props (Typography)

Prop

Type

Default

fontFamily

array

string

number

–

fontSize

array

string

number

–

fontStyle

array

string

number

–

fontWeight

array

string

number

–

letterSpacing

array

string

number

–

lineHeight

array

string

number

–

textAlign

array

string

number

–

textTransform

string

–

whiteSpace

normal

nowrap

pre

pre-line

pre-wrap

initial

inherit

normal

wordWrap

string

–

Props (Space)

Prop

Type

Default

array

string

number

–

margin

array

string

number

–

marginBottom

array

string

number

–

marginLeft

array

string

number

–

marginRight

array

string

number

–

marginTop

array

string

number

–

marginX

array

string

number

–

marginY

array

string

number

–

array

string

number

–

array

string

number

–

array

string

number

–

array

string

number

–

array

string

number

–

array

string

number

–

array

string

number

–

padding

array

string

number

–

paddingBottom

array

string

number

–

paddingLeft

array

string

number

–

paddingRight

array

string

number

–

paddingTop

array

string

number

–

paddingX

array

string

number

–

paddingY

array

string

number

–

array

string

number

–

array

string

number

–

array

string

number

–

array

string

number

–

array

string

number

–

array

string

number

–

Props (Flexbox)

Prop

Type

Default

alignContent

array

string

number

–

alignItems

array

string

number

–

alignSelf

array

string

number

–

flex

array

string

number

–

flexBasis

array

string

number

–

flexDirection

array

string

number

–

flexGrow

array

string

number

–

flexShrink

array

string

number

–

flexWrap

array

string

number

–

justifyContent

array

string

number

–

justifyItems

array

string

number

–

justifySelf

array

string

number

–

order

array

string

number

–

Props (Grid)

Prop

Type

Default

gridArea

array

string

number

–

gridAutoColumns

array

string

number

–

gridAutoFlow

array

string

number

–

gridAutoRows

array

string

number

–

gridColumn

array

string

number

–

gridColumnGap

array

string

number

–

gridGap

array

string

number

–

gridRow

array

string

number

–

gridRowGap

array

string

number

–

gridTemplateAreas

array

string

number

–

gridTemplateColumns

array

string

number

–

gridTemplateRows

array

string

number

–

Props (Border)

Prop

Type

Default

border

array

string

number

–

borderBottom

array

string

number

–

borderBottomLeftRadius

array

string

number

–

borderBottomRightRadius

array

string

number

–

borderColor

array

string

number

–

borderLeft

array

string

number

–

borderRadius

array

string

number

–

borderRight

array

string

number

–

borderStyle

array

string

number

–

borderTop

array

string

number

–

borderTopLeftRadius

array

string

number

–

borderTopRightRadius

array

string

number

–

borderWidth

array

string

number

–

borderX

array

string

number

–

borderY

array

string

number

–

hoverBorderColor

array

string

number

–

Props (Position)

Prop

Type

Default

bottom

array

string

number

–

left

array

string

number

–

position

array

string

number

–

right

array

string

number

–

top

array

string

number

–

zIndex

array

string

number

–

Props (Shadow)

Prop

Type

Default

boxShadow

array

string

number

–

hoverBoxShadow

array

string

number

–

textShadow

array

string

number

–

Props (Opacity)

Prop

Type

Default

hoverOpacity

number

–

Props (Other)

Prop

Type

Default

cursor

alias

all-scroll

auto

cell

context-menu

col-resize

copy

crosshair

default

e-resize

ew-resize

grab

grabbing

help

move

n-resize

ne-resize

nesw-resize

ns-resize

nw-resize

nwse-resize

no-drop

none

not-allowed

pointer

progress

row-resize

s-resize

se-resize

sw-resize

text

URL

vertical-text

w-resize

wait

zoom-in

zoom-out

initial

inherit

auto

pointerEvents

auto

none

initial

inherit

auto

transition

string

–

userSelect

auto

none

text

all

auto