Bleed

1
import { Bleed, Box, VStack } from "styled-system/jsx"
2
import { Text } from "@cerberus/react"
3
import { DecorativeBox } from "compositions/lib/decorative-box"
4

5
const Demo = () => {
6
  return (
7
    <Box padding="10" rounded="sm" borderWidth="1px">
8
      <Bleed inline="10">
9
        <DecorativeBox height="20">Bleed</DecorativeBox>
10
      </Bleed>
11

12
      <VStack mt="6">
13
        <Text as="h1" size="md">Some Heading</Text>
14
        <Text>This is some descriptive content of the heading.</Text>
15
      </VStack>
16
    </Box>
17
  )
18
}

1
import { Bleed } from "styled-system/jsx";

1
<Bleed>
2
  <div />
3
</Bleed>

1
import { Bleed, Box } from "styled-system/jsx"
2
import { DecorativeBox } from "compositions/lib/decorative-box"
3

4
const Demo = () => {
5
  return (
6
    <Box padding="10" rounded="sm" borderWidth="1px">
7
      <Bleed block="10">
8
        <DecorativeBox height="20">Bleed</DecorativeBox>
9
      </Bleed>
10
    </Box>
11
  )
12
}

1
import { Bleed, Box, VStack } from "styled-system/jsx"
2
import { DecorativeBox } from "compositions/lib/decorative-box"
3

4
const Demo = () => {
5
  return (
6
    <VStack gap="8">
7
      <Box padding="8" rounded="sm" borderWidth="1px">
8
        <Bleed inlineStart="8">
9
          <DecorativeBox height="8">inlineStart</DecorativeBox>
10
        </Bleed>
11
      </Box>
12

13
      <Box padding="8" rounded="sm" borderWidth="1px">
14
        <Bleed inlineEnd="8">
15
          <DecorativeBox height="8">inlineEnd</DecorativeBox>
16
        </Bleed>
17
      </Box>
18

19
      <Box padding="8" rounded="sm" borderWidth="1px">
20
        <Bleed blockStart="8">
21
          <DecorativeBox height="8">blockStart</DecorativeBox>
22
        </Bleed>
23
      </Box>
24

25
      <Box padding="8" rounded="sm" borderWidth="1px">
26
        <Bleed blockEnd="8">
27
          <DecorativeBox height="8">blockEnd</DecorativeBox>
28
        </Bleed>
29
      </Box>
30
    </VStack>
31
  )
32
}