@elemental-ui-alpha/box

Box

import { Box } from '@elemental-ui-alpha/box';

Style Props

Background / Foreground

Target the background color and foreground color:

<Box background="shade" foreground="accent">
  accent
</Box>

Padding

The padding keys allow targeting each side as well as the x-axis and y-axis.

• padding
• paddingTop
• paddingRight
• paddingBottom
• paddingLeft
• paddingX padding-left and padding-right
• paddingY padding-top and padding-bottom

<Box padding="medium" background="shade">
  padding
</Box>

Margin

The margin keys allow targeting each side as well as the x-axis and y-axis.

• margin
• marginTop
• marginRight
• marginBottom
• marginLeft
• marginX margin-left and margin-right
• marginY margin-top and margin-bottom

<Box margin="medium" background="shade">
  margin
</Box>

Rounding

The rounding keys allow targeting each box side.

• rounding border-radius
• roundingBottom border-bottom-left-radius and border-bottom-right-radius
• roundingLeft border-bottom-left-radius and border-top-left-radius
• roundingRight border-bottom-right-radius and border-top-right-radius
• roundingTop border-bottom-left-radius and border-bottom-right-radius

The rounding values don't follow the traditional t-shirt sizes.

• none
• small
• medium
• large

<Box rounding="small" background="shade">
  rounding
</Box>

Text Align

Align the text within a box:

• textAlign text-align CSS property

The available values match the CSS property:

• left
• right
• center
• justify
• start
• end

<Box textAlign="center" padding="small" background="shade">
  centered text
</Box>

Height

Set the height of a box:

• height height CSS property

<Box height={100} background="shade">
  100px tall
</Box>

Width

Set the width of a box:

• width width CSS property

<Box width={200} background="shade">
  200px wide
</Box>

Combined

Mix and match style properties to achieve the desired aesthetic.

<Box
  background="shade"
  foreground="action"
  paddingX="large"
  paddingY="medium"
  margin="small"
  rounding="small"
  width={200}
>
  combined
</Box>

Responsive Props

Instead of manually managing media queries and adding nested style objects throughout a code base, we offer a convenient shorthand syntax for adding responsive styles with a mobile-first approach.

Each of the above style props accepts a value or array of values. To skip certain breakpoints, you can pass null to any position in the array to avoid generating unnecessary CSS.

While this approach has been widely adopted with great success, much like any new idea, it can seem odd or off-putting at first. We recommend giving it a chance.

<Box background="shade" padding={['small', null, 'medium', 'none', 'large']}>
  responsive props
</Box>