Box

Interface of Box
🏗 Coming Soon

<Box /> is a low level component whose primary purpose is to provide a utility for easily controlling the spacing around elements in a consistent way using the spacing values.

Spacing with Box

The <Box /> component allows you to control it's margin and padding properties for a chosen side.

Using spacing on a <Box /> is like following a recipe, you select:

  • The type of spacing, margin or padding
  • The side to apply it to
  • The amount of space to apply
1. Type
  • mMargin
  • pPadding
2. Side(optional)
  • -All(default)
  • tTop
  • rRight
  • bBottom
  • lLeft
  • xLeft & Right
  • yTop & Bottom
3. Amount
  • xxsmall4px
  • xsmall8px
  • small12px
  • medium16px
  • large20px
  • xlarge32px
  • xxlarge40px
  • xxxlarge60px

To get the correct spacing you choose one value from each of the above columns. For example, to get 8px of margin on the right side you would do. <Box mr="small"> or if you wanted 40px of padding on all sides you would do <Box p="xxlarge">.

You can combine different spacing recipes to apply spacing to multiple sides at one time. For example if you wanted 16px of margin on the left and 20px of padding on the top you would do <Box ml="medium" pt="large">

Spacing Examples

Below are a few more examples of building a spacing recipe to help clarify how to use spacing with the <Box> component.

Margin All Sides - Large
Padding left - Extra Small
Padding left - Medium
Margin Top & Bottom - XXXLarge, Margin left - XLarge
Padding Bottom - XXLarge, Margin left - XXXLarge

Spacing Responsively

Any one of the spacing properties can be passed an array of spacing sizes that will then apply at different breakpoints. There are 5 breakpoints slots that you can target. Here is an example of what that looks like.

My padding on the left changes with breakpoints

Customizing a Box

Boxes provide a low-level customization interface which allows them to have different display properties, heights, widths, background colors, positioning, etc. Here are some examples:

Customized Display

I'm inline.
I'm also inline.

Heights and Widths

I'm 100px tall.
I'm 50px tall.

Background Colors

Boxes can reference colors from the theme object, pulling any color on the theme's colors property.

My background is positive.

Positioning

Boxes can set positioning when needed.

I'm absolutely positioned!

Borders

Boxes can have borders.

I've got borders.