Skip to content

Box

Status: Stable

<Box> is the foundational component of Currency. It exposes a responsive, props-based API for applying styles from @nerdwallet/base-styles      to components.

Variants

Simple box

By default, a <Box> without any props renders a simple <div>. You can render with a different element with the component prop.

Renders as a div
Renders as a span

Background

You can set the background color to any Currency color.

Blue background

Padding and margin

Padding and margin from our spacing scale can be controlled directly with props.

Padding

Vertical padding

Horizontal padding

Responsive props

All props support "responsive" values that differ depending on the screen size. Resize your browser viewport to see it in action!

Responsive padding

Props

<Box>

children

ReactNode

component

"a" | "abbr" | "address" | "animate" | "animateMotion" | "animateTransform" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "circle" | "cite" | "clipPath" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "defs" | "del" | "desc" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "ellipse" | "em" | "embed" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "fieldset" | "figcaption" | "figure" | "filter" | "footer" | "foreignObject" | "form" | "g" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "image" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "line" | "linearGradient" | "link" | "main" | "map" | "mark" | "marker" | "mask" | "menu" | "menuitem" | "meta" | "metadata" | "meter" | "mpath" | "nav" | "noindex" | "noscript" | "object" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "path" | "pattern" | "picture" | "polygon" | "polyline" | "pre" | "progress" | "q" | "radialGradient" | "rect" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "stop" | "strong" | "style" | "sub" | "summary" | "sup" | "svg" | "switch" | "symbol" | "table" | "tbody" | "td" | "template" | "text" | "textPath" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "tspan" | "u" | "ul" | "use" | "var" | "video" | "view" | "wbr" | "webview" | ComponentClass<any, any> | FunctionComponent<any>

alignContent

ResponsiveProp<"center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "stretch">

alignItems

ResponsiveProp<"baseline" | "center" | "flex-end" | "flex-start" | "stretch">

alignSelf

ResponsiveProp<"baseline" | "center" | "flex-end" | "flex-start" | "stretch">

backgroundColor

ResponsiveProp<"blue" | "blue-dark" | "blue-light" | "blue-lighter" | "blue-lightest" | "green" | "green-dark" | "green-light" | "green-lighter" | "green-lightest" | "neutral-dark" | "neutral-darker" | "neutral-darkest" | "neutral-light" | "neutral-lighter" | "neutral-lightest" | "nw-green" | "red" | "red-dark" | "red-light" | "red-lighter" | "red-lightest" | "teal" | "teal-light" | "transparent" | "white" | "yellow" | "yellow-dark" | "yellow-light" | "yellow-lighter" | "yellow-lightest">

borderRadius

ResponsiveProp<0 | 1 | 2 | "0" | "1" | "2">

border

ResponsiveProp<0 | 1 | 2 | 3 | "0" | "1" | "2" | "3">

borderColor

ResponsiveProp<"blue" | "blue-dark" | "blue-light" | "blue-lighter" | "blue-lightest" | "green" | "green-dark" | "green-light" | "green-lighter" | "green-lightest" | "neutral-dark" | "neutral-darker" | "neutral-darkest" | "neutral-light" | "neutral-lighter" | "neutral-lightest" | "nw-green" | "red" | "red-dark" | "red-light" | "red-lighter" | "red-lightest" | "teal" | "teal-light" | "transparent" | "white" | "yellow" | "yellow-dark" | "yellow-light" | "yellow-lighter" | "yellow-lightest">

borderTop

ResponsiveProp<0 | 1 | 2 | 3 | "0" | "1" | "2" | "3">

borderBottom

ResponsiveProp<0 | 1 | 2 | 3 | "0" | "1" | "2" | "3">

borderLeft

ResponsiveProp<0 | 1 | 2 | 3 | "0" | "1" | "2" | "3">

borderRight

ResponsiveProp<0 | 1 | 2 | 3 | "0" | "1" | "2" | "3">

className

string | number | boolean | ClassDictionary | ClassArray

display

ResponsiveProp<"block" | "flex" | "grid" | "initial" | "inline" | "inline-block" | "inline-flex" | "none" | "table" | "table-cell" | "table-column" | "table-row">

flexDirection

ResponsiveProp<"column" | "row">

flexWrap

ResponsiveProp<"nowrap" | "wrap">

gridGap

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5">

height

ResponsiveProp<100 | "100">

justifyContent

ResponsiveProp<"center" | "flex-end" | "flex-start" | "space-around" | "space-between">

margin

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5" | "auto">

marginX

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5" | "auto">

marginY

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5" | "auto">

marginTop

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5" | "auto">

marginBottom

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5" | "auto">

marginLeft

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5" | "auto">

marginRight

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5" | "auto">

maxWidth

ResponsiveProp<10 | 20 | 25 | 30 | 40 | 50 | 60 | 70 | 75 | 80 | 90 | 100 | "10" | "100" | "20" | "25" | "30" | "40" | "50" | "60" | "70" | "75" | "80" | "90" | "container" | "one-thirds" | "prose" | "prose-narrow" | "prose-wide" | "two-thirds">

opacity

ResponsiveProp<0 | 50 | 100 | "0" | "100" | "50">

padding

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5">

paddingX

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5">

paddingY

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5">

paddingTop

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5">

paddingBottom

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5">

paddingLeft

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5">

paddingRight

ResponsiveProp<0 | 1 | 2 | 3 | 4 | 5 | "0" | "1" | "2" | "3" | "3-half" | "4" | "5">

position

ResponsiveProp<"absolute" | "fixed" | "relative" | "static" | "sticky">

shadow

ResponsiveProp<1 | 2 | 3 | "1" | "2" | "3">

userSelect

ResponsiveProp<"none">

width

ResponsiveProp<0 | 10 | 20 | 25 | 30 | 40 | 50 | 60 | 70 | 75 | 80 | 90 | 100 | "0" | "10" | "100" | "20" | "25" | "30" | "40" | "50" | "60" | "70" | "75" | "80" | "90" | "auto" | "one-thirds" | "two-thirds">

ref

(instance: any) => void | RefObject<any>