Box

Padding

The padding prop applies equal padding on all sides using the spacing token scale.

Content with padding "4" (1rem)

import { Box } from '@eekodigital/raster';

<Box padding="4">
  Content with padding "4" (1rem)
</Box>

Directional padding

Use paddingX and paddingY for horizontal and vertical padding independently.

paddingX="6" paddingY="3"

<Box paddingX="6" paddingY="3">
  Different horizontal and vertical padding
</Box>

Semantic element

Use the as prop to render as any HTML element.

Rendered as a <section> element

<Box as="section" padding="4">
  Rendered as a section element
</Box>

Props

Prop	Type	Default	Description
padding	”1”–“24”	—	Padding on all sides (spacing token).
paddingX	”1”–“24”	—	Horizontal padding (spacing token).
paddingY	”1”–“24”	—	Vertical padding (spacing token).
as	ElementType	”div”	Rendered HTML element.
className	string	—