Box

Box description.

Props

Box properties

Property	Description	Type	Default
center	Should the children of the box be centered?	`boolean`	false
bg	Set box background color	`string`
debug	Highlight box on the screen, useful for debug purposes	`boolean`	false
width	What width should the box be?	`string`, `number`
height	Set the box height	`string`, `number`
pt	Set box top padding	`number`
pb	Set box bottom padding	`number`
pl	Set box left padding	`number`
pr	Set box right padding	`number`
px	Set box padding on the horizontal axis	`number`
py	Set box padding on the vertical axis	`number`
pd	Set box padding on the both axis	`number`
mt	Set box top margin	`number`
mb	Set box bottom margin	`number`
ml	Set box left margin	`number`
mr	Set box right margin	`number`
mx	Set box margin on the horizontal axis	`number`
my	Set box margin on the vertical axis	`number`
mg	Set box margin on the both axis	`number`
overflow	Set the box overflow	`visible` `hidden` `scroll` `scrollX` `scrollY` `auto`	auto
position	Set box position	`static` `absolute` `relative` `fixed`	-
role	Set the box ARIA role	`article` `aside` `details` `div` `figcaption` `figure` `footer` and more	auto

Usage

Basic Box

Dark Mode

camara.space

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={600}>
      <Box height={100} bg="#82CAFF" />
      <Flex justifyContent="space-between">
        <Box height={100} width={200} bg="#82CAFF" />
        <Box height={100} width={300} bg="#1589FF" />
        <Box height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={600}>
      <Box height={100} bg="#82CAFF" />
      <Flex justifyContent="space-between">
        <Box height={100} width={200} bg="#82CAFF" />
        <Box height={100} width={300} bg="#1589FF" />
        <Box height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

Center

Dark Mode

camara.space

woman in orange knit cap and blue jacket

import { Box, Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width="40%" bg="#1589FF">
      <Box center py={32} px={32}>
        <Image
          width="100%"
          src="https://source.unsplash.com/V_WBdOLOgJU/300x300"
          alt="woman in orange knit cap and blue jacket"
        />
      </Box>
    </Box>
  </BrowserWindow>
);

import { Box, Flex, Image, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width="40%" bg="#1589FF">
      <Box center py={32} px={32}>
        <Image
          width="100%"
          src="https://source.unsplash.com/V_WBdOLOgJU/300x300"
          alt="woman in orange knit cap and blue jacket"
        />
      </Box>
    </Box>
  </BrowserWindow>
);

Debug

Dark Mode

camara.space

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box debug p={16} center width={500}>
      <Box debug m={8} border height={100} bg="#82CAFF" />
      <Flex justifyContent="space-between">
        <Box debug m={8} border height={100} width={200} bg="#82CAFF" />
        <Box debug m={8} height={100} width={300} bg="#1589FF" />
        <Box debug m={8} height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box debug m={8} border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box debug p={16} center width={500}>
      <Box debug m={8} border height={100} bg="#82CAFF" />
      <Flex justifyContent="space-between">
        <Box debug m={8} border height={100} width={200} bg="#82CAFF" />
        <Box debug m={8} height={100} width={300} bg="#1589FF" />
        <Box debug m={8} height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box debug m={8} border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

Padding

Top, Bottom, Left and Right Padding

Dark Mode

camara.space

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={500}>
      <Box border height={100} bg="#82CAFF" />
      <Flex justifyContent="space-between">
        <Box border height={100} width={200} bg="#82CAFF" />
        <Box
          pt={16}
          pb={16}
          pl={16}
          pr={16}
          height={100}
          width={300}
          bg="#1589FF"
        />
        <Box height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={500}>
      <Box border height={100} bg="#82CAFF" />
      <Flex justifyContent="space-between">
        <Box border height={100} width={200} bg="#82CAFF" />
        <Box
          pt={16}
          pb={16}
          pl={16}
          pr={16}
          height={100}
          width={300}
          bg="#1589FF"
        />
        <Box height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

Horizontal and Vertical Padding

Dark Mode

camara.space

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={500}>
      <Box border height={100} bg="#82CAFF" />
      <Flex justify="space-between">
        <Box border height={100} width={200} bg="#82CAFF" />
        <Box px={16} py={40} height={100} width={300} bg="#1589FF" />
        <Box height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={500}>
      <Box border height={100} bg="#82CAFF" />
      <Flex justify="space-between">
        <Box border height={100} width={200} bg="#82CAFF" />
        <Box px={16} py={40} height={100} width={300} bg="#1589FF" />
        <Box height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

Margin

Top, Bottom, Left and Right Margin

Dark Mode

camara.space

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={500}>
      <Box border height={100} bg="#82CAFF" />
      <Flex justify="space-between">
        <Box py={16} border height={100} width={200} bg="#82CAFF" />
        <Box
          mt={16}
          mb={16}
          ml={16}
          mr={16}
          height={100}
          width={300}
          bg="#1589FF"
        />
        <Box py={16} height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={500}>
      <Box border height={100} bg="#82CAFF" />
      <Flex justify="space-between">
        <Box py={16} border height={100} width={200} bg="#82CAFF" />
        <Box
          mt={16}
          mb={16}
          ml={16}
          mr={16}
          height={100}
          width={300}
          bg="#1589FF"
        />
        <Box py={16} height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

Horizontal and Vertical Margin

Dark Mode

camara.space

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={500}>
      <Box border height={100} bg="#82CAFF" />
      <Flex justify="space-between">
        <Box py={16} border height={100} width={200} bg="#82CAFF" />
        <Box mx={32} my={16} height={100} width={300} bg="#1589FF" />
        <Box py={16} height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

import { Box, Flex, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box center width={500}>
      <Box border height={100} bg="#82CAFF" />
      <Flex justify="space-between">
        <Box py={16} border height={100} width={200} bg="#82CAFF" />
        <Box mx={32} my={16} height={100} width={300} bg="#1589FF" />
        <Box py={16} height={100} width={200} bg="#82CAFF" />
      </Flex>
      <Box border height={100} bg="#82CAFF" />
    </Box>
  </BrowserWindow>
);

Box

Props

Usage

Basic Box

Center

Debug

Padding

Top, Bottom, Left and Right Padding

Horizontal and Vertical Padding

Margin

Top, Bottom, Left and Right Margin

Horizontal and Vertical Margin

On this page