Float

1
import { Box, Circle, Float } from "styled-system/jsx";
2

3
export const FloatBasic = () => (
4
  <Box
5
    bgColor="page.surface.initial"
6
    h="80px"
7
    pos="relative"
8
    w="80px"
9
  >
10
    <Float>
11
      <Circle size="5" bg="danger.surface.initial" color="danger.text.initial">
12
        3
13
      </Circle>
14
    </Float>
15
  </Box>
16
)

1
import { Box, Float } from "styled-system/jsx";

1
<Box position="relative">
2
  <Float>
3
    <div />
4
  </Float>
5
</Box>

1
import { Box, Circle, Float, HStack, VStack } from "styled-system/jsx";
2
import { For } from "@cerberus/react";
3

4
export const FloatWithPlacements = () => (
5
  <HStack gap="xl" wrap="wrap">
6
    <For each={placements}>
7
      {(placement) => (
8
        <VStack key={placement} gap="3">
9
          <p>{placement}</p>
10
          <Box
11
            bgColor="page.surface.100"
12
            position="relative"
13
            height="80px"
14
            width="80px"
15
          >
16
            <Float placement={placement}>
17
              <Circle size="5" bg="red" color="white">
18
                3
19
              </Circle>
20
            </Float>
21
          </Box>
22
        </VStack>
23
      )}
24
    </For>
25
  </HStack>
26
)
27

28
const placements = [
29
  "bottom-end",
30
  "bottom-start",
31
  "top-end",
32
  "top-start",
33
  "bottom-center",
34
  "top-center",
35
  "middle-center",
36
  "middle-end",
37
  "middle-start",
38
] as const

1
import { Box, Circle, Float } from "styled-system/jsx";
2

3
export const FloatWithOffsetX = () => (
4
  <Box position="relative" w="80px" h="80px" bg="page.bg.initial">
5
    <Float offsetX="-4">
6
      <Circle size="5" bg="red" color="white">
7
        3
8
      </Circle>
9
    </Float>
10
  </Box>
11
)

1
import { Box, Circle, Float } from "styled-system/jsx";
2

3
export const FloatWithOffsetY = () => (
4
  <Box position="relative" w="80px" h="80px" bg="page.bg.initial">
5
    <Float offsetY="-4">
6
      <Circle size="5" bg="red" color="white">
7
        3
8
      </Circle>
9
    </Float>
10
  </Box>
11
)

1
import { Box, Circle, Float } from "styled-system/jsx";
2

3
export const FloatWithOffset = () => (
4
  <Box position="relative" w="80px" h="80px" bg="page.bg.initial">
5
    <Float offset="-4">
6
      <Circle size="5" bg="red" color="white">
7
        3
8
      </Circle>
9
    </Float>
10
  </Box>
11
)

1
import { Box, Float } from "styled-system/jsx";
2
import { Avatar } from "@cerberus/react";
3

4
export const FloatWithAvatar = () => (
5
  <Box position="relative" w="80px" h="80px" bg="page.bg.initial">
6
    <Float>
7
      <Avatar
8
        src="https://avatars.githubusercontent.com/u/12345678?v=4"
9
      />
10
    </Float>
11
  </Box>
12
)