@ag.ds-next/box

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

Usage no npm install needed!

<script type="module">
  import agDsNextBox from 'https://cdn.skypack.dev/@ag.ds-next/box';
</script>

README

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>