@ag.ds-next/box

---

title: Box description: A set of primitive layout components group: Foundations

This package includes the components <Box />, <Flex /> and <Stack />.

Box

<Box
	palette="dark"
	background="body"
	color="text"
	fontFamily="body"
	border
	padding={{ xs: 1, xl: 4 }}
	rounded
>
	A Box example
</Box>

Flex

Same principles as Box, but extended with CSS Flexbox properties.

<Flex gap={1} justifyContent="space-between" alignItems="flex-start">
	<Box background="shade" padding={1} />
	<Box background="shade" height="64px" padding={1} />
	<Box background="shade" padding={1} />
</Flex>

Stack

Use to distribute items vertically with even spacing.

<Stack gap={1}>
	<Box background="shade" padding={1} />
	<Box background="shade" padding={1} />
	<Box background="shade" padding={1} />
</Stack>