Box

Import from @falcon/ui-kit/dist/legacy, not @falcon/ui-kit.

Box renders a polymorphic element with Falcon’s legacy responsive sx style utilities.

Code

<Box
  sx={{
    display: "flex",
    flexDirection: "column",
    gap: 8,
  }}
>
  <Box>
    Media: <Box>default</Box>
    <Box sx={{ display: { default: "none", xl: "inline" } }}>, xl</Box>
    <Box sx={{ display: { default: "none", lg: "inline" } }}>, lg</Box>
    <Box sx={{ display: { default: "none", md: "inline" } }}>, md</Box>
    <Box sx={{ display: { default: "none", sm: "inline" } }}>, sm</Box>
    <Box sx={{ display: { default: "none", xs: "inline" } }}>, xs</Box>
    <Box sx={{ display: { default: "none", xxs: "inline" } }}>, xxs</Box>
    <Box sx={{ display: { default: "none", print: "inline" } }}>, print</Box>
  </Box>

  <Box
    sx={{
      display: "flex",
      flexDirection: { xs: "column" },
      gap: { default: 128, xl: 64, lg: 32, md: 16, sm: 8, xxs: 4 },
    }}
  >
    <Box style={{ background: "red" }}>A</Box>

    <Box style={{ background: "lightgreen" }} sx={{ flexGrow: 1 }}>
      B
    </Box>

    <Box style={{ background: "cyan" }} sx={{ flexGrow: 2 }}>
      C
    </Box>

    <Box style={{ background: "yellow" }} sx={{ flexGrow: 4 }}>
      D
    </Box>

    <Box style={{ background: "pink" }} sx={{ flexGrow: 8 }}>
      E
    </Box>

    <Box style={{ background: "magenta" }} sx={{ flexGrow: 16 }}>
      F
    </Box>
  </Box>
</Box>

API

Box

Name	Type/Description
as	ElementType<any, keyof IntrinsicElements> | undefined
sx	StyleProps | undefined