.pulse Introduction Core values Principles Design tips Components

Container

Prop name	Type	Default	Description
px	union	[space.s, space.m]	One of: array, number, string
mx	union	auto	One of: array, number, string
maxWidth	string	breakpoints[2]

Styled system prop names

px, mx, maxWidth, m, mt, mr, mb, ml, my, p, pt, pr, pb, pl, py, width, fontSize, color, bg, fontFamily, textAlign, lineHeight, fontWeight, fontStyle, letterSpacing, display, minWidth, height, maxHeight, minHeight, ratio, verticalAlign, alignItems, justifyContent, flexWrap, flexDirection, flex, alignContent, justifyItems, justifySelf, alignSelf, order, flexBasis, gridGap, gridRowGap, gridColumnGap, gridColumn, gridRow, gridArea, gridAutoFlow, gridAutoRows, gridAutoColumns, gridTemplateRows, gridTemplateColumns, gridTemplateAreas, background, backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat, borderRadius, borderColor, border, borderTop, borderRight, borderBottom, borderLeft, boxShadow, opacity, overflow, position, zIndex, top, right, bottom, left

auto

<Container maxWidth="50%" px="0">
  <Row>
    <Col><Box bg="grayscale.400">auto</Box></Col>
    <Col><Box bg="grayscale.400">auto</Box></Col>
  </Row>
</Container>